ub-tabaset does not select most recently added tab

[brijs]

Bug description:

uib-tabset.active becomes null after addTab calls, when I attempt to add a new tab, and also make it the active tab

See https://plnkr.co/edit/sJ6aNyPbN609toafgHx2?p=preview

HTML

<button ng-click="vm.addItem()">Add Tab</button>

 <uib-tabset active="vm.activeTab">
    <uib-tab  ng-repeat="t in vm.tabs track by $index">
      <uib-tab-heading>{{t.name}}</uib-tab-heading>
      <div>{{t.name}} Content</div>
    </uib-tab>
 </uib-tabset>

script.js

    vm.tabs = [];
    vm.activeTab = -1;
    vm.counter = 0;

    vm.addItem = function() {
      vm.tabs.push({
        name: "Item " + vm.counter
      });
      vm.activeTab = vm.counter; // select the most recently added item
      vm.counter++;
    }

Angular: 1.5.1
UIBS: 1.2.4

[lunhat79]

It is not a bug. When you add a tab. It will render the view, and in the mean time the active being updated.
So the code
vm.activeTab=vm.counter;
Do not effect.

You have to let the render view finish its job first. Then set the vm.activeTab
Ex:
Replace the code
vm.activeTab=vm.counter;

By:
var curIndex = vm.counter;
$interval(function() {
vm.activeTab = curIndex;
}, 0, 1);

That'll work

[danpolites]

I was having the same issue and lunhat79's solution worked for me. What do you think about adding an example to the docs that show how to programmatically add tabs? Two flavors would be ideal, one with a button as being used here and one using the last tab as the trigger to add additional tabs.

[wesleycho]

Closing as a usage issue.

[lunhat79]

It is just the MVVM working flow. I am facing the problem as
#5654
But I have figured out an unoffical way for solve this. But we could make it better

[brijs]

@lunhat79 , thanks, yea I ended up with a similar workaround as you suggested above, and that works for me. I still think it is a bug though @wesleycho . I am not a directives expert, but in this specific case, it seems that we always want to trigger uibTab.addTabs before triggering tabset.active's watch listener, instead of being the other way round.

Currently, tabset.active's watch listener always gets called first (before ngRepeat / uibTab's:link:addTab), and when the new specified active index is out of bounds (compared to the existing tabset.tabs array), it is then reset to null; see src/tabs/tabs.js#L28.

I am guessing that this behaviour (bug) was introduced when the active attribute was moved up (& out of tab) into tabset.

[jmjcando]

@lunhat79 , thanks for the workaround. I prefer to use $timeout in stead of $interval as I only need to delay the execution just once. Not a big deal, I guess.

Ex:
Replace the code 
vm.activeTab=vm.counter;

By:
var curIndex = vm.counter;
$timeout(function() {
   vm.activeTab = curIndex;
}, 0);

I agree that either this should be classified as bug and need to fix it, Or we should have updated example which mentions this usage (workaround)

[khouleBousso]

Thanks everybody. You save my day.

[lunhat79]

Just remark:
The current UITab is not fully support for dynamic tab generation.
So be wise to use the UITab with ng-repeat.
you can reference to
#5654
Although It is closed as won't fixed but you can learn from the issue

[MilknCookie]

Hi,

This got close, but I really don't like the solution. It's definitely not clean because it's a race condition you are trying to win with an interval or timeout.

edit :
I ended up using bootstrap native tag like this :
<div role="tabpanel" class="tab-pane" ng-class="{active: graphsData.activeId == idGraph}" ng-repeat="(idGraph, graph) in graphsData.graphs">

with a controller that manage my activeId. I can now add dynamically tab and set them active in my angular code.

[rdutta845]

<uib-tab  index="$index+1" ng-repeat="t in vm.tabs track by $index">

add index of each tab inside the ng-repeat
do this your code will work properly