How to use Angular ui.bootstrap tabs with ui.router?

Question

Here\'s my initial implementation of ui.bootstrap tabs using ui.router:

Answer 1

The easiest way is to ignore all the fancy ui-bootstrap directives and just make use of the CSS. Then you can end up with something very simple:

<ul class="nav nav-tabs">
    <li ui-sref=".state1" ui-sref-active="active"><a>State 1</a></li>
    <li ng-repeat="type in viewModel.types"
        ui-sref=".typeState({type:type})"
        ui-sref-active="active"><a>{{type}}</a></li>
</ul>

This will give the appearance of the tabs while maintaining a correct active states. The trouble with using the <tab-header> directive is that you can't cleanly initialize the active state from the ui-router $state, so you get multiple tabs highlighted on page load.

Answer 2

Just did this in a project of mine. This assumes that your routes are wired with ui.router. Hope it helps.

<uib-tabset active="active">

    <uib-tab index="0" ui-sref ="tab1" heading="Tab1"></uib-tab>

    <uib-tab index="1" ui-sref="tab2" heading="Tab2"></uib-tab>

</uib-tabset>

Answer 3

You might consider having a look at this project, ui router plus ui bootstrap tabs, which declares itself as

Idiot-proof tab panes with route support using Angular.js + Bootstrap 3 + UI Router

I haven't tried it as yet, but certainly looks promising.