I see many examples out there combining the tab navigation & side menu navigation together but they are not nested, or example with nested views on side menu navigation only, in my case, I'd like to implement a tab navigation inside one of the side menu navigation only, however, I've been trying for days but still cannot figure it out, here's my pen: http://codepen.io/auching/pen/vyzJg
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('eventmenu', {
url: "/event",
abstract: true,
templateUrl: "event-menu.html"
})
.state('eventmenu.home', {
url: "/home",
views: {
'menuContent' :{
templateUrl: "home.html"
}
}
})
.state('eventmenu.checkin', {
url: "/check-in",
views: {
'menuContent' :{
templateUrl: "check-in.html",
controller: "CheckinCtrl"
}
}
})
.state('eventmenu.checkin.home1', {
url: "/home1",
views: {
'home1-tab' :{
templateUrl: "home1.html",
}
}
})
.state('eventmenu.checkin.home2', {
url: "/home2",
views: {
'home2-tab' :{
templateUrl: "home2.html",
}
}
})
.state('eventmenu.attendees', {
url: "/attendees",
views: {
'menuContent' :{
templateUrl: "attendees.html",
controller: "AttendeesCtrl"
}
}
})
$urlRouterProvider.otherwise("/event/home");
})
any help would be much appreciated! thx.