AngularJS Adding A Button Spinner

I have a form, when the user clicks 'check' a spinner shows to let the user know something is happening.

enter image description here

I did this by just setting $scope.button = "Check"; then in my controller $q.when(post_data.then( changing the text to include the animation <i class="fa fa-refresh fa-spin">

This has many issues most important is that it's not universal and I end up doing it for every button.

Question: Could this be done as a directive that I just amend to all my buttons, then in my controllers I could just call a start and stop process where I want to? An example would be helpful.

i.e. 

<button type="button" SPINNER ng-click="submitCheck()">Check</button>


  $scope.submitCheck = function () {
                START BUTTON SPINNER
                var post_data = post_resource($scope, CbgenRestangular);

                $q.when(post_data.then(
                    function (object) {
                      STOP BUTTON SPINNER
                        $scope.claims = object;
                    },
                    function (object) {
                        STOP BUTTON SPINNER
                        console.log(object)
                    }

                ))


            }

In the past I wrote some simple demo based on spiner.js and $timeout simulation:

Plunker

enter image description here

It might helpful

I tried to solve exactly the same problem today. My goal was to replace the button text with a spinning wheel and ensure the button size does not change (to avoid nasty rearrangements on the screen).

The result is a simple directive: https://gist.github.com/weberste/be32c7301576259e9f96

It can be used as follows:

<button click-spinner="saveClient(client, clientForm)">
    Submit
</button>

This will replace the button text with a spinner until the promise returned by saveClient is resolved.

A really nice solution can be found in the article "angularJS Button directive with busy indicator".

This solution will only require two things (it actually requires three, if you count the inclusion of spin.js, but you can use any spinner implementation that you choose):

  1. A directive is placed on the element that should display the spinner inside of itself.
  2. The function that is passed to the directive needs to return a promise, which is how the directive knows when to stop the spinner.

With this method, there's no need to rely on special variables that need to be set/managed by the controller.