Impostazione della scheda attiva su schede create dinamicamente con UI Bootstrap angolare

Question

Ho un tabset dinamico che genera le schede da una matrice che inizia in bianco. Quando aggiungo un nuovo elemento all'array appare come una nuova scheda. Voglio che l'ultima scheda aggiunta sia quella attiva. Ho impostato l'indice attiva ogni volta aggiungo un elemento alla matrice

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

Qui sta la Plunk per il codice sorgente completo della demo: https://plnkr.co/edit/TX6ek4R62AfM2zUXcoC3?p=preview

Il problema è che sembra funzionare solo con il numero dispari di schede. Ecco cosa voglio dire:

Il carico iniziale che appare così:

Dopo aggiungo una nuova scheda che mostra quella attiva correttamente:

Quando ho aggiungi un altro non viene selezionato nulla e la variabile activeTabIndex diventa indefinita:

E al 3 ° lo si inizia a lavorare di nuovo:

Così, per numeri di indice anche attivi (0, 2) funziona benissimo. Ma in qualche modo invece di Acitve Index: 1 mostra vuoto e non imposta la scheda attiva. Scrivo la variabile su console e visualizza tutti i valori correttamente.

Qualsiasi aiuto/suggerimenti/idee sono benvenuti.

Grazie.

Answer 1

Secondo docs:

attiva (default: Indice di prima scheda) - Indice attivo di scheda. Impostando questo su un indice di tabulazione esistente, questa scheda diventerà attiva.

Verificare la matrice linguette contiene quella attiva, penso che si dovrebbe aggiungere un $ timeout c'è:

 $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