title: How to generate multilevel menu items programmatically in angularjs?
body: <p>I am creating side menu bar which is generated programatically from json.</p>
  
  <p>I have coded two level items but I hard coded two level ulLi items in html.
  But I don't want to hard coded the level of menu items.</p>
  
  <p>I have tried the following code.</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;ul class="sidebar-menu sidebar-nav" ng-repeat="m in modulos"&gt;
      &lt;li class="treeview" ng-repeat="(itemIndex, item) in modulos"&gt;
          &lt;a ng-click="showSubmenu(itemIndex)"&gt;
              &lt;i class="fa fa-table"&gt;&lt;/i&gt; &lt;span&gt;{{item.module}}&lt;/span&gt;
          &lt;/a&gt;
  
          &lt;ul class="sub-nav" ng-show="isShowing(itemIndex)"&gt;
              &lt;li ng-repeat="sub_element in m.submodule"&gt;
                  &lt;a href="{{sub_element.url}}"&gt;{{sub_element.res}}&lt;/a&gt;
              &lt;/li&gt;
          &lt;/ul&gt;
      &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p><strong>js</strong></p>
  
  <pre><code>$scope.modulos = [{
      "module":"Admin System ",
      "adm_modulo_id":1,
      "submodule": [{
          "res":"Angular","url":"#",
          "submodule":[{
              "res":"Angular",
              "url":"#/admin/1"
          },{
              "res":"Linux",
              "url":"#/admin/2"
          },{
              "res":"Server",
              "url":"#/admin/3"
          }]
      },{
          "res":"Linux",
          "url":"#/admin/2"
      },{ 
          "res":"Server",
          "url":"#/admin/3"
      }]
  
  }];
  </code></pre>
  
  <p>Here I have coded two levels of items. But it is a variable. Some items will have 5 levels and another one will have 2 levels.</p>
  
  <p>So based in submodule, I need to write a logic.</p>