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?

Did you try providing an ID to each tab and then set focus on it? — FDavidov, Sep 04 '16 at 07:57
I thought about this. Seems to me like a wrong approach, when dealing with AngularJS (maybe good approach for JQuery). I'm wrong? — No1Lives4Ever, Sep 04 '16 at 08:44
have you tried going over the docs ? there's an example that sets a specific tab using an outside button click — svarog, Sep 04 '16 at 08:48
The solution suggested by Ashwani uses index, which is equivalent of giving ID. In both cases, you could generate the ID/Index using Angular's capabilities. — FDavidov, Sep 04 '16 at 10:43

score 15 · Accepted Answer · answered Sep 04 '16 at 08:50

15

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

answered Sep 04 '16 at 08:50

Ashwani

268
2
8

How can we do it for dynamic tabsets? – Sana Ahmed Jan 17 '18 at 15:08
1

@Sana You mean something like this ? https://plnkr.co/edit/GQfq8zpKqGm2uZWA8oGU?p=preview – Ashwani Jan 24 '18 at 15:18

score 6 · Answer 2 · answered Apr 02 '18 at 14:53

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.

Angular UI - set active tab programmatically

2 Answers2

Linked