title: AngularJS Adding A Button Spinner
body: <p>I have a form, when the user clicks 'check' a spinner shows to let the user know something is happening.</p>
  
  <p><img src="https://i.stack.imgur.com/nP8rD.png" alt="enter image description here"></p>
  
  <p>I did this by just setting <code>$scope.button = "Check";</code> then in my controller  <code>$q.when(post_data.then(</code> changing the text to include the animation <code>&lt;i class="fa fa-refresh fa-spin"&gt;</code></p>
  
  <p>This has many issues most important is that it's not universal and I end up doing it for every button. </p>
  
  <p><strong>Question:</strong> 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.</p>
  
  <p>i.e. </p>
  
  <pre><code>&lt;button type="button" SPINNER ng-click="submitCheck()"&gt;Check&lt;/button&gt;
  
  
    $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)
                      }
  
                  ))
  
  
              }
  </code></pre>