How do I nest a view within a parent state with parameters?

I'm using the Ionic Framework to create a mobile app, but I'm having a difficult time with the UI Router. I've gotten a few screens working properly, but I can't seem to get nested views working on a state with parameters. I'd like a URL that looks like /legislator/1/profile. It would have a header with the name of legislator #1 and tabs below. The profile tab would be automatically visible and clicking on other tabs (e.g. /legislator/1/votes) would change the content, but not the header

I wound up abandoning the tabs & sidemenu starter projects to customize my nested views. Here's what I have in app.js. The home and people.* states work correctly, but I can't seem to load the legislator screen with the profile view in place. I've tried changing the abstract & controller attributes, but no luck yet.

.config(function($stateProvider, $urlRouterProvider) {
  $stateProvider

  .state('home', {
    url: "/home",
    templateUrl: "templates/home.html",
    controller: "homeController"
  })

  .state('people', {
    url: "/people",
    abstract: true,
    templateUrl: "templates/people.html"
  })

  .state('people.legislators', {
    url: "/legislators",
    templateUrl: "templates/legislators.html",
    controller: "legislatorController"
  })

  .state('people.following', {
    url: "/following",
    templateUrl: "templates/following.html",
    controller: "followingController"
  })

  .state('legislator', {
    url: "/legislator/{legislatorId:int}",
    templateUrl: "templates/legislator.html",
    abstract: true
  })

  .state('legislator.profile', {
    url: "/legislator/{legislatorId:int}/profile",
    templateUrl: "templates/legislator.profile.html",
    controller: "profileController"
  })

  .state('legislator.votes', {
    url: "/legislator/{legislatorId:int}/votes",
    templateUrl: "templates/legislator.votes.html",
    controller: "votelistController"
  })

  $urlRouterProvider.otherwise('/home');
  // if none of the above states are matched, use this as the fall-back
})

How is this scenario supposed to work in the UI Router? Once I have $stateProvider configured, how should the tabs link to the nested states?

Thanks for any help you can give me.

You can use following method to create separate views. 


    state('people.following',{
                    data:{
                          anyVar: {
                                    label: 'cp',
                                    text : 'anyText'
                                  }
                         },                     
                         views: {
                            'content@people': angularAMD.route({
                                template: infoView,
                                controller: 'custInfoCtrl',
                                controllerUrl: 'modules/custCtrl'
                            }),
                            'mobileView@people': angularAMD.route({
                                template: mobileView,
                                controller: 'mobileCtrl',
                                controllerUrl: 'modules/mobileBottomViewCtrl'
                            })
                        }
                    })

<pre>
 <div ui-view='contentArea'>   </div>    
  <div ui-view='mobileView'>    </div>  
</pre>

Maybe your solution is as simple as replacing the classic href by Ui Router's ui-sref:

replace

<ion-tab ... href="#/legislator/{ scopeLegislatorId }/profile">...</ion-tab>

by

<ion-tab ... ui-sref="legislator.profile({ legislatorId: scopeLegislatorId })">...</ion-tab>

Where scopeLegislatorId is the legislatorId, available from your scope.

If that doesn't help, please provide us with your html files (e.g. legislator.html and legislator.profile.html).

RobYed pointed me in the right direction to figure out the right way to define my states. Here's the bones of what I wound up with.

app.js:

.state('legislator', {
  url: "/legislator",
  templateUrl: "templates/legislator.header.html",
  abstract: true,
})

.state('legislator.profile', {
  url: "/{seq_no:int}/profile",
  templateUrl: "templates/legislator.profile.html",
  controller: "profileController"
})

templates/legislator.header.html:

<ion-nav-view animation="slide-left-right">
  <div class="bar bar-header" ng-controller="profileController">
    {{legislator.name}}
  </div>
  <div class="tabs tabs-striped tabs-top">
    <a class="tab-item" ui-sref="legislator.profile" ng-class="{selected: is('legislator.profile')}">
      {{'Profile' | translate}}
    </a>
    <a class="tab-item" ui-sref="legislator.votes"   ng-class="{selected: is('legislator.votes')}">
      {{'Votes' | translate}}
    </a>
    <a class="tab-item" ui-sref="legislator.stats"   ng-class="{selected: is('legislator.stats')}">
      {{'Stats' | translate}}
    </a>
  </div>
  <div ui-view></div>
</ion-nav-view>

templates/legislator.profile.html:

<ion-content>
  <div class="bar bar-stable has-subheader" style="height:145px;">
    {{legislator.whatever}}
    Content Here
  </div>
</ion-content>

profileController.js:

'use strict';
angular.module('myApp').controller('profileController', function($scope, $rootScope) {
  $scope.legislator = $rootScope.legislators[$stateParams.seq_no-1];
});

Links from other states:

<a ui-sref="legislator.profile({seq_no:legislator.seq_num})"></a>