Recursion with ng-repeat in Angular
<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>