CODEWITHSUNDEEP
angularjsangularjs-directiveangular-ui
Alexandru R
Alexandru R

Reputation: 8823

Directive model binding doesn't work under angular ui bootstrap tabs directive

I have a model in Angular.js which can be updated from controller, as well as from a directive. If I put the directive inside AngularUI bootstrap Tabs directive, it doesn't update the model. The code is very simple, and should work.

Please choose Second Tab and then click the button. It doesn't update it: Here's a Plunker: http://plnkr.co/edit/jdaniklxFNkdxAYaLtVQ?p=preview

<!doctype html>
<html ng-app="plunker">
  <head>
    <scriptsrc="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.5/angular.js"></script>
    <script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.4.0.js"></script>
    <script src="example.js"></script>
    <link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css" rel="stylesheet">
  </head>

  <body>
    <div ng-controller="TabsDemoCtrl">  
      <button ng-click="ranges=[23, 67]">Change in CTRL [23, 67]</button>
      <br/>
         This should be inside from any button: {{ranges}}
      <br/>
      <br/>
      <tabset>
         <tab heading="First">Static content</tab>
         <tab heading="Second">
           <my-directive ng-model="ranges"></my-directive>
         </tab>
      </tabset>
    <br/>
    <br/>
    <my-directive ng-model="ranges"></my-directive>
    </div>
  </body>
</html>

Upvotes: 2

Views: 1656

Answers (1)

Mark Rajcok
Mark Rajcok

Reputation: 364677

The AngularUI boostrap directive creates a child scope, so a quick fix is to use the following inside your "Second" tab:

<my-directive ng-model="$parent.ranges"></my-directive>

Upvotes: 6

Related Questions