I prepared a little fiddle and boiled it down to the minimum:

http://jsfiddle.net/lpeterse/NdhjD/4/

<script type="text/javascript">
    angular.module('app', ['ui.bootstrap']);

    function Ctrl($scope) {
      $scope.foo = "42";
}
</script>


<div ng-app="app" ng-controller="Ctrl">
    1: {{foo}}<br />
    2: <input ng-model="foo" />
    <tabs>
        <pane heading="tab">
            3: {{foo}}<br />
            4: <input ng-model="foo" />
        </pane>
    </tabs>    
</div>

In the beginning all views reference the model Ctrl.foo.

If you change something in input 2: it properly updates the model and this change gets propagated to all views.

Changing something in input 4: only affects the views included in the same pane. It behaves like the scope somehow forked. Afterwards changes from 2: don't get reflected in the tab anymore.

I read the angular docs on directives, scopes and transclusion, but couldn't find an explanation for this undesired behaviour.

I would be grateful for any hints :-)

angularjs angular-ui angularjs-scope
Edit
Report