title: AngularJS Menu and Submenu by JSON with Twitter Bootstrap
body: <p>I am new to AngularJS. I am working on a personal project using Twitter Bootstrap so I can learn AngularJS. I have my data in a JSON file. The project-title and main menu links are being populated just fine. There is a submenu under one of those links and that's what I cannot get to populate.
  What I would like to do is to load the submenu using an ng-repeat. So basically I'm dealing with an ng-repeat inside of an ng-repeat.  Any and all tips welcomed.
  Thanks!</p>
  
  <p>My controller looks like this:</p>
  
  <pre><code>'use strict';
  
  var app = angular.module('myApp', []);
  
  app.controller('NavCtrl', function($scope, $http) {
  
  $http.get('app/content/nav.json').success(function(data) {
  
      $scope.nav   = data;
      $scope.links = data.links;
  
      });
  
  });
  </code></pre>
  
  <p>My JSON:</p>
  
  <pre><code>{
  "projectTitle" : "My Website Title",
  "links" : [
      {"name" : "Home", "url" : "/", "className" : ""},
      {"name" : "About", "url" : "/about", "className" : ""},
      {"name" : "Contact", "url" : "/contact", "className" : ""},
      {"name" : "Categories", "url" : "/categories", "className" : "dropdown", "sub" :
          [
              {"name" : "Tech Stuff", "url" : "/techStuff"},
              {"name" : "AngularJS", "url" : "/angularJS"},
              {"name" : "HTML5", "url" : "/html5"},
              {"name" : "Javascript", "url" : "/javascript"},
              {"name" : "jQuery", "url" : "/jquery"}
          ]
      }
  ]
  }
  </code></pre>
  
  <p>My HTML:</p>
  
  <pre><code>&lt;div ng-controller="NavCtrl" class="navbar navbar-inverse navbar-fixed-top"&gt;
      &lt;div class="navbar-inner"&gt;
          &lt;div class="container"&gt;
              &lt;button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"&gt;
                  &lt;span class="icon-bar"&gt;&lt;/span&gt;
                  &lt;span class="icon-bar"&gt;&lt;/span&gt;
                  &lt;span class="icon-bar"&gt;&lt;/span&gt;
              &lt;/button&gt;
              &lt;a class="brand" href="#"&gt;{{nav.projectTitle}}&lt;/a&gt;
              &lt;div class="nav-collapse collapse"&gt;
                  &lt;ul class="nav"&gt;
                      &lt;li ng-repeat="link in links" class="{{link.className}}"&gt;
                          &lt;a href="{{link.url}}" class="{{link.sub &amp;&amp; 'dropdown-toggle' || ''}}" data-toggle="{{link.sub &amp;&amp; 'dropdown' || ''}}"&gt;{{link.name}} 
                              &lt;b ng-show="link.sub" class="caret"&gt;&lt;/b&gt;
                          &lt;/a&gt;
                          &lt;ul class="dropdown-menu" ng-show="link.sub"&gt;
                              &lt;li ng-repeat="sub in links"&gt;
                                  &lt;a href=""&gt;{{sub.name}}&lt;/a&gt;
                              &lt;/li&gt;
                          &lt;/ul&gt;
                      &lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>