AngularJS is-Active link

is-active.js

'use strict';

/**
 * @ngdoc directive
 * @name onepmApp.directive:isActive
 * @description
 * # isActive
 */
angular.module('onepmApp')
  .directive('isActive', function ($state, $log, $compile) {
    return {
      restrict: 'A',
      scope: true,
      compile: function (element, attributes) {
        var url = element.find('a[ui-sref]').attr('ui-sref').match(/[a-z.]*/) || [],
            bindKlass = attributes.isActive === 'is-active' ? 'active' : attributes.isActive;
        element.removeAttr('is-active'); // necessary to avoid infinite compile loop
        element.attr('ng-class', '{ "' + bindKlass + '": active }');

        function link($scope) {
          $scope.url = url[0];
          $compile(element)($scope);
        }
        return link;
      },
      controller: function ($scope, $rootScope, $timeout) {
        function setClass (urlString) {
          var url = $scope.url;
          $scope.active = !url.indexOf(urlString);

          if ( url.split('.')[1] === 'index' && url.split('.')[0] === urlString.split('.')[0]) {
            $scope.active = true;
          }
        }
        // After state change
        $rootScope.$on('$stateChangeSuccess', function(event, toState){
          setClass(toState.name);
        });
        // Browser refresh
        $timeout(function() {
          setClass($state.current.name);
        }, 500);
      }
    };
  });