title: Exposing the current state name with ui router
body: <p>I'm trying to implement a language switcher where if a user clicks on "de" from any given page on an "en" side - it takes them to that page of the "de" side. If I console.dir the $state parameter, it exposes the values I'd want with the "current" property of the given $state. If I try to console.dir the $state.current to focus on the values I want, it only gives the parent state property (my current views are nested).</p>
  
  <p>My current thinking is, I'm on url/en/content, and dynamically I can then have my lang navigation dynamically load the appropriate destination points into some kind of data attribute, pick those up with a custom directive where I'd initiate a "go to" and set my preferedLanguage value per angular-translate.</p>
  
  <p>The key issue at the moment is exposing that $state name - again, when simply browsing $state the current object gives the values I'd want, but $current.state directly only gives the parent state.</p>
  
  <p>If anyone has a better suggestion of how to do this (in a angular way - no custom cookie junk) I'm happy to take suggestions.</p>
  
  <p>Thanks!</p>
  
  <p>Update! CODE SAMPLES:</p>
  
  <p>Object reference of my states:</p>
  
  <pre><code>var urlStates = {
          en: {
              home: {
                  name: 'home',
                  url: '/en',
                  templateUrl: 'templates/'+lang+'/home.html',
                  abstract: 'true'
              },
              home_highlights: {
                  name:'home.highlights',
                  url: '',
                  templateUrl: 'templates/'+lang+'/home.highlights.html'
              },
              home_social:
              {
                  name: 'home.social',
                  url: '/social',
                  templateUrl: 'templates/'+lang+'/home.social.html'
              },
              home_map:
              {
                  name: 'home.map',
                  url: '/map',
                  templateUrl: 'templates/'+lang+'/home.map.html'
              }
  
          };
  </code></pre>
  
  <p>My States:</p>
  
  <pre><code>$stateProvider
          .state(urlStates.en.home)
          .state(urlStates.en.home_highlights)
          .state(urlStates.en.home_social)
          .state(urlStates.en.home_map);
  
          $locationProvider.html5Mode(true);
  
  })
  </code></pre>
  
  <p>Controller:</p>
  
  <pre><code>.controller('LandingPage', function($translate, $state){
      this.state = $state;
      this.greeting = "Hello";
  });
  </code></pre>
  
  <p>And Lastly, the output I see in the dom:</p>
  
  <p>With this.state = $state;</p>
  
  <pre><code>{
      "params": {},
      "current": {
          "name": "home.highlights",
          "url": "",
          "templateUrl": "templates/en/home.highlights.html" },
          "transition": null
  }
  </code></pre>
  
  <p>With this.state = $state.current</p>
  
  <pre><code>{
      "name": "",
      "url": "^",
      "views": null,
      "abstract": true
  }
  </code></pre>