The value is optional for the scope variable if used inside a uib-tabset

Question

The value is not required for a scope variable if used inside a uib-tabset . In the following example, I tried to get $scope.message inside and outside of the uib-tab:

 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 associate it with the input element inside uib-tab. But when I changed its value, the changes are not reflected in the uib-tab.

jsfiddle link

Answer 1

Basically in angular, if you bind to a primitive, the value of the variable is passed, not a reference to it, which can interrupt the two-way binding. I assume that the tabset directive creates its own scope, so the valueInScope variable defined in the controller loses its binding in the child tab region, because its primitive.

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

Object Solution

also you can use $parent.parentproperty to bind the content area. This will prevent the creation of a child of its own property.

Solution with $ parent

Answer 2

You can solve this problem by creating an object in the area and then adding a property to the object instead of the area inside the controller.

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

You can check it in the link below plunker

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