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

Durgpal Singh · Accepted Answer · 2017-07-06 08:56:25Z

19

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

edited Jul 6, 2017 at 8:56

answered Nov 6, 2015 at 6:46

Durgpal Singh

12k4 gold badges40 silver badges50 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

CampbellGolf Over a year ago

Solved a similar issue I was having using $uibModalInstance

Arvin · Accepted Answer · 2015-11-06 06:37:44Z

4

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

answered Nov 6, 2015 at 6:37

Arvin

6146 silver badges15 bronze badges

Collectives™ on Stack Overflow

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

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related