Adding a Sub Menu in my HTML with AngularJS

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 <ul> <li> ... </li> </ul> under my existing list items of menus. The question is; how to do it.

This is my Code with AngularJS calls:-

<div id="menu">
    <ul>
        <li ng-class="{selected: $index==currPage}" ng-repeat="page in data.pages">
            <a href="" ng-click="goToPage($index)">{{page.menuTitle}}</a> {{page.subMenu}}
        </li>
    </ul>
</div>

This generates the following code in HTML with div of id=menu:-

    <ul>
       <li class="ng-scope ng-binding selected" ng-class="{selected: $index==currPage}" ng-repeat="page in data.pages">
            <a class="ng-binding" href="" ng-click="goToPage($index)">Introduction</a> 
       </li>
       <li class="ng-scope ng-binding" ng-class="{selected: $index==currPage}" ng-repeat="page in data.pages">
            <a class="ng-binding" href="" ng-click="goToPage($index)">Cases</a> 
        </li>
        ...
        ...
    </ul>

AngularJS JS code -----------------

The Angular JS Code to compliment above HTML is:-

data.title = 'Amanpour consult Petrochemicals & 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]  

Now to add the submenu, I thought may be I could following to AngularJS code:-

data.pages[0].subMenu = '<ul> <li> <a href="#">First Link</a> </li> <li> <a href="#">Second Link</a> </li> </ul>';

and then call it in HTML like this (notice the {{page.subMenu}}):-

<li ng-class="{selected: $index==currPage}" ng-repeat="page in data.pages">
    <a href="" ng-click="goToPage($index)">{{page.menuTitle}}</a> **{{page.subMenu}}**
</li>

But it doesn't work, all it gives me is the following, which just prints the HTML literally on the page:-

<ul> <li> <a href="#">First Link</a> </li> <li> <a href="#">Second Link</a> </li> </ul>

Any assistance, please.

Thanks.

Ok, an update.

I'd have to create a menu within JS like this:-

   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';

and would have to call it in my HTML like this:-

 <div id="menu">
            <ul>
                <li ng-class="{selected: $index==currPage}" ng-repeat="page in data.pages">
                    <a href="" ng-click="goToPage($index)">{{page.menuTitle}}</a>
                    <ul>
                        <li ng-repeat="smenu in data.subMenu">
                            <a href="" ng-click="goToPage($index)">{{smenu.list[smenu]}}</a>
                        </li>
                    </ul>
                </li>
            </ul>
        </div>

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.

Any help would be highly appreciated.

Best.