call directive from controller

I have a login function and I want that upon click, a spinner is loaded until the event is finished then the loading spinner is hidden. I am building an ionic app.

Currently my code is like this

This is the scope function that binds to the click login 

$scope.doLogin = function(loginData) {
    console.log("in doLogin")
    $scope.submitted = true;

    if (loginData.$valid) {
      $ionicLoading.show({
        //make the template a directive
        template: '<ion-spinner class="spinner-energized" icon="spiral"></ion-spinner>',
        hideOnStateChange: true,
        duration: 2000
      });
      $location.url('/about');    
    }
  };

In the spirit of modularizing my code in AngularJS, i have quite a number of click events that I want the ionicLoading.show event to be done and upon completion of the processing then it hides. I felt the best way to do this is via directives but so far im a bit blurr as to how i will make it happen.

http://plnkr.co/edit/pi71uQunHSYMwONqlPTa?p=info

Part i want to make into a directive so tht i can call it across my code in my several click button functions 

$ionicLoading.show({
          //make the template a directive
          template: '<ion-spinner class="spinner-energized" icon="spiral"></ion-spinner>',
          hideOnStateChange: true,
          duration: 2000
        });

My main problem is that the ionicLoading.show must only be triggered when the loginData.$valid is true.

Any help is appreciated?

Thanks

With this structure i have only one directive that i can call in my various html that i want to execute the ionicLoading function.

in my directive

angular.module('my.directives', [])
    .directive('mainDirective',['$ionicLoading', function($ionicLoading) {
      return function(scope, element, attrs) {
        element.bind("click", function() {
          console.log("directives")
          var a = scope.$apply(attrs.mainDirective)
          console.log(a)
          if(a ===true){
            console.log("inside inside")
                $ionicLoading.show({
                template: '<ion-spinner class="spinner-energized" icon="spiral"></ion-spinner>',
                hideOnStateChange: true,
                duration: 2000
            });
                switch (attrs.mainDirective) {
                    case "loginData.$valid":
                        scope.$apply("doLogin(loginData)")
                        break;
                    case "regForm.$valid":
                        scope.$apply("submitRegForm(regForm)")
                        break;
                    case "newData.$valid":
                        scope.$apply("createLoanApplication(newData)")
                        break;
                    case "pswdChange.$valid":
                        scope.$apply("submitPswdChange(pswdChange)")
                        break;
                    case "feedback.$valid":
                        scope.$apply('submitFeedback(feedback)')
                        break;
                }

          }

        });
      }
    }
    ])

in one of my many controller scopes that will use the directive function

$scope.doLogin = function(loginData) {
    console.log("in doLogin")
    $scope.submitted = true;

      AuthenticationService.login(loginData);    
  };

in one of many html pages that needs the directive 

<div>
  <button main-directive = "loginData.$valid" class="button button-block button-positive" type="submit">Log in</button>
</div>