title: Trouble passing parameter to child state in ui-router
body: <p>I have two states, one is a child of the other. One represents a list of people (<code>people</code>) and one for when you click on an individual person to view more details (<code>people.detail</code>).</p>
  
  <p>My first state works as intended, and has several parameters which represent all the various server side filters and paging you could apply.  The child state is a modal window, which popups as expected but my only paramater <code>personID</code> never makes it into <code>$stateParams</code>.  I wonder if it's something to do the combination of the RESTful style URL and the query string style?</p>
  
  <p>It is perhaps worth noting that <code>$stateParams</code> is populated with everything you'd expect from the parent state.</p>
  
  <p>EDIT: Plunker to show what I mean - <a href="http://plnkr.co/edit/d4xWwYdPqbvuvqaypECL?p=preview" rel="nofollow" title="Plunker">http://plnkr.co/edit/eNMIEt?p=info</a> (note that the ID is undefined)</p>
  
  <p>app.js</p>
  
  <pre><code>$urlRouterProvider.otherwise('/people');
  
      $stateProvider
          .state('people', {
              url: '/people?pageNumber&amp;pageSize&amp;sortField&amp;sortDirection&amp;search&amp;countryID&amp;jobFunctionIDs&amp;firmTypeIDs',
              templateUrl: 'Static/js/angular/views/people-list.html',
              controller: 'PeopleListController',
              resolve: {
                  api: "api",
                  people: function (api, $stateParams) {
                      //Code ommitted
                  },
                  countries: function (api) {
                      //Code ommitted
                  },
                  jobFunctions: function (api) {
                     //Code ommitted
                  },
                  firmTypes: function (api) {
                      //Code ommitted
                  }
              }
  
          });
  
      modalStateProvider.state('people.detail', {
          url: "/{personID}",
          templateUrl: 'Static/js/angular/views/people-detail.html',
          controller: function () {
  
          },
          resolve: {
              person: function (api, $stateParams) {
                  return api.people.getDetail($stateParams.personID);
              }
          }
      });
  </code></pre>
  
  <p>The <code>modalStateProvider</code> looks like:</p>
  
  <pre><code>angular.module('myApp')
  .provider('modalState', function ($stateProvider) {
      var provider = this;
      this.$get = function () {
          return provider;
      }
      this.state = function (stateName, options) {
          var modalInstance;
          $stateProvider.state(stateName, {
              url: options.url,
              onEnter: function ($modal, $state) {
                  modalInstance = $modal.open(options);
                  modalInstance.result['finally'](function () {
                      modalInstance = null;
                      if ($state.$current.name === stateName) {
                          $state.go('^');
                      }
                  });
              },
              onExit: function () {
                  if (modalInstance) {
                      modalInstance.close();
                  }
              }
          });
      };
  })
  </code></pre>
  
  <p>And finally my function in my controller to transition to the <code>people.detail</code> state:</p>
  
  <pre><code>    $scope.transitionToPersonDetail = function (personID) {
          $state.transitionTo('.detail', { personID: personID }, { location: true, inherit: true, relative: $state.$current, notify: false });
      };
  </code></pre>