title: Adding a sub-menu in my HTML with AngularJS?
body: <p>I have an application created with AngularJS which has a strip of menus. What I am trying to do is to create submenus with each menu. The submenus can be created by adding additional <code>&lt;ul&gt; &lt;li&gt; ... &lt;/li&gt; &lt;/ul&gt;</code> under my existing list items of menus. How can I do it?</p>
  
  <p>This is my code with AngularJS calls:</p>
  
  <pre><code>&lt;div id="menu"&gt;
      &lt;ul&gt;
          &lt;li ng-class="{selected: $index==currPage}" ng-repeat="page in data.pages"&gt;
              &lt;a href="" ng-click="goToPage($index)"&gt;{{page.menuTitle}}&lt;/a&gt; {{page.subMenu}}
          &lt;/li&gt;
      &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>This generates the following code in HTML with div of <code>id=menu</code>:</p>
  
  <pre><code>    &lt;ul&gt;
         &lt;li class="ng-scope ng-binding selected" ng-class="{selected: $index==currPage}" ng-repeat="page in data.pages"&gt;
              &lt;a class="ng-binding" href="" ng-click="goToPage($index)"&gt;Introduction&lt;/a&gt; 
         &lt;/li&gt;
         &lt;li class="ng-scope ng-binding" ng-class="{selected: $index==currPage}" ng-repeat="page in data.pages"&gt;
              &lt;a class="ng-binding" href="" ng-click="goToPage($index)"&gt;Cases&lt;/a&gt; 
          &lt;/li&gt;
          ...
          ...
      &lt;/ul&gt;
  </code></pre>
  
  <h2>AngularJS JS code</h2>
  
  <p>The Angular JS Code to compliment above HTML is:</p>
  
  <pre><code>data.title = 'Amanpour consult Petrochemicals &amp; Energy';
  data.pages = [];
  
  data.pages[0] = {};
  data.pages[0].menuTitle = 'Introduction';
  
  data.pages[0].slides = [];
  data.pages[0].slides[0] = {heading:'A Heading: profile', speaker: 'The man himself', title:'Expert in awesomeness', img:'showing-awesomeness.jpg', video:'witnessing-awesomeness.m4v'};
  
   ....
   data.pages[0].slides[1] 
    ....
   data.pages[0].slides[2]
    ....
   data.pages[0].slides[3]  
  </code></pre>
  
  <p>Now to add the submenu, I thought may be I could following to AngularJS code:</p>
  
  <pre><code>data.pages[0].subMenu = '&lt;ul&gt; &lt;li&gt; &lt;a href="#"&gt;First Link&lt;/a&gt; &lt;/li&gt; &lt;li&gt; &lt;a href="#"&gt;Second Link&lt;/a&gt; &lt;/li&gt; &lt;/ul&gt;';
  </code></pre>
  
  <p>and then call it in HTML like this (notice the <code>{{page.subMenu}}</code>):</p>
  
  <pre><code>&lt;li ng-class="{selected: $index==currPage}" ng-repeat="page in data.pages"&gt;
      &lt;a href="" ng-click="goToPage($index)"&gt;{{page.menuTitle}}&lt;/a&gt; **{{page.subMenu}}**
  &lt;/li&gt;
  </code></pre>
  
  <p>But it doesn't work, all it gives me is the following, which just prints the HTML literally on the page:</p>
  
  <pre><code>&amp;lt;ul&amp;gt; &amp;lt;li&amp;gt; &amp;lt;a href="#"&amp;gt;First Link&amp;lt;/a&amp;gt; &amp;lt;/li&amp;gt; &amp;lt;li&amp;gt; &amp;lt;a href="#"&amp;gt;Second Link&amp;lt;/a&amp;gt; &amp;lt;/li&amp;gt; &amp;lt;/ul&amp;gt;
  </code></pre>
  
  <h2>Update</h2>
  
  <p>I'd have to create a menu within JS like this:</p>
  
  <pre><code>   data.subMenu = [];
  
  
  
      data.subMenu[0] = {};    
      data.subMenu[0].list = [];
      data.subMenu[0].list[0] = 'Menu 1';
      data.subMenu[0].list[1] = 'Menu 2';
      data.subMenu[0].list[2] = 'Menu 3';
  </code></pre>
  
  <p>and would have to call it in my HTML like this:</p>
  
  <pre><code> &lt;div id="menu"&gt;
              &lt;ul&gt;
                  &lt;li ng-class="{selected: $index==currPage}" ng-repeat="page in data.pages"&gt;
                      &lt;a href="" ng-click="goToPage($index)"&gt;{{page.menuTitle}}&lt;/a&gt;
                      &lt;ul&gt;
                          &lt;li ng-repeat="smenu in data.subMenu"&gt;
                              &lt;a href="" ng-click="goToPage($index)"&gt;{{smenu.list[smenu]}}&lt;/a&gt;
                          &lt;/li&gt;
                      &lt;/ul&gt;
                  &lt;/li&gt;
              &lt;/ul&gt;
          &lt;/div&gt;
  </code></pre>
  
  <p>The only problem is that I'd have to do the looping right; I am not able to make the index within the loop correctly.</p>