title: angularjs ui-router: find level of current state
body: <p>So I'm using ui-router and stateparams to nest child states, and it works well. I'm now trying to find a way to dictate a css class what state level the app is at. <code>main.route1.section1</code> would be 3 levels.</p>
  
  <p>Here's some non-working code to help show:</p>
  
  <pre><code>&lt;div ng-class="{findState().currentCount}"&gt;&lt;/div&gt;
  
  app.run(function($rootScope, $state, $stateParams) {
    $rootScope.$state = $state;
    $rootScope.$stateParams = $stateParams;
    $rootScope.findState = function() {
      var currentName = $state.current.name;
      var currentMatch = currentName.match(/./g);
      $rootScope.currentCount = currentMatch.length;
    };
  });
  </code></pre>
  
  <p>I'm basically looking for a way to take <code>$state.current.name</code> which say equals <code>main.route1.section1</code> and split it at the dot and count how many are in the array and return that number to the mg-class. Unless you have a better idea... like a regex filter?</p>