title: Generating Dynamic bootstrap Menus with Angular
body: <p>I am trying to create bootstrap navbar menus dynamically using Angular.</p>
  
  <p>The source data for the menu comes from json which looks like below:</p>
  
  <pre><code>{   
  "Menu": [
      {
          "title": "Individual",
          "url": "#",
          "subMenu": [{
              "title": "Individual Address",
              "url": "http://www.w3schools.com/html/default.asp",
              "subMenu": []
            }]
      },
      {
          "title": "Organisation",
          "url": "#",
          "subMenu": [{
              "title": "Organisation Address",
              "url": "http://www.w3schools.com/html/default.asp",
              "subMenu": []
          },{
              "title": "Organisation Contact",
              "url": "http://www.w3schools.com/html/default.asp",
              "subMenu": []
          },{
              "title": "Organisation Sector",
              "url": "http://www.w3schools.com/html/default.asp",
              "subMenu": []
          }]
      },
  
      {
          "title": "Return",
          "url": "http://www.w3schools.com/js/default.asp",
          "subMenu": []
      }
  ]
  }
  </code></pre>
  
  <p>As you can see that there are nested items so we need to have dropdown menus in our navigation bar.</p>
  
  <p>I have created a directive to generate the dynamic menus (I have used the directive found <a href="http://jsfiddle.net/KNM4q/113/" rel="nofollow">here</a> as a starting point). The modified version of the directive looks like:</p>
  
  <pre><code>app.directive('tree', function ($compile) {
      return {
          restrict: 'E',
          terminal: true,
          scope: { val: '=', parentData:'=' },
          link: function (scope, element, attrs) {
  
            if (scope.val.subMenu !== undefined &amp;&amp; scope.val.subMenu.length &gt; 0) {
                  template =      '&lt;li class="dropdown"&gt; '+
                                '  &lt;a class="dropdown-toggle" data-toggle="dropdown" href="{{val.url}}"&gt;{{val.title}} '+
                                '  &lt;span class="caret"&gt;&lt;/span&gt;&lt;/a&gt; '+
                                '  &lt;ul class="dropdown-menu"&gt; '+
                                '   &lt;div ng-repeat="item in val.subMenu"&gt; '+
                                '     &lt;tree val="item" parent-data="val.subMenu"&gt;&lt;/tree&gt; '+
                                '   &lt;/div&gt;'
                                '  &lt;/ul&gt; '+
                                '&lt;/li&gt; ';
              }
              else
              {
                template = '&lt;li&gt;&lt;a href="{{val.url}}"&gt;{{val.title}}&lt;/a&gt;&lt;/i&gt; ';
              }
              var newElement = angular.element(template);
              $compile(newElement)(scope);
              element.replaceWith(newElement);            
          }
      }
  </code></pre>
  
  <p>Below is the html code where I am using this directive</p>
  
  <pre><code>&lt;div class="container"&gt;
    &lt;div class="row"&gt;
      &lt;nav class="navbar navbar-default"&gt;
        &lt;div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"&gt;
          &lt;ul class="nav navbar-nav"&gt;
            &lt;div ng-repeat="menu in menuFamily.Menu"&gt;
              &lt;tree val="menu"&gt;&lt;/tree&gt;
            &lt;/div&gt;
          &lt;/ul&gt;
        &lt;/div&gt;
      &lt;/nav&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>The menus are generated but because I am using <code>div</code> tags for <code>ng-repeat</code>, the menus are not rendered properly. However, if I remove the <code>div</code> tags from the generated html everything works fine. So my question how can I achieve what I want without using <code>div</code> tags.</p>
  
  <p>You can also find my sample code at <a href="http://plnkr.co/edit/hp89k4js18PJ8ckwuYCk" rel="nofollow">plunker</a> </p>
  
  <p>P.S. I am new to Angular world and I have a very basic knowledge of directives.</p>