title: Recursion with ng-repeat in Angular
body: <p>I have the following data structure for items in my sidemenu, in an Angular app based on a paid-for web site theme. The data structure is my own, and the menu is derived from the original menu view with all items in the <code>ul</code> hard coded.</p>
  
  <p>In <code>SidebarController.js</code>:</p>
  
  <pre><code>$scope.menuItems = [
      {
          "isNavItem": true,
          "href": "#/dashboard.html",
          "text": "Dashboard"
      },
      {
          "isNavItem": true,
          "href": "javascript:;",
          "text": "AngularJS Features",
          "subItems": [
              {
                  "href": "#/ui_bootstrap.html",
                  "text": " UI Bootstrap"
              },
              ...
          ]
      },
      {
          "isNavItem": true,
          "href": "javascript:;",
          "text": "jQuery Plugins",
          "subItems": [
              {
                  "href": "#/form-tools",
                  "text": " Form Tools"
              },
              {
                  "isNavItem": true,
                  "href": "javascript:;",
                  "text": " Datatables",
                  "subItems": [
                      {
                          "href": "#/datatables/managed.html",
                          "text": " Managed Datatables"
                      },
                      ...
                  ]
              }
          ]
      }
  ];
  </code></pre>
  
  <p>Then I have the following partial view bound to that model as follows:</p>
  
  <pre><code>&lt;ul class="page-sidebar-menu" data-keep-expanded="false" data-auto-scroll="true" data-slide-speed="200" ng-class="{'page-sidebar-menu-closed': settings.layout.pageSidebarClosed}"&gt;
      &lt;li ng-repeat="item in menuItems" ng-class="{'start': item.isStart, 'nav-item': item.isNavItem}"&gt;
          &lt;a href="{{item.href}}" ng-class="{'nav-link nav-toggle': item.subItems &amp;&amp; item.subItems.length &gt; 0}"&gt;
              &lt;span class="title"&gt;{{item.text}}&lt;/span&gt;
          &lt;/a&gt;
          &lt;ul ng-if="item.subItems &amp;&amp; item.subItems.length &gt; 0" class="sub-menu"&gt;
              &lt;li ng-repeat="item in item.subItems" ng-class="{'start': item.isStart, 'nav-item': item.isNavItem}"&gt;
                  &lt;a href="{{item.href}}" ng-class="{'nav-link nav-toggle': item.subItems &amp;&amp; item.subItems.length &gt; 0}"&gt;
                      &lt;span class="title"&gt;{{item.text}}&lt;/span&gt;
                  &lt;/a&gt;
              &lt;/li&gt;
          &lt;/ul&gt;
      &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p><strong>NOTE</strong> There may be <code>$scope</code> properties in the view bindings you don't see in the model, or vice versa, but that is because I have edited them for brevity.
  Now because the second level <code>li</code> doesn't also contain a conditional <code>ul</code> for its own <code>subItems</code>, the sub-items under the <code>Datatable</code> menu item don't get rendered. </p>
  
  <p>How can I create a view or template, or both, that will bind recursively to the model, so that all sub-items of all sub-items are rendered? This will normally only be up to four levels.</p>