title: Angular JS and Bootstrap - Setting multiple sub menus within submenus
body: <p>Let me start by saying I am very much in the beginning stages of learning to use Angular. I've done multiple searches, and seen multiple examples of setting up a menu with sub menus, but have found none for me to look at that have sub menus within sub menus.</p>
  
  <p>I'm also, as you may have noticed, not very good at writing a question either. Let me continue with the code and a fiddle for an example. Hopefully someone can explain why this isn't working and where my logic has gone awry.</p>
  
  <p><strong>JavaScript</strong></p>
  
  <pre><code>var App = angular.module("rcfdto",[]);
  App.controller("menuController", ['$scope', function($scope){
  
  $scope.locs = [
  
                              {
  
                                              name: "Menu Option #1",
  
                                              link: "#OP1",
  
                                              id: "Option1",
  
                                              submenu: null
  
                              },
  
                              {
  
                                              name: "Menu Option #2",
  
                                              link: "#OP2",
  
                                              id: "Option2",
  
                                              submenu: [
  
                                                              {
  
                                                                              name: "Submenu Option 1",
  
                                                                              link: "#SOP1",
  
                                                                              id: "SubOption1",
  
                                                                              subsubmenu: null
  
                                                              },
  
                                                              {
  
                                                                              name: "Submenu Option 2",
  
                                                                              link: "#SOP2",
  
                                                                              id: "SubOption2",
  
                                                                              subsubmenu: null
  
                                                              },
  
                                                              {
  
                                                                              name: "Submenu Option 3",
  
                                                                              link: "#SOP3",
  
                                                                              id: "SubmenuOption3",
  
                                                                              subsubmenu: [
  
                                                                                              {
  
                                                                                                              name: "SubSubMenu Option 1",
  
                                                                                                              link: "#SSOP1",
  
                                                                                                              id: "SubSubmenuOption1"
  
                                                                                              },
  
                                                                                              {
  
                                                                                                              name: "SubSubMenu Option 2",
  
                                                                                                              link: "#SSOP2",
  
                                                                                                              id: "SubSubmenuOption2"
  
                                                                                              }
  
                                                                              ]
  
                                                              }
  
                                              ]
  
                              },
  
                              {
  
                                              name: "Menu Option #3",
  
                                              link: "#OP3",
  
                                              id: "Option3",
  
                                              submenu: [
  
                                                              {
  
                                                                              name: "Submenu Option 4",
  
                                                                              link: "#SOP4",
  
                                                                              id: "SubmenuOption4",
  
                                                                              subsubmenu: [
  
                                                                                              {
  
                                                                                                              name: "SubSubMenu Option 3",
  
                                                                                                              link: "#SSOP3",
  
                                                                                                              id: "SubSubmenuOption3"
  
                                                                                              }
  
                                                                              ]
  
                                                              },
  
                                                              {
  
                                                                              name: "Submenu Option 5",
  
                                                                              link: "#SOP5",
  
                                                                              id: "SubmenuOption5",
  
                                                                              submenu: null
  
                                                              }
  
                                              ]
  
                              }
  
  ];
  </code></pre>
  
  <p>}]);</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;body ng-app="rcfdto"&gt;
  
  &lt;div class="menu container" ng-controller="menuController"&gt;
  
  &lt;ul class="dropdown-menu" role="menu" aria-labelledby="dLabel"&gt;
  
    &lt;li ng-repeat="loc in locs" ng-class="{'dropdown-submenu' : loc.submenu &amp;&amp; loc.submenu.length}"&gt;
  
      &lt;a href="{{loc.link}}" id="{{loc.id}}"&gt;{{loc.name}}&lt;/a&gt;
  
        &lt;ul ng-if="loc.submenu &amp;&amp; loc.submenu.length" class="dropdown-menu"&gt;
  
          &lt;li ng-repeat="subloc in loc.submenu"&gt;
  
            &lt;a href="{{subloc.link}}" id="{{subloc.id}}"&gt;{{subloc.name}}&lt;/a&gt;
  
              &lt;ul ng-if="subloc.subsubmenu &amp;&amp; subloc.subsubmenu.length" class="dropdown-menu"&gt;
  
                &lt;li ng-repeat="subsubloc in subloc.subsubmenu"&gt;
  
                  &lt;a href="{{subsubloc.link}}" id="{{subsubloc.id}}"&gt;{{subsubloc.name}}&lt;/a&gt;
  
                &lt;/li&gt;
  
              &lt;/ul&gt;
  
          &lt;/li&gt;
  
        &lt;/ul&gt;
  
    &lt;/li&gt;
  
  &lt;/ul&gt;
  </code></pre>
  
  <p></p>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>.menu {
  
              position:relative;
  
  }
  
  .menu &gt; .dropdown-menu {
  
              position:static;
  
              display:block;
  
  }
  </code></pre>
  
  <p><a href="http://jsfiddle.net/tdvt6hhw/" rel="nofollow">My Fiddle</a></p>