title: Angular - Change css class on route state change based on $stateParams
body: <p>I have a div in the layout page:</p>
  
  <pre><code>&lt;div class="{{$root.containerClass}}"&gt;...&lt;/div&gt;
  </code></pre>
  
  <p>There are two route states:</p>
  
  <pre><code>.state('controllerAction', {
      url: '/:controller/:action',
      templateUrl: function($stateParams) {
           return $stateParams.controller + '/' + $stateParams.action;
      },
      controllerProvider: function($stateParams) {
           return $stateParams.controller + $stateParams.action + 'Controller';
      },
      onEnter: function($rootScope, $stateParams) {
          $rootScope.containerId = $stateParams.controller.toLowerCase() + '-index';
      }
  })
  .state('controller', {
      url: '/:controller',
      templateUrl: function($stateParams) {
           return $stateParams.controller + '/index';
      },
      controllerProvider: function($stateParams) {
           return $stateParams.controller + 'Controller';
      },
      onEnter: function($rootScope, $stateParams) {
          $rootScope.containerId = $stateParams.controller.toLowerCase() + '-index';
      }
  });
  </code></pre>
  
  <p>I'd like the <code>class</code> to be changed when the route changes using <code>$stateParams</code>. With the code above it does changes, but only to the <code>containerClass</code> of the <strong>previous</strong> route.</p>
  
  <p>Any help is appreciated.</p>