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

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.

Answer 2

You can refer to how angular bootstrap tabset directive is written.

Reading the tab code helped me understand how directive work. Now I can build many components from the ground up.

I build myself a simpler version of the tabset directive, it doesn't render the content, just the tab-heading element. So I can decide what inside the content via a tab selected callback. And for nested tabs, I just need to put in another tabset directive.