Changing css class from «fa fa-search» to «fa fa-refresh fa-spin» on a button, in angular http request?

Question

I'm developing a Website with ASP.NET, MVC5, HTML5 and AngularJS.

Updated

I have no warnings in Chrome console.

The font-awesome fonts are locally in my web project.

In my web.config have this:

<system.webServer>
    <staticContent>
        <remove fileExtension=".woff" />
        <mimeMap fileExtension=".woff" mimeType="application/font-woff" />
        <mimeMap fileExtension=".woff2" mimeType="font/woff2" />
        <mimeMap fileExtension=".json" mimeType="application/json" />
    </staticContent>

I have a function that makes an Angular's $http request and I need to change the icon class when the button is pressed.

Currently, in my angular controller, I have this:

$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);
    });
};

HTML5:

<button class="btn btn-primary" data-ng-disabled="frmModel.$invalid" type="submit">
    <i data-ng-class="{'fa fa-search': requested == false, 'fa fa-refresh fa-spin': requested == true}"></i>
    Search
</button>

However, it's not working properly.

When the function is called the icon changes with an incorrect appearance:

When the request is completed the icon changes back with an incorrect appearance:

What I wish visually:

Any suggestions to solve this problem?

Thanks.

Answer 1

As suggested in my comment, you should try moving the necessary class fa to class since it's needed regardless of requested value.

Additionally, you can try the following syntax for ng-class:

<button class="btn btn-primary" data-ng-disabled="frmModel.$invalid" type="submit">
    <i class="fa" data-ng-class="requested? 'fa-refresh fa-spin': 'fa-search'"></i>
    Search
</button>