Nested tabs using angularjs

Question

Need to create nested tabs.

In a page there will be multiple Person id tabs as outer tabs and on clicking each tab it will open inner tabs like Home,Office etc., and on clicking inner tab - Home, the tab content will display.

Outertab: Person 1 Person2

Innertab: Home Office

Refering the site - http://angular-ui.github.io/bootstrap/ , created outer tabs with content. created 2 separate tabset but not able to give link between the two tabset.

Can someone help me how to write directive for nested tabs? Any reference links?

Answer 1

I believe that AngularUI Router is what you are looking for. The majority of UI-Router's power is in its ability to nest states & views. Follow the link I've provided and take a look at the section Nested States & Views.

This Plunker example incorporates AngularUI Router to achieve a similar functionality you are looking for.

[EDIT]

This layout composed of nested views is exactly what for the AngularUI Router is used for:

So TabsTemplate will dynamically render the first level of tabs (any number).

TabTemplate could be a template without any dynamic content as Home and Office tabs are always there.

OfficeTemplate and HomeTemplate are again templates that are populated dynamically based on the selection of the current person.