Angular UI Bootstrap Tabset and subtabs

Few problems solved in this post.

After a long investigation I found quite not clear and not documented how to use Angular UI Bootstrap tabsets. I was basically trying to have a range of tabs/subtabs and just activating them using active attribute.

First issue

More precisely, this issue: https://github.com/angular-ui/bootstrap/issues/611

According to this github issue, it’s not possible to use any expression/function evaluation in active attribute. You have to use a boolean var.

That’s the reason why I created an array to manage each tabs.

Second problem

How to activate parent tabs when clicking on a child tab?

To manage this I use the function includes() (Documentation) of $state and I use dot-separated names for my routes like “foo.bar”. Thanks to this I can look for “foo” to activate the parent tab and “foo.bar” for the child tab.

You will find a basic 3-level tab example on this JSFiddle: http://jsfiddle.net/wy8j75r8/3/

Here is another link I used to give me an idea about expression evaluation in active: http://plnkr.co/edit/F57uuiiqAbQ92QWfkYp8?p=preview