角度UIブートストラップを使用して動的に作成されたタブでアクティブなタブを設定する

Question

空白で始まる配列からタブを生成する動的タブセットがあります。配列に新しい項目を追加すると、新しいタブとして表示されます。最後に追加したタブをアクティブなものにしたい。私は、配列に項目を追加するたびにアクティブなインデックスを設定

HTML：

<uib-tabset active="activeTabIndex"> 
    <uib-tab ng-repeat="tab in tabs" heading="{{tab.title}}">Some content</uib-tab> 
</uib-tabset> 

はJavaScript：

$scope.activeTabIndex = 0 
$scope.tabs = []; 

$scope.addTab = function() { 
    var newTab = { title: 'Tab ' + ($scope.tabs.length + 1) }; 
    $scope.tabs.push(newTab); 
    $scope.activeTabIndex = ($scope.tabs.length - 1); 
    console.log($scope.activeTabIndex); 
}; 

ここでは、デモの完全なソースコードのためのPlunkです：https://plnkr.co/edit/TX6ek4R62AfM2zUXcoC3?p=preview

問題は、奇数個のタブのみで動作しているようです。ここで私が何を意味するかです：

初期ロードでは、それは次のようになります。

私は新しいタブを追加した後、それは正しくアクティブなものを示しています

Iを別のものを追加すると何も選択されず、activeTabIndex変数は未定義になります：

そして、それは再び作業を開始する第三1上：

そうでもアクティブインデックス番号（0、2）のために、それが正常に動作します。しかし、何とかAcitve Index：1の代わりに空白を表示し、アクティブなタブを設定しません。変数をコンソールに書き込むと、すべての値が正しく表示されます。

どのようなヘルプ/ポインター/アイデアも大歓迎です。

ありがとうございました。 docsによると

Answer 1

：

アクティブ（デフォルト：最初のタブのインデックス） - タブのアクティブインデックス。これを既存のタブインデックスに設定すると、そのタブがアクティブになります。

タブ列がアクティブなものを含んでいる、私はあなたがそこに$タイムアウトを追加すべきだと思うことを確認します

 $scope.addTab = function() { 
     var newTab = { title: 'Tab ' + ($scope.tabs.length + 1) }; 
     $scope.tabs.push(newTab); 
     $timeout(function(){ 
      $scope.activeTabIndex = ($scope.tabs.length - 1); 
     }); 
     console.log($scope.activeTabIndex); 
     }; 

https://plnkr.co/edit/q4QP7zoB0HXSjn3MplE4?p=preview