Can I have nested ng-include's?

Question

I have a template that is inserted via ng-include and that template also has an ng-include. The inner ng-incude is not being shown. Why?

Main Template:

<div ng-include src="'views/outer.html'"></div>

views/outer.html:

<div ng-repeat="item in items">
    // Stuff
    <div ng-include src="'views/inner.html'"></div> // not being shown
    // More stuff
</div>

Answer 1

The code you posted should work so the problem is probably situated somewhere else.

One of the reasons could be that a JavaScript error is thrown somewhere else or that no items are found in the scope. Make sure to check the browser console.

Here is a working version of your code for your convenience:

http://plnkr.co/edit/pCTInrtITqHraC1hPyZH?p=preview

Hope that helps!

Answer 2

ng-include is a directive. Your view/outer.html should do like this:

$parent.items

Because directive not inherit parent automatically.