Tengo un conjunto de pestañas dinámico que genera las pestañas a partir de una matriz que comienza en blanco. Cuando agrego un nuevo elemento a la matriz, aparece como una nueva pestaña. Quiero que la última pestaña agregada sea la activa. Establezco el índice activo cada vez que agrego un elemento a la matriz

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

Aquí está el Plunk para el código fuente completo de la demostración:https://plnkr.co/edit/TX6ek4R62AfM2zUXcoC3?p=preview

El problema es que parece estar funcionando solo con un número impar de pestañas. Esto es lo que quiero decir:

En la carga inicial se ve así:

Después de agregar una nueva pestaña, muestra la activa correctamente:

Cuando agrego otro, nada se selecciona y la variable activeTabIndex queda indefinida:

Y en el tercero comienza a funcionar nuevamente:

Entonces, incluso para los números de índice activos (0, 2) funciona bien. Pero de alguna manera, en lugar de Acitve Index: 1, se muestra en blanco y no establece la pestaña activa. Escribo la variable en la consola y muestra todos los valores correctamente.

Cualquier ayuda / punteros / ideas son bienvenidas.

Gracias.