title: How to add a spinner while loading the content in AngularJS?
body: <p>I am using button spinner while loading the content, when the user clicks on the "Search" button content will load, at this time <code>buttonLabel</code> will be changed to "Searching" and spinner will be shown (Here button will be disabled). After loading the content (Promise resolved) <code>buttonLabel</code> will be reverted back to "Search" (button will be enable here).</p>
  
  <p>I have tried the below code, but it is always showing the spinner.</p>
  
  <p><strong>HTML :</strong></p>
  
  <pre><code>&lt;button class="btn btn-xs btn btn-blue" ng-click="show()"&gt;
    &lt;span&gt;&lt;i class="glyphicon glyphicon-off"&gt;&lt;/i&gt;&lt;/span&gt; {{buttonLabel}}
  &lt;/button&gt;
  </code></pre>
  
  <p><strong>Script :</strong></p>
  
  <pre><code>$scope.buttonLabel = "Search";
  $scope.show = function() {
    $scope.buttonLabel = "Searching";
    $scope.test = TestService.getList( $cookieStore.get('url'),
      $rootScope.resourceName+"/students" );
      $scope.test.then( function( data ) {
        if( data.list ) {
          $scope.testData = data.list;
          $scope.buttonLabel = "Search";
        }
      }
    }
  </code></pre>
  
  <p><strong>Updated Fiddle :</strong> <a href="http://jsfiddle.net/xc6nx235/18/" rel="nofollow noreferrer">http://jsfiddle.net/xc6nx235/18/</a></p>