html parent content wont show up though to ngInclude anglurjs

Question

I have these two template which is for tree view, I want to use the first approach but it seems that there is a problem or I've missed something.

First Approach (desirable but does not work)
TreeTemplate.html

<ul>
    <li ng-repeat="node in c.model" style="list-style-type: none;" ng-include="'/_Core/DirectiveCore/Tree/NodeTemplate.html'">
        {{node.text}} <!--It wont show up , the problem is here, any tags will not show up in result-->
    </li>
</ul>

NodeTemplate.html

<ul ng-if="node.nodes">
<li ng-repeat="node in node.nodes" style="list-style-type: none;" ng-include="'/_Core/DirectiveCore/Tree/NodeTemplate.html'">
    {{node.text}}
</li>

every thing in <li></li> in TreeTemplate.html wont show up thought to ng-include

Second Approch (not desirable but works)

TreeTemplate.html

<ul>
<li ng-repeat="node in c.model" style="list-style-type: none;" ng-include="'/_Core/DirectiveCore/Tree/NodeTemplate.html'">
   <!--there is not any tag here!-->
</li>

NodeTemplate.html

    {{node.text}}
<ul ng-if="node.nodes">
    <li ng-repeat="node in node.nodes" style="list-style-type: none;" ng-include="'/_Core/DirectiveCore/Tree/NodeTemplate.html'">
        {{node.text}}
    </li>
</ul>

please help me figure out what is happening.

Answer 1

The ng-include attribute is replacing everything inside the li with the content from NodeTemplate. This is why your {{node.text}} isn't showing up.

Your second approach is almost ideal, I don't get why you don't like it. From what I get, the NodeTemplate should be a single node inside your tree, which means it should be responsible for rendering the node text as well.

I would just remove {{node.text}} inside the li there, since it'll be replaced by the ng-include:

{{node.text}}
<ul ng-if="node.nodes">
  <li ng-repeat="node in node.nodes" style="list-style-type: none;" ng-include="'/_Core/DirectiveCore/Tree/NodeTemplate.html'" />
</ul>