title: Changing css class from «fa fa-search» to «fa fa-refresh fa-spin» on a button, in angular http request?
body: <p>I'm developing a Website with <code>ASP.NET</code>, <code>MVC5</code>, <code>HTML5</code> and <code>AngularJS</code>.</p>
  
  <p><a href="https://i.stack.imgur.com/DeUyl.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/DeUyl.png" alt="enter image description here"></a></p>
  
  <p><strong>Updated</strong></p>
  
  <p>I have no warnings in Chrome console.</p>
  
  <p>The font-awesome fonts are locally in my web project.</p>
  
  <p>In my web.config have this:</p>
  
  <pre><code>&lt;system.webServer&gt;
      &lt;staticContent&gt;
          &lt;remove fileExtension=".woff" /&gt;
          &lt;mimeMap fileExtension=".woff" mimeType="application/font-woff" /&gt;
          &lt;mimeMap fileExtension=".woff2" mimeType="font/woff2" /&gt;
          &lt;mimeMap fileExtension=".json" mimeType="application/json" /&gt;
      &lt;/staticContent&gt;
  </code></pre>
  
  <p>I have a function that makes an Angular's <code>$http</code> request and I need to change the icon class when the button is pressed.</p>
  
  <p>Currently, in my angular controller, I have this:</p>
  
  <pre><code>$scope.requested = false; // Initial value: false.
  
  $scope.search = function (model) {
      $scope.requested = true; // When the function is called.
  
      $http({
          method: "POST",
          url: DFJB.systempath + "api/getdata",
          data: model
      }).success(function (data, status, headers, config) {
          $scope.requested = false; // When the request is completed.
          console.log(data);  
      }).error(function (data, status, headers, config) {
          console.log("Error: " + status);
      });
  };
  </code></pre>
  
  <p>HTML5:</p>
  
  <pre><code>&lt;button class="btn btn-primary" data-ng-disabled="frmModel.$invalid" type="submit"&gt;
      &lt;i data-ng-class="{'fa fa-search': requested == false, 'fa fa-refresh fa-spin': requested == true}"&gt;&lt;/i&gt;
      Search
  &lt;/button&gt;
  </code></pre>
  
  <p>However, it's not working properly.</p>
  
  <p><strong>When the function is called the icon changes with an incorrect appearance:</strong>
  <a href="https://i.stack.imgur.com/6F9WZ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/6F9WZ.png" alt="enter image description here"></a></p>
  
  <p><strong>When the request is completed the icon changes back with an incorrect appearance:</strong>
  <a href="https://i.stack.imgur.com/ZliiR.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ZliiR.png" alt="enter image description here"></a></p>
  
  <p>What I wish visually:</p>
  
  <p><a href="https://i.stack.imgur.com/GwXgr.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/GwXgr.png" alt="enter image description here"></a></p>
  
  <p>Any suggestions to solve this problem?</p>
  
  <p>Thanks.</p>