Check out the code snippet below to see the issue at hand:
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<title>AngularJS Plunker</title>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" />
<script src="https://code.angularjs.org/1.3.6/angular.js"></script>
<script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.12.0.min.js"></script>
<script>
angular.module('plunker', ['ui.bootstrap'])
.controller('MainCtrl', function($scope) {
$scope.changes = 0;
$scope.updateValueInScope = function () {
$scope.valueInScope = $scope.value;
$scope.changes++;
}
});
</script>
</head>
<body ng-controller="MainCtrl">
<tabset>
<tab heading="Tab A">
<div class="panel">
<input type="text" ng-model="value" ng-change="updateValueInScope()" />
<br />
<tt>value: {{value}}</tt><br />
<tt>valueInScope: {{valueInScope}}</tt><br />
<tt>changes: {{changes}}</tt>
</div>
</tab>
</tabset>
<input type="text" ng-model="value" ng-change="updateValueInScope()" />
<br />
<tt>value: {{value}}</tt><br />
<tt>valueInScope: {{valueInScope}}</tt><br />
<tt>changes: {{changes}}</tt>
</body>
</html>
Try it out on Plunker:
http://plnkr.co/edit/dJc009csXVHc7PLSyCf4?p=preview
This piece of code features two textboxes, one within a tabset and one outside. Both are connected to the value scope variable. Interestingly, changing the content of the textbox inside the tabset does not update the value variable in the scope, while modifying the textbox outside the tabset does. Any changes made to either textbox will trigger a call to updateValueInScope() through ngChange.
I am intrigued by this behavior and would appreciate an explanation as to why it occurs. Is there a way to resolve it so that the textbox inside the tabset can effectively modify the model in the scope?