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:

    
State 1
    
{{type}}

This will give the appearance of the tabs while maintaining a correct active states. The trouble with using the 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.