Scope changes not reflected outside <tabset>

[jrupac]

Changes made to variables that are part of an enclosing controller's scope are not reflected outside of the <tabset> within which those changes are made. The changes are also not visible programmatically (e.g., $scope.foo is not updated in the controller code).

Here is an example. In the code below, the {{text}} is not updated when changes are made to the <input> box within the <tabset>. It is reflected when changes are made to the <input> box outside the <tabset>:

<div ng-controller="TabsDemoCtrl">
  {{text}}
  <input ng-model="text">
  <tabset>
    <tab heading="Tab">
      <input ng-model="text">
    </tab>
  </tabset>
</div>

This functionality differs from the behavior of previous versions (I have tested it against 0.6.0, where {{text}} is always correctly updated). I have created examples below:

Working (0.6.0): http://plnkr.co/edit/2LJUcRyaRROjFVaCYhXu?p=preview
Not working (0.9.0): http://plnkr.co/edit/W8i8VqWwriGY7tXjPPBm?p=preview

This bug may have been introduced in c9acebb when the following line was removed:

tabsetCtrl.$scope = scope;

within the compile function of <tabset> (but this is just a guess and I'm not certain).

[chrisirhc]

Be careful of child scopes, models should always contain a . within the model expression. The tab creates a child scope so you need to bind it to a model that expression that evaluates to a model in the parent scope.
See https://github.com/angular/angular.js/wiki/Understanding-Scopes .

Working plunker: http://plnkr.co/edit/vclolFBfF7QMQAQgNmiL?p=preview

Alternatively, you could probably use $parent.text but this may not work if there are nested child scopes such as when using tabs with ngRepeat.

This may have worked in 0.6.0 but it was only because we weren't introducing a child scope at that time. However, a user shouldn't rely on this behavior working, as the code will break when any directive (such as ngRepeat) introduces a child scope.

[chrisirhc]

Closing as this seems to have resolved the issue.