title: How do I recursively iterate over an object that has unknown hierarchies with Angular JS?
body: <p>So take this example:</p>
  
  <p><a href="http://jsfiddle.net/7U5Pt/" rel="nofollow">http://jsfiddle.net/7U5Pt/</a></p>
  
  <p>Here I've got an object that describes a (very basic) menu. Each item can have multiple children with potentially unlimited levels of hierarchy.
  The <code>ng-repeat</code> directives I'm using to turn it into <code>&lt;ul&gt;&lt;li&gt;</code> elements work fine for the first two levels, but not for the third or any subsequent level of the hierarchy.</p>
  
  <p>What's the best way to recursively iterate over this object, dealing with unlimited levels of children?</p>
  
  <p>Any help much appreciated!</p>
  
  <p>Here's the code incase the fiddle goes away:</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div ng-app="myApp"&gt;
  &lt;div ng-controller="myCtrl"&gt;
      &lt;nav class="nav-left"&gt;
          &lt;ul ng-repeat="item in mytree.items"&gt;
              &lt;li&gt;NAME: {{ item.name }}
                  &lt;ul ng-repeat="item in item.children.items"&gt;
                      &lt;li&gt;SUB NAME: {{ item.name }}&lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/li&gt;
          &lt;/ul&gt;
      &lt;/nav&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p></p>
  
  <p>JS:</p>
  
  <pre><code>var myApp = angular.module('myApp', []);
  
  myApp.controller('myCtrl', function ($scope) {
    $scope.mytree = {
    "items": [{
      "name": "one",
      "children": {
        "items": [
          {
            "name": "one sub a",
            "children": {
              "items": [{
                "name": "one sub level two a"
              },
              {
                "name": "one sub level two b"
              }]
            }
          },
          {
            "name": "one sub b"
          }
        ]
      }
    },
    {
      "name": "two"
    },
    {
      "name": "three"
    },
    {
      "name": "four",
      "children": {
        "items": [{
          "name": "four sub a"
        },
        {
          "name": "four sub b"
        }]
      }
    },
    {
      "name": "five"
    }]
  };
  });
  </code></pre>