I created working example here. This is following your needs, because there are only two levels of nesting.

• books is a parent for both children
• books.home fills the middle erea - and is NOT parent of books.detail
• books.detail replaces the list view - but that means that its $scope (books.home) is lost

State definition:

.state('books', { url: '/books', views: { '@' : { templateUrl: 'layout.html', }, 'left@books' : { templateUrl: 'tpl.left.html',}, 'right@books' : { templateUrl: 'tpl.right.html',}, }, }) .state('books.home', { url: '/home', templateUrl: 'list.html', }) .state('books.detail', { url: '/:bookId', templateUrl: 'detail.html', controller: 'DetailCtrl' }) 

Check it here

But there is also a different approach, which I like more. The list view, is parent of its child, and therefore it could keep its $scope, while navigating among details. Similar stuff discussed here

I created working example here. This is following your needs, because there are only two levels of nesting.

• books is a parent for both children
• books.home fills the middle erea - and is NOT parent of books.detail
• books.detail replaces the list view - but that means that its $scope (books.home) is lost

State definition:

.state('books', { url: '/books', views: { '@' : { templateUrl: 'layout.html', }, 'left@books' : { templateUrl: 'tpl.left.html',}, 'right@books' : { templateUrl: 'tpl.right.html',}, }, }) .state('books.home', { url: '/home', templateUrl: 'list.html', }) .state('books.detail', { url: '/:bookId', templateUrl: 'detail.html', controller: 'DetailCtrl' }) 

Check it here

But there is also a different approach, which I like more. The list view, is parent of its child, and therefore it could keep its $scope, while navigating among details. Similar stuff discussed here