how to use angular routing to nest 3 mvc razor models

I believe that I answered your question to someone else. You want to gather information through the URL, right?

Using routes in AngularJS to gather data

ui-router can help you achieve this by using

a.

ui-sref='stateName({param: value, param: value})' 

The parameterr object passed along with the state name can be accessed in the controller using $stateParams

b. In your controller you could do something like

if ($stateParams.id != null) {// service call goes here}

c. You need to use named views Something like

$stateProvider  .state('report', {    views: {      'filters': { ... templates and/or controllers ... },      'tabledata': {},      'graph': {},    }  })

where

filters

and

tabledate

are the named views.

ui-view has a decent example for it here https://github.com/angular-ui/ui-router/wiki/Multiple-Named-Views

Btw , I would suggest you first figure out the panels which are dynamic ( i.e the ones whose content changes because of some kind of user interaction ) vs static ones ( they dont change once loaded) . You should only be looking at ui-views to replace the dynamic parts , there is no point in making the app more complicated by putting everything in a child view . The states can become very confusing very quickly.

I use the ng-include directive to load the static views in the parent state and only define child states for portion of the views that change.

<div ng-include="'/MyStaticView'" ng-show="MyCondition == true "></div>