Angular UI - set active tab programmatically

Question

I using AngularUI with this code:

<uib-tabset type="pills">
    <uib-tab heading="Tab 1">Tab 1 content</uib-tab>
    <uib-tab heading="Tab 2">Tab 2 content</uib-tab>
</uib-tabset>

I want to programmatically change the current active tag from my angular-controller code. For example, select tab "2" to be the active.

How this can be done?

Answer 1

You need to use the active property on ui-tabset. Then You need to have indexes on each tab to work from outside context.

<uib-tabset type="pills" active="active">
    <uib-tab heading="Tab 1" index="0">Tab 1 content</uib-tab>
    <uib-tab heading="Tab 2" index="1">Tab 2 content</uib-tab>
</uib-tabset>

See this working plnkr: Working Plnkr

Answer 2

I had the same problem and this answer helped me to figure out.

I used two variables in the scope: $scope.showTabsInView and $scope.activeTabIndex.

Default Values are:

$scope.showTabsInView = false;
$scope.activeTabIndex = 0;

First, I loaded my dynamic tabs, then I specified the value of activeTabIndex. Then I changed the value of showTabsInView to true.

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

You can simply ignore dynamic tabs and $scope.showTabsInView if your case is not that much complicated.