In my app I have the root state named "app":
.state('app', { abstract: true, views: { 'app': { templateUrl: 'prebuilt/views/pages/index.html', controller: 'MainController' } } }) and its child "app.pages"
.state('app.pages', { abstract: true, views: { 'custom@app': { templateUrl: 'prebuilt/views/templates/custom-styles.html' }, 'header@app': { templateUrl: 'prebuilt/views/layout/header.html' }, 'topBar@app': { templateUrl: 'prebuilt/views/layout/topbar.html' }, 'sideBar@app': { templateUrl: 'prebuilt/views/layout/sidebar.html' }, 'infoBar@app': { templateUrl: 'prebuilt/views/layout/infobar.html' }, 'contentSide@app': { templateUrl: 'prebuilt/views/layout/contentside.html' } } }) And grand child "app.pages.dashboard"
.state('app.pages.dashboard', { url: '/', views: { '[email protected]': { templateUrl: 'prebuilt/views/index.html', controller: 'DashboardController' } }, resolve: { loadCalendar: ['$ocLazyLoad', function ($ocLazyLoad) { return $ocLazyLoad.load([ 'prebuilt/bower_components/fullcalendar/fullcalendar.js', ]); }] } }) Now app loads an html view, inside that view are nested views which are/should be loaded when i navigate to "app.pages".
Now up to this point everything works just fine, however now I want to load a page in the content body of "app.pages", I've tried several times but the view never gets loaded:
This is a simplified version of my app.php:
<html> <head></head> <body> <div ui-view="app"></div> </body> </html> This is a simplified version of my index.html:
<div ui-view="header"></div> <nav ui-view="topBar"></nav> <div id="wrapper"> <div> <di ui-view="sideBar"> </div> <div> <div> <div> <div class="col-md-9" ui-view="content"> </div> <div class="col-md-3" ui-view="contentSide"> </div> </div> <!--wrap --> </div> <footer> <div class="clearfix"> <ul class="list-unstyled list-inline pull-left"> <li>© 2015</li> </ul> <button><i class="fa fa-angle-up"></i></button> </div> </footer> </div> </div> </div> <div ui-view="infoBar"></div> 
