How to nest ng-view inside ng-include?

Question

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

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

However, if I use the code below, the view shows twice:

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

What is the problem and how can I resolve it?

Answer 1

This problem occurs due a delayed instantiation of ng-view (passing through ng-include). In such case the $route instantiation is delayed as well, and $route will miss the location change event (and routing will not be performed at all).

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

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

Further more, it is sufficient to only include $route as a dependency. This will work, too:

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

_{Source: the related issue on github.}

---

Also check out ui-router, which is intended to specifically deal with the issue of nested views.