Help with nav view

1

Hi,

I am trying to have dynamic nav in home page (home has page 1 and page 2 as sub views)

I created like below

$stateProvider
			.state('home', {
				url: "/home",
				abstract: true,
				templateUrl: "partials/home.html",
                            controller: 'HomeCtrl'
			})
			.state('home.index1', {
				url: '/index1',
				views: {
				'home-index1':{
				templateUrl: 'partials/home-index1.html',
				controller: 'HomeIndexCtrl1'
				}
			  }
			}).state('home.index2', {
				url: '/index2',
				views: {
				'home-index2':{
				templateUrl: 'partials/home-index2.html',
				controller: 'HomeIndexCtrl2'
				}
			  }
			});

I kept the header tags in home.html as its the template

<code>
<ion-view data-ng-show="appReady">
<ion-nav-bar class="bar-dark">
<ion-nav-buttons side="left">
<ion-nav-back-button class="button-clear button-icon icon ion-arrow-left-c">
 </ion-nav-back-button>
  </ion-nav-buttons>
 <h1 class="title"><b>App</b></h1>
<ion-nav-buttons side="right">
     
</ion-nav-buttons>
</ion-nav-bar>
<ion-footer-bar align-title="left" class="bar-dark"> 
<h1 class="title"><b>&copy;</b></h1>
</ion-footer-bar>	
</ion-view>
<ion-nav-view name="{{navpage}}"></ion-nav-view>
</code>`


app.controller('HomeCtrl',['$rootScope',function( $rootScope) {
	$rootScope.navpage="home-index1";
	console.log("HomeController");
}]);

Navigation seems to work fine, but ion-nav-view isnt working as expected?

Is there a way I can populate my navpage dynamically?

Regards
Kay