title: AngularJS - State name passed into controller doesn't work
body: <p>I'm new to angular and I can't figure out why this isn't working.</p>
  
  <p>When I call <code>{{$state.current.name}}</code> in my view it works perfectly fine, but as soon as I try to pass it to my controller, the state gets "lost".</p>
  
  <p>Here is my setup:</p>
  
  <p>Module:</p>
  
  <pre><code>angular.module('app', ['ui.router'])
  
          .run(function ($rootScope, $state, $stateParams) {
              $rootScope.$state = $state;
              $rootScope.$stateParams = $stateParams;
          })
          //followed by boilerplate ui router setup
  </code></pre>
  
  <p>View:</p>
  
  <p><code>&lt;home-nav-bar&gt;&lt;/home-nav-bar&gt;</code></p>
  
  <p>Directive:</p>
  
  <pre><code>angular.module('app')
              .directive('homeNavBar', function () {
                  return {
                      restrict: 'E',
                      templateUrl: 'homeNavBarView.html',
                      controller: 'navCtrl'
                  };
              })
  })();
  </code></pre>
  
  <p>Controller:</p>
  
  <pre><code>angular.module('app')
              .controller('navCtrl', function ($state, $scope) {
                     alert($state.current.name); //returns empty
              });
  })();
  </code></pre>
  
  <p>At this point I am clueless as to why I can get the state name in the view but not in my controller..</p>