I solved your problem there : http://codepen.io/yrezgui/pen/mycxB
Basically, Ionic is using Angular-UI-Router which has a huge API. In your case, you need to check this link to understand : https://github.com/angular-ui/ui-router/wiki/Multiple-Named-Views#view-names---relative-vs-absolute-names
To be short, home1 and home2 states are children of home state, so they can't have access of menuContent view, because it's related to eventmenu state.
So you need to write :
.state('eventmenu.home.home2', {
url: "/home2",
views: {
'menuContent@eventmenu' :{
templateUrl: "home2.html"
}
}
})
Instead of :
.state('eventmenu.home.home2', {
url: "/home2",
views: {
'menuContent' :{
templateUrl: "home2.html"
}
}
})
And home1 wasn't working even after this modification because its url was :
url: "/home/home1",
Instead of :
url: "/home1",
By writing eventmenu.home.home1, you make home1 a child of home, so its url needs to be relative, not absolute.
Hope you understand it and have fun with Ionic ;)