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

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