Help with nav view



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

I created like below

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

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

<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">
 <h1 class="title"><b>App</b></h1>
<ion-nav-buttons side="right">
<ion-footer-bar align-title="left" class="bar-dark"> 
<h1 class="title"><b>&copy;</b></h1>
<ion-nav-view name="{{navpage}}"></ion-nav-view>

app.controller('HomeCtrl',['$rootScope',function( $rootScope) {

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

Is there a way I can populate my navpage dynamically?