Nested ng-repeat with json strange result

Question

I've setup a plunkr so demonstrate incase I explain incorrectly.

I want to loop through three tiers of an object and only filter the last tier by three keys.

I've setup the nested ng-repeat loop but the loop isnt behaving how I expect.

Demo of the code on Plunkr

The JSON I'm using.

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {

      $scope.list = [{
        'Name': 'level 0',
        'two': {
          'Name': 'level 1',
          'three': {
            'Name': 'level 2'
          }
        }
      }, {
        'Name': 'level 0',
        'two': {
          'Name': 'level 1',
          'three': {
            'Name': 'level 2'
          }
        }
      }, {
        'Name': 'level 0',
        'two': {
          'Name': 'level 1',
          'three': {
            'Name': 'level 2'
          }
        }
      }, ]
    });

The nested ng-repeat:

<div>============= one level list =============</div>
<ul>
  <li ng-repeat="e in list">{{e.Name}}</li>
</ul>
<div>============= two level list =============</div>
<ul>
  <li ng-repeat="e in list"> 
    {{e.Name}}
    <ul>
      <li ng-repeat="f in e">
        {{f.Name}}
      </li>
    </ul>
  </li>
</ul>  
<div>============= three level list =============</div>
<ul>
  <li ng-repeat="e in list"> 
    {{e.Name}}
    <ul>
      <li ng-repeat="f in e">
        {{f.Name}}
        <ul>
          <li ng-repeat="g in f">
            {{g.Name}}
          </li>
        </ul>
      </li>
    </ul>
  </li>
</ul>  

Any help would be greatly appreciated.

Answer 1

It's because ng-repeatis also parsing the key Name as an object that why you have an empty <li>

Use ng-if to add a condition This example is working very well with your code :

 <ul>
      <li ng-repeat="e in list" ng-if="e.Name!=null"> 
        {{e.Name}}
        <ul>
          <li ng-repeat="f in e" ng-if="f.Name!=null">
            {{f.Name}}
            <ul>
              <li ng-repeat="g in f" ng-if="g.Name!=null">
                {{g.Name}}
              </li>
            </ul>
          </li>
        </ul>
      </li>
    </ul>

Here a working plunker from your code : http://plnkr.co/edit/HUvl6OlbIUF7FTgDQLAY?p=preview