在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> 

当标签数组改变了用户界面选项卡获得相应的修改，但没有激活的标签设置（虽然我明确地不设置在控制器）

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

感谢 保罗

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); 

这将触发消化周期，你的代码将工作