angularjs - How to nest ng-view inside ng-include? -

when trying add ng-view inside ng-include, nothing happens. e.g. in following code, when themes/midnight/index.html holds ng-view, no view rendered:

<ng-include src="'themes/midnight/index.html'"></ng-include> 

however, if use code below, view shows twice:

<ng-include src="'themes/midnight/index.html'"></ng-include> <div ng-view></div> 

what problem , how can resolve it?

this problem occurs due delayed instantiation of ng-view (passing through ng-include). in such case $route instantiation delayed well, , $route miss location change event (and routing not performed @ all).

to bypass this, invoke $route update function on application initialization:

yourapp.run(['$route', function($route)  {   $route.reload(); }]); 

further more, sufficient include $route dependency. work, too:

yourapp.run(['$route', angular.noop]); 

_{source: related issue on github.}

---

also check out ui-router, intended deal issue of nested views.