Динамический набор вкладок в AngularUI Bootstrap (ui.bootstrap.tabs)

Question

Я использую директиву вкладок AngularUI Bootstrap с динамически создаваемыми вкладками.

<div ng-controller="TabsDemoCtrl"> 
<uib-tabset active="activeForm"> 
    <uib-tab index="$index" ng-repeat="tab in tabs" > 
    <uib-tab-heading>{{tab.title}}</uib-tab-heading> 
    {{tab.content}} 
    </uib-tab> 
</uib-tabset> 

Когда массив вкладок изменяется в Tabs UI получить внесены соответствующие изменения, но не активной вкладки не установлен (хотя я явно делать множество в в контроллере)

angular.module('ui.bootstrap.demo', ['ngAnimate', 'ngSanitize', 'ui.bootstrap']); 
angular.module('ui.bootstrap.demo').controller('TabsDemoCtrl', function ($scope, $window) { 
    $scope.tabs = [ 
    { title:'Dynamic Title 1', content:'Dynamic content 1' }, 
    { title:'Dynamic Title 2', content:'Dynamic content 2' }, 
    { title:'Dynamic Title 3', content:'Dynamic content 3' }, 
    { title:'Dynamic Title 4', content:'Dynamic content 4' } 
    ]; 

    $scope.changeTabs = function(){ 
     $scope.tabs = [ 
     { title:'Dynamic Title 5', content:'Dynamic content 5' }, 
     { title:'Dynamic Title 6', content:'Dynamic content 6' } 
    ]; 
    $scope.activeForm = 0; //Not working, how can I select tab dynamically? 
    }; 

    $scope.model = { 
    name: 'Tabs' 
    }; 
}); 

Может кто-нибудь сказать мне то, чего я не хватает?

Смотрите здесь Plunker: https://plnkr.co/edit/Ow7Cd1eidCgaLNOhX1Vl

Заранее спасибо Paul

Answer 1

Вам нужно обернуть установку ActiveForm в $ таймаут:

$timeout(function(){ 
    $scope.activeForm = 0; 
}); 

Это известная проблема - https://github.com/angular-ui/bootstrap/issues/5805

Обновлено plunkr

Answer 2

Эй здесь код нужно изменить

$timeout(function(){ 
$scope.activeForm = 0; //Not working, how can I select tab dynamically? 
},0); 

Это вызовет переваривать цикл и ваш код будет работать