State transition between child views/states in ionic

i am using a ionic tabs project. IONIC uses angular JS’s ui-router for routing.

In a tab i want to have multiple state and i want to route between states.

for routing between states i am using $state.g();

here is my code

app.js

.config(function($stateProvider,$urlRouterProvider){
$stateProvider
.state(‘footer’,{
url:’/footer’,
abstract:true,
templateUrl:‘templates/footer.html’
})

.state(‘footer.home’,{
url:’/home’,
abstract:true,
views:{
‘footer-home’:{
templateUrl:’/templates/hometemplate.html’,
controller:‘HomeCtrl’
}
}
})
.state(‘footer.home.mainhome’,{
url:’/mainhome’,
parent:‘footer.home’,
views:{
‘footer-home-landing’:{
templateUrl:’/templates/myHome.html’,
controller:‘HomeCtrl’
}
}
})
.state(‘footer.home.about’,{
url:’/about’,
parent:‘footer.home’,
views:{
‘footer-home-about’:{
templateUrl:‘templates/test.html’,//template:‘

asasdfa

’,
controller:‘AboutCtrl’
}
}
})
hometemplate.html: i have two ion-nav-view’s inside on ion-nav-view now in myHome.html i have an image. on click of image i am using $state.go('footer.home.about');

in my test.html, i have one image on click of it want to take back to my myHome.html using $state.go(‘footer.home.myhome’).

here comes the problem. while going back to ‘footer.home.myhome’ myhome contents are not getting displayed. still the test.html contents are displaying but the click events on it are not triggering.

strange behavior. not understanding where i did wrong. its almost like angular js, no need to worry about ionic. can some body help me?