Tree list with angular material
<p>Good day, I'm trying to create tree list from list of items with parent and childs id, that I recursive find with angular material based on following link
<a href="http://codepen.io/dunmaksim/pen/GJLogo/" rel="nofollow noreferrer">http://codepen.io/dunmaksim/pen/GJLogo/</a>, but there is something wrong in my code. Child level depends on item.expanded.</p>

<pre><code> &lt;script type="text/ng-template" id="dirtyDataFromServer.html"&gt;
    &lt;md-list-item flex&gt;
        &lt;md-checkbox aria-label="item" ng-model='item.checked' md-indeterminate="isIndeterminate(item, $event)" ng-click="toggleChildrenChekboxes(item, $event)"&gt;&lt;/md-checkbox&gt;
        &lt;label&gt;{{ item.id }}. {{ item.name }}&lt;/label&gt;
        &lt;span flex&gt;&lt;/span&gt;
        &lt;md-icon style="z-index:100" class="material-icons"&gt;
            &lt;i ng-click="toggleItems(item, $event)" class="material-icons"&gt;{{item.expanded ? 'expand_less' : 'expand_more' }}&lt;/i&gt;
        &lt;/md-icon&gt;
    &lt;/md-list-item&gt;
    &lt;md-list flex ng-show="item.expanded"&gt;
        &lt;div class="list-left-margin" ng-repeat="item in item.subObjs" ng-include="'dirtyDataFromServer.html'"&gt;&lt;/div&gt;
    &lt;/md-list&gt;
&lt;/script&gt;
</code></pre>

<p>So, whats happens here</p>

<pre><code>1.item 1
2.item 2
      3.item 3
      4.item 4
           6.item 6
           7.item 7
5.item 5
</code></pre>

<p>but when I expand, for example item 4:</p>

<pre><code>1.item 1
2.item 2
      3.item 3
      4.item 4
           6.item 6
           7.item 7
      6.item 6
      7.item 7
5.item 5
</code></pre>

<p>It create dubble at same level, items are simmilar, but in DOM they are different.</p>