title: undefined stateParams using ui-router
body: <p><strong>Question</strong>: For some reason I can't get my controller to recognize my url parameters across sessions. </p>
  
  <p><strong>Background</strong>: I have  a nested view called modal that takes a parameter, whose url is <strong>/modal/:id</strong> (eg: /#/modal/1/ or /#/floorplan/1+2/). Ideally, when the user goes to this url, a modal will automatically open with the resource(s) with the given id. </p>
  
  <p>Since the parent state and the child state(modal) are being handled by the same controller, the modal state has a custom data attribute (modalStatus) in its configuration set to true. When this custom attribute is enabled the modal is displayed. </p>
  
  <p>I can currently go from the parent state to the nested state and trigger the modal but when I start a new session or refresh the page with a url like /modal/3, the application fails to read the parameters ($stateParams), which is being logged as an empty object.</p>
  
  <p>I have tried using onEnter and Resolve but I'm not exactly clear on how to use them in this scenario. </p>
  
  <p>Router</p>
  
  <pre><code>$stateProvider
    .state('home', {
      name: 'home',
      url: '/',
      templateUrl: 'views/main.html',
      controller: 'MainCtrl'
    })
    .state('home.modal', {
      url: 'modal/:id/',
      data: {
        modalState: true
      },
      controller: 'MainCtrl'
    })
  </code></pre>
  
  <p>Relevant part of controller:</p>
  
  <pre><code>$scope.init = function() {
    console.log($stateParams);
    if ($state.current.data) {
      if ($state.current.data.modalState === true) {
        $scope.openModal();
      }
    }
  };
  
  $scope.init();
  </code></pre>
  
  <p>edit: <a href="http://plnkr.co/edit/XcoGNvBBCymupQPe7bn0?p=preview" rel="nofollow">plunkr</a></p>