wait-bar directive for angular material design. Shows wait bar once showEvent is emitted on rootScope and hides it again once hideEvent is emitted

gistfile1.js

/**
 * @ngdoc directive
 * @name frontendApp.directive:equals
 * @description
 * A directive to show and hide a loading bar. it takes two attributes (show-event and hide-event) which must be the event names it should listen on on the rootScope.
 */
  .directive('waitBar', ['$rootScope', function ($rootScope) {
    return {
      restrict: 'E', // only activate on element attribute
      link: function (scope, elem, attrs) {

        scope.visible = false;
        scope.message = attrs.message;
        // watch own value and re-validate on change
        $rootScope.$on(attrs.showEvent, function () {
          scope.visible = true;
        });

        $rootScope.$on(attrs.hideEvent, function () {
          scope.visible = false;
        });

      },
      template: '<div ng-show="visible"><p>{{message}}</p></p><md-progress-linear md-mode="indeterminate" flex></md-progress-linear></div>'
    }
  }]);