Active on angularjs bootstrap tab with static content

Question

I am using Angular Bootstrap UI to show a tabset with static content.

I was frustrated by this because the UI Bootstrap Tab documentation only shows navigation to tabs created by binding with ng-repeat.

    <uib-tabset>
        <uib-tab heading="Basic Details">
            <div role=" tabpanel" class="tab-pane active" id="basicDetails">
            tab1
            <button class="btn btn-success" ng-click="$parent.tabs[1].select()">Go to Tab 3</button>
            </div>
        </uib-tab>
        <uib-tab heading="Basic Details">
            <div role=" tabpanel" class="tab-pane active" id="basicDetails">
            tab2
            </div>
        </uib-tab>
    </uib-tabset>

I found some thing hear Stackoverflow but this is not working with current version of Angular Bootstrap UI..

Plunker

Answer 1

to set a tab as active, you need to set a boolean flag on your scope to "true" and associate it with the given tab's active attribute. this would look like

<uib-tabset>
    <uib-tab heading="Basic Details" active="tabOneActive">
        tab1
    </uib-tab>
    <uib-tab heading="Other Details" active="tabTwoActive">
       tab2
    </uib-tab>
</uib-tabset>

when tabOneActive is set to true, the first tab will be shown