angularjs - Angular UI-Bootstap tabs: not set active tab -


i have this plunkr have system add tabs dynamically.

when add new tab, setted active tab. problem becomes when add 2 tabs, clicks on first tab , add new tab. order, new inserted tab not setted active.

any ideas please?

this html code:

<div ng-controller="tabsdemoctrl">   {{activetabindex}}   <uib-tabset active="activetabindex">     <uib-tab ng-repeat="tab in tabs" index="tab.id">          <uib-tab-heading>{{ tab.title }} <a ng-click="removetab(tab.id)" href=''>(del)</a> </uib-tab-heading>          {{tab.content}}      </uib-tab>   </uib-tabset>    <div ng-controller="btnctrl">     <div class="btn btn-primary" ng-click="addtab()">add</div>   </div>  </div> 

and controller:

angular.module('ui.bootstrap.demo', ['nganimate', 'ngsanitize', 'ui.bootstrap']);  angular.module('ui.bootstrap.demo').controller('tabsdemoctrl', function ($rootscope, $scope) {    $rootscope.activetabindex = 0;   $rootscope.tabs = [];    //close tab   $scope.removetab = function(index)   {       var tabslength = $scope.tabs.length -1;        (var i=0; < $scope.tabs.length; i++)       {           if ($scope.tabs[i].id == index)           {               $scope.activetabindex = $scope.tabs[tabslength].id;               $scope.tabs.splice(i, 1);            }       }   };  })  angular.module('ui.bootstrap.demo').controller('btnctrl', function ($timeout, $scope, $rootscope) {    //add new tabs   $scope.addtab = function()   {     var newtab = {         title: 'new tab',         content: 'content here',         id: makeid()     };      $rootscope.tabs.push(newtab);      $timeout(function()      {         $rootscope.activetabindex = newtab.id;     });    }    function makeid()   {     var text = "";     var possible = "abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz0123456789";      for( var i=0; < 5; i++ )         text += possible.charat(math.floor(math.random() * possible.length));      return text;   }  }); 

here working plunker: https://plnkr.co/edit/pucttzsznmvazjy13ioq?p=preview

i think issue referencing activetabindex in template without $root proceeding this:

active="$root.activetabindex" 

what equates too, outside of template $scope.$root.activetabindex convenience method $rootscope inside template. though $rootscope above other scopes, when access variable in template that's in isolate scope it's assumed property of $scope. uib-tab creating isolate scope makes $rootscope unavailable directive.


Comments