javascript - Angular UI Router: navigation links with sub navs -

i'm attempting create dynamic tree style navigation.

the basic layout like:

     - page 1     -- page 1-1     -- page 1-2     -- page 1-3     - page 2     -- page 2-1     -- page 2-2     -- page 2-3     - page 3     -- page 3-1     -- page 3-2     -- page 3-3 

by default see main links:

     - page 1     - page 2     - page 3 

then click link , content page , sub links appear:

     - page 1     -- page 1-1     -- page 1-2     -- page 1-3     - page 2     - page 3 

when first started working on creating static states each main page , dynamic route sub pages loaded via view:

     .state('page1',{       url: '/page1',       views: {         'page1menu': {           templateurl: 'views/page1.menu.htm',           controller: 'page1menuctrl'         },         'page1content': {           templateurl: 'views/page1.content.htm',           controller: 'page1contentctrl'         }       }     })     ... (repeated page2 , page3)     .state('page1.info',{       url: '/:info',       views: {         'page1menu': {           templateurl: 'views/page1.menu.htm',           controller: 'page1menuctrl'         },         'page1content': {           templateurl: 'views/page1info.content.htm',           controller: 'page1infocontentctrl'         }       }     }) 

and behaved way wanted not how wanted handle this. imagine having create new set of states every new section potential having hundreds of sections. , if tree goes deeper 1 level?

after attempting build third level became obvious not sustainable setup (at least in terms of efficiency when expanding content).

so changed setup dynamic, meaning every state after first dynamic. in doing cannot figure out how sub links appear when clicking on main link.

if use view before have uniquely named , have no idea how i'd associate without going right having make bunch of static declarations of states/controllers/etc.

i looked trying use ng-class="{active: $state.includes('whatever')}" didn't work no matter how tried it. have feeling because on same level triggering link:

     start state link container       state link       sub links container ng-class     end state link container 

i have tried create plunkr illustrate i'm trying can't ever work way works on server.

because of i'm hoping information enough idea across , find method makes work way hoping will.

question 1: how sub navs show when parent or 1 of children active?

question 2: how can set of dynamic states efficiently expanded new , varied (in quantity) levels?

---

update: more info question 2 idea here create kind of information reference (a wiki without being wiki). topic groups have specific topics under them while others have sub groups before reaching specific topics. example, people group alphabetical list of people technology group broken sub groups transportation or medical. , groups split others land, sea, , air or pharmaceutical , surgical.

in situation this, it's unclear how many levels necessary topics. may idea of using dynamic states top down not work @ all. can see reasons why case question should have been "is possible i'm trying do?" instead of "how".

going bonatoc's suggestion, sounds may better make first tier of states static , each sub tier made dynamic needs be, planning static depth each.

maybe looking nav tree?