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

2
votes

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>
1
angularjsangularjs-directiveangular-ui
If you are planning on accessing the model from more than one place in your app, I would recommend creating a shared service to store the model. Here is a related answer: stackoverflow.com/questions/16700813/… – Brian Lewis

1 Answers

6
votes

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>