title: Angular - $stateParams Is Empty In Controller
body: <p>I am having a lot of trouble understanding how stateParams are supposed to work. Everywhere I look suggests that this should pass an <code>item_id</code> of 456 when I travel to the URL <code>/#/manage/456</code>, but instead <code>$stateParams</code> is an empty object. Furthermore, in the <code>$state</code> object that is passed to MainCtrl, I can access all of the parameters by using <code>$state.params</code>, however this seems to be undesirable and hackish.</p>
  
  <pre><code>angular
      .module('router',['ui.router'])
      .config(['$stateProvider', '$urlRouterProvider', function($stateProvider, $urlRouterProvider)
      {
  
          $stateProvider
              .state('manage', 
              {
                  url: '/manage',
                  templateUrl: '/templates/main.html',
                  controller: 'MainCtrl'
              })
              .state('manage.item_id',
              {
                  url: '/:item_id',
                  templateUrl: '/templates/main.html',
                  controller: 'MainCtrl'
              })
  
      }])
      .controller('MainCtrl', ['$scope', '$stateParams', '$state', function($scope, $stateParams, $state)
      {
          // empty object
          console.log('$stateParams: ', $stateParams);
  
          // shows the variables i want
          console.log('$state.params: ', $state.params); 
      }])
  </code></pre>