AngularJS ng-if variable works only once

Question

I am maintaining a code written some time ago, I have no experience in AngularJS. I have to turn on a spinner while an HTTP request is fired and to turn off it when the HTTP response is received.

The spinner is controlled by a ng-if and the $scope.authenticating variable.

Currently, when the page is loaded, the spinner is turned on (accordingly to the initially state of $scope.authenticating === false.

The user switches the switch and the HTTP is fired correctly, the $scope.authenticating is set to true and the spinner correctly shows-up.

When the HTTP response returns, the console log shows me the contents of the response, all is okay, then the $scope.authenticating is set to false, but: the spinner still remains and doesn't disappear.

Any help is appreciated.

Following, the code.

The controller:

  $scope.authenticating = false


  $scope.myfunction = async function (check, change, user) {
    if (someCheck(user)) {
      $scope.modified = true;
      ...
      $scope.authenticating = true
      let res = await AppUserResource.patch(..., ...).$promise;
      console.log('res: ' + JSON.stringify(res))
      $scope.authenticating = false
    }
  }

The relative HTML Code:

  <div style="margin-top:13px">
    <div ng-if="!authenticating">
      <label class="switch">
        <input id="switch" ng-change="bypassApps(disabledAppsCheckbox, true, user)" ng-model="disabledAppsCheckbox"
               type="checkbox">
        <div class="slider round">
          <div class="slider-text pull-left text-green-table">{{'ON' | translate}}</div>
          <div class="slider-text pull-right text-red-table">{{'OFF' | translate}}</div>
        </div>
      </label>
    </div>
    <div ng-if="authenticating">
      <i class="fa fa-spinner fa-spin"style="font-size:270px;margin-bottom:5%; margin-top:5%;"></i>
    </div>
  </div>

Answer 1

When async/await pattern is used its outside of the angularJS digest-loop. For this reason you have to call

$scope.$apply()

https://docs.angularjs.org/api/ng/type/$rootScope.Scope#$apply