title: Access current state name within a directive?
body: <p>I am using UI-Router and trying to access my web app's current state from within a directive, using the following:</p>
  
  <p>footer.directive.js    </p>
  
  <pre class="lang-js prettyprint-override"><code>(function () {
    'use strict';
  
    angular
      .module('app')
      .directive('myFooter', myFooter);
  
    myFooter.$inject = ['$cookies', 'userFactory', '$state', '$log', '$rootScope'];
  
    function myFooter($cookies, userFactory, $state, $log, $rootScope) {
      var directive = {
        restrict: 'E',
        templateUrl: 'app/components/footer/footer.html',
        controller: FooterController,
        controllerAs: 'vm',
        bindToController: true
      };
  
      return directive;
  
      function FooterController($state) {
        var vm = this;
  
        vm.currentState = $state;
      }
    }
  
  })();
  </code></pre>
  
  
  
  <p>footer.html</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;div class="footer"&gt;
    &lt;p&gt;{{ vm.currentState.current.name }}&lt;/p&gt;
  &lt;/div&gt;
  </code></pre>
  
  
  
  <p>When I run <code>$log.log($state)</code> it posts an object in my console that has a <code>current</code> object with a <code>name</code> attribute that is equal to the state name that I need, but when I try to reference the $state.current.name, either on my view or by logging it to the console, it displays as an empty string.</p>
  
  <p>I'm a bit new to Angular, so if someone could explain to me what is going on here or at the least how to fix this so that I can display what I want properly, that would be a huge help. Thanks!</p>
  
  <p>Edit: Two other questions that I looked at before posting this one are:</p>
  
  <p><a href="https://stackoverflow.com/questions/17215656/how-to-detect-current-state-within-directive">This one</a> which seems to deal more with changing a class name based on state name, and <a href="https://stackoverflow.com/questions/22748456/angular-js-ng-show-element-when-state-current-name-is-a-certain-value">this one</a>, which doesn't quite address my problem either (and doesn't look like it could possibly be the right way to do this.)</p>