У меня есть динамический набор вкладок, который генерирует вкладки из массива, который начинается пустым. Когда я добавляю новый элемент в массив, он появляется как новая вкладка. Я хочу, чтобы последняя добавленная вкладка была активной. Я устанавливаю активный индекс каждый раз, когда добавляю элемент в массив

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

Проблема, кажется, работает только с нечетным количеством вкладок. Вот что я имею в виду:

При начальной загрузке это выглядит так:

После добавления новой вкладки она показывает активную корректно:

Когда я добавляю еще один, ничего не выбирается, а переменная activeTabIndex становится неопределенной:

И на 3-м он снова начинает работать:

Так что даже для активных номеров индекса (0, 2) он работает нормально. Но почему-то вместо Acitve Index: 1 он отображается пустым и не устанавливает активной вкладки. Я записываю переменную в консоль, и она правильно отображает все значения.

Любая помощь / указатели / идеи приветствуются.

Благодарю.