Linking to any page through Dropdown menu in Angular JS - drop-down-menu

Question

I have a dropdown menu created within Angular JS but I am having problem linking the menus internally to the pages.
The main problem is to know which parent menu we are in and then reaching out to the respective sub menu.
My HTML is:
<div id="menu">
<ul>
<li ng-class="{selected: $index==currPage}" ng-repeat="page in data.pages">
{{page.menuTitle}}
<ul>
<li ng-class="{$index==currMenu}" ng-repeat="smenu in data.subMenu[$index].list">
{{data.subMenu[$parent.$index].list[$index].heading}}
</li>
</ul>
</li>
</ul>
</div>
And my JS Code is:
function getPresentationData(){
var data = {};
data.title = 'My Site Title';
data.pages = [];
data.subMenu = [];
data.subMenu[0] = {};
data.subMenu[0].list = [];
data.subMenu[0].list[0] = {heading:'Profile', number: '1'};
data.subMenu[0].list[1] = {heading:'Background', number: '2'};
data.subMenu[0].list[2] = {heading:'What is KAM', number: '3'};
data.pages[0] = {};
data.pages[0].menuTitle = 'Introduction';
data.pages[0].slides = [];
data.pages[0].slides[0] = {heading:'profile', speaker: 'Me', title:'Expert ', img:'content/3.jpg', video:'content/videos/3.m4v'};
data.pages[0].slides[1] = {heading:'profile', speaker: 'Me', title:'Expert ', img:'content/4.jpg', video:'content/videos/3.m4v'};
...
data.subMenu[1] = {};
data.subMenu[1].list = [];
data.subMenu[1].list[0] = {heading:'2 Profile', number: '1'};
data.subMenu[1].list[1] = {heading:'2 Background', number: '2'};
data.subMenu[1].list[2] = {heading:'2 What is KAM', number: '3'};
data.pages[1] = {};
data.pages[1].menuTitle = 'Cases';
data.pages[1].slides = [];
data.pages[1].slides[0] = {heading:'profile', speaker: 'Me', title:'Expert ', img:'content/3.jpg', video:'content/videos/3.m4v'};
data.pages[1].slides[1] = {heading:'profile', speaker: 'Me', title:'Expert ', img:'content/4.jpg', video:'content/videos/3.m4v'};
...
data.pages[2] = {};
data.pages[2].menuTitle = 'Valdsff ns';
data.pages[2].slides = [];
data.pages[2].slides[0] = {heading:'asdf asdf asdfles', speaker: 'asdf asdfas', title:'Expert ', img:'casdf.jpg', video:'content/df3.m4v'};
return data;
}
function presentationController($scope, $location){
$scope.data = getPresentationData();
$scope.currPage = 0;
$scope.currSlide = 0;
$scope.currMenu = 0;
$scope.goToPage = function(pageIndex){
$('.slide-container').hide();
$scope.currSlide = 0;
$scope.currPage = pageIndex;
$('.slide-container').fadeIn(500);
};
}

Answer 1

Solved it.
Changed Menu as following:-
<div id="menu">
<ul>
<li ng-class="{selected: $index==currPage}" ng-repeat="page in data.pages">
{{page.menuTitle}}
<ul>
<li ng-class="{$index==currMenu}" ng-repeat="smenu in data.subMenu[$index].list">
{{data.subMenu[$parent.$index].list[$index].heading}}
</li>
</ul>
</li>
</ul>
</div>
and added this function:-
$scope.goToSpecificPage = function(pageIndex, slideIndex){
$('.slide-container').hide();
$scope.currSlide = slideIndex;
$scope.currPage = pageIndex;
$('.slide-container').fadeIn(500);
};