Ideal structure for a list with section tabs and list item child state

ionic-v1
1

So here is a hypothetical situation for an app’s structure. I have a list, that is broken into a few sections. Each section contains items for which there must be a details page.

The list comes in the form of one big rootScope object, which I get in the list abstract state. And as you descend into from the list, to the section, to the item details state, you pull into scope, first, the entire list, then just the section, then the specific item.

Now…for the list abstract state, I have the ion-side-menus tag. The section states inherit the side menus.

However, for the item details state, I want to slightly change the header, wherein these side menu buttons are. Instead of the left menu button, I want to replace it with a back button, which will take them back to the section where they were before.

So my question involves 2 things:

  1. How should I implement this item details state so that it inherits the list state header (including the side menus), along with the scoped data of the section the item belongs to?
  2. How do I implement the ion-nav-views to enable this? When I try the item details state as shown below, either the section template or the item details template renders as a black page.

Here is the releveant portion of my list abstract template:

<ion-side-menus>
	<ion-side-menu-content>
		<ion-nav-bar class="bar-stable">
			<h6>My App</h6>
		</ion-nav-bar>
		<ion-nav-buttons side="left">
			<!-- I want to change this to a back button ONLY when on the item details page -->
			<button class="button button-icon button-clear ion-navicon" ng-click="showLeftMenu()">
			</button>
		</ion-nav-buttons>

Here is the relevant portion of my section template:

<ul><li ng-repeat="item in one.items">
	<h3>{{item.name}}</h3>
	<button class="button" ui-sref="list.one.details({menu: 'antipasti', item: item.id})">
		DETAILS
	</button>
	<p>{{item.description}}</p>
</li></ul>

Here is my app’s state configuration:

.state('list', 
      { url: '/list',
        templateUrl: 'views/list.abstract.html', 
        controller: 'SideMenusCtrl', 
        abstract: true 
        })
    .state('list.landing',
      { url: '/landing',
        templateUrl: 'views/list.landing.html', 
        controller: 'LandingCtrl' 
        })
    .state('list.one',
      { url: '/one',
        templateUrl: 'views/list.one.html', 
        controller: 'OneCtrl' 
        })
    .state('list.two',
      { url: '/two',
        templateUrl: 'views/list.two.html', 
        controller: 'TwoCtrl' 
        })
    .state('list.three',
      { url: '/three',
        templateUrl: 'views/list.three.html', 
        controller: 'ThreeCtrl' 
        })
// 'one', 'two', & 'three' are sections
    .state('list.one.details',
      { url: '/:section/:item',
        templateUrl: 'views/item.details.html',
        controller: 'DetailsCtrl',
        resolve: {
          section: ['$stateParams', function($stateParams) { return $stateParams.section; }],
          item: ['$stateParams', function($stateParams) { return $stateParams.item; }]
        } 
      })

My questions stems largely from only a mild understanding of angular-ui-router and ionic HTML structure. So I would totally appreciate detailed answers!