Value is not binding with scope's variable if used inside uib-tabset

Question

Value is not binding with scope's variable if used inside uib-tabset. Here in following example I tried to get $scope.message inside uib-tab and outside of it :

angular.module("app", ["ui.bootstrap"])
  .controller("myctrlr", ["$scope", function($scope){
            $scope.message = "my message ";
  }]);

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.14.3/ui-bootstrap-tpls.min.js"></script>
<div ng-app="app" ng-controller="myctrlr" class="col-md-6 col-md-offset-3">
 <uib-tabset>
     <uib-tab heading="Static title">
            <input type="text" ng-model="message" ng-change="change()" /> 
            <br />
            Inside uib-tab : {{ message }}
    </uib-tab>
     <uib-tab heading="Another title">
       I've got an HTML heading, and a select callback. Pretty cool!
     </uib-tab>
   </uib-tabset>
    Outside uib-tab : {{ message }}
</div>

I declared $scope.message and tried to bind it with the input element inside uib-tab. But when I changed it's value, the changes are not reflecting on outside of uib-tab.

jsfiddle link

Answer 1

Basically in angular, if you bind to a primitive the value of the variable is passed around, and not the reference to it, which can break 2-way binding. I'm guessing that the tabset directive creates its own scope, so the valueInScope variable defined in the controller loses its binding in the child scope of the tabset because its a primitive.

 $scope.data = {message:'my message'}

Solution by Object

also you can use $parent.parentproperty to bind child scope. This will prevent the child scope from creating its own property.

Solution by using $parent

Answer 2

You can solve this issue by creating an object on the scope and then adding the property on object instead of the scope inside the controller.

  $scope.obj = {message : 'my message'};

You can verify this in the below plunker link

http://plnkr.co/edit/3koAJnkOyf6hfGwO6AuD?p=preview