Angular UI-router Deep routing

Question

From the UI-router Doc , it says that for each state, you can set up multiple view and provide a different template and controller for each. So for my example, say I have a state provided that looks like this

.state('eventmenu.home', {
     url: "/home",
     views: {
       'menuContent':{templateUrl:"home.html"},
       'menulist' :{templateUrl: "list.html" }
     }})

So for the views, how would I be able to split off from there and set up a separate nested state for each one. This way my menulist can have multiple views, and my menuContent can as well, but both independent of each other.

I have a codepen set up with a basic boilerplate that has the content and menu views created, I'm just stuck on this next part. Any ideas? Any help is appreciated.

Answer 1

Sorry, this may not be an answer but I am new in this forum with low reputation that I cannot comment yet.

Think about if you really need states to do this. Maybe you are better off with using directives to split your menuContent and menuList. Using states to divide sections of a page is a bit confusing and cluttered. If you use directives, you can still have your own controllers embedded in the html via ng-controller="".