title: Generating N level tree menu using ng-repeat in angularjs
body: <p>I have a json like this:</p>
  
  <pre><code>  $scope.Menu = [
      { "MenuID": "1", "MenuTitle": "Scan", "MenuUrl": "/Test/Test", "MenuParentID": "0" },
      { "MenuID": "2", "MenuTitle": "Security", "MenuUrl": "/Test/Test", "MenuParentID": "0" },
      { "MenuID": "3", "MenuTitle": "PDF", "MenuUrl": "/Test/Test", "MenuParentID": "1" },
      { "MenuID": "4", "MenuTitle": "Doc", "MenuUrl": "/Test/Test", "MenuParentID": "1" },
      { "MenuID": "5", "MenuTitle": "Creat User", "MenuUrl": "/Test/Test", "MenuParentID": "2" },
      { "MenuID": "5", "MenuTitle": "PDF SUB", "MenuUrl": "/Test/Test", "MenuParentID": "3" }
  ];
  </code></pre>
  
  <p>I want to generate a N level tree based on this json. I tried following:</p>
  
  <pre><code>&lt;section class="sidebar" ng-repeat=" ParentMenu in Menu"&gt;
  
  
          &lt;ul class="sidebar-menu" ng-if="ParentMenu.MenuParentID == 0"&gt;
  
  
              &lt;li class="active treeview"&gt;
                  &lt;a href="#"&gt;
                      &lt;i class="fa fa-dashboard"&gt;&lt;/i&gt; &lt;span&gt;{{ParentMenu.MenuTitle}}&lt;/span&gt; &lt;i class="fa fa-angle-left pull-right"&gt;&lt;/i&gt;
                  &lt;/a&gt;
                  &lt;ul ng-repeat="ChildMenu in Menu" class="treeview-menu"&gt;
                      &lt;li ng-if="ChildMenu.MenuParentID==ParentMenu.MenuID"&gt;
                          &lt;a href="index.html"&gt;&lt;i class="fa fa-circle-o"&gt;&lt;/i&gt; {{ChildMenu.MenuTitle}}&lt;/a&gt;
                      &lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/li&gt;
  
          &lt;/ul&gt;
      &lt;/section&gt;
  </code></pre>
  
  <p>Its working for 2 level. I'm new to angular. How can I achieve this?</p>