function $StateActiveDirective($state, $stateParams, $interpolate) {
  return {
    restrict: "A",
    controller: ['$scope', '$element', '$attrs', function($scope, $element, $attrs) {
      var state, params, activeClass;

      // There probably isn't much point in $observing this
      activeClass = $interpolate($attrs.uiSrefActive || '', false)($scope);

      // Allow uiSref to communicate with uiSrefActive
      this.$$setStateInfo = function(newState, newParams) {
        state = $state.get(newState, stateContext($element));
        params = newParams;
        update();
      };

      $scope.$on('$stateChangeSuccess', update);

      // Update route state
      function update() {
        if ($state.$current.self === state && matchesParams()) {
          $element.addClass(activeClass);
        } else {
          $element.removeClass(activeClass);
        }
      }

      function matchesParams() {
        return !params || equalForKeys(params, $stateParams);
      }
    }]
  };
}
@ngdoc directive
@name ui.router.state.directive:ui-sref-active

@requires ui.router.state.$state
@requires ui.router.state.$stateParams
@requires $interpolate

@restrict A

@description
A directive working alongside ui-sref to add classes to an element when the 
related ui-sref directive's state is active, and removing them when it is inactive.
The primary use-case is to simplify the special appearance of navigation menus 
relying on `ui-sref`, by having the "active" state's menu button appear different,
distinguishing it from the inactive menu items.

@example
Given the following template:
<pre>
<ul>
  <li ui-sref-active="active" class="item">
    <a href ui-sref="app.user({user: 'bilbobaggins'})">@bilbobaggins</a>
  </li>
</ul>
</pre>

When the app state is "app.user", and contains the state parameter "user" with value "bilbobaggins", 
the resulting HTML will appear as (note the 'active' class):
<pre>
<ul>
  <li ui-sref-active="active" class="item active">
    <a ui-sref="app.user({user: 'bilbobaggins'})" href="/users/bilbobaggins">@bilbobaggins</a>
  </li>
</ul>
</pre>

The class name is interpolated **once** during the directives link time (any further changes to the 
interpolated value are ignored). 

Multiple classes may be specified in a space-separated format:
<pre>
<ul>
  <li ui-sref-active='class1 class2 class3'>
    <a ui-sref="app.user">link</a>
  </li>
</ul>
</pre>