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.