Loading spinner is not working on ng-click or ng-change in Angularjs

Question

I am using a loading spinner while loading a page.

App.controller('MailFolderController', ['$scope', '$http',function ($scope, $http){
$scope.loading = true;

    $scope.allotmentStatus = [
    {"value": "", "text": "All"},
    {"value": "ALLOTTED", "text": "ALLOTTED"},
    {"value": "UNALLOTTED", "text": "UNALLOTTED"}
    ];

    $http.get(serverUrl).then(function (result) {
        $scope.itemList = result;
    });

    $scope.changeItemList = function () {
      $scope.loading = true;
      $http.get(newServerUrl).then(function (result) {
          $scope.itemList = result;
          $scope.loading = false;
          });
    }

    $scope.changeItemListAccordingToStatus = function (alotment) {
         $scope.loading = true;
         $http.get(newServerUrl+'?alotment='+alotment).then(function (result) {
                $scope.itemList = result;
                $scope.loading = false;
              });
     };

     // Other functions
     $scope.loading = false;
]}

And in view page :

 <div ng-controller="ItemsController">
     <button class="btn btn-primary" ng-click="changeItemList()"> Check New Items </button>

    <select id="allotmentStatus" data-ng-model="allotment" ng-options="c.text for c in allotmentStatus"                                                            ng-change="changeItemListAccordingToStatus(allotment.value)"></select>


        <table>
            <img src="app/img/spinner.gif" ng-show="loading"/>
           <tr ng-repeat="item in itemList">
               <td>{{item.name}}</td>
               <td>{{item.quentity}}</td>
               <td>{{item.status}}<td>
           </tr>
        </table>
 </div>

Loading spinner is working fine when page load first time, But when I click on button and change value of select tag the value of list are changing according to API call, But the loading spinner is not working. (ng-click is used in button click, and ng-change is used in Select tag)

Any suggestion will be appreciable . Thank you

Answer 1

Use another variable as we have discussed earlier because your variable may got reflected from another places.

App.controller('MailFolderController', ['$scope', '$http',function ($scope, $http){
//$scope.loading = true;

    $scope.allotmentStatus = [
    {"value": "", "text": "All"},
    {"value": "ALLOTTED", "text": "ALLOTTED"},
    {"value": "UNALLOTTED", "text": "UNALLOTTED"}
    ];

    $http.get(serverUrl).then(function (result) {
        $scope.itemList = result;
    });

    $scope.changeItemList = function () {
      $scope.loadingSpinner = true;
      $http.get(newServerUrl).then(function (result) {
          $scope.itemList = result;
          $scope.loadingSpinner = false;
          });
    }

    $scope.changeItemListAccordingToStatus = function (alotment) {
         $scope.loadingSpinner = true;
         $http.get(newServerUrl+'?alotment='+alotment).then(function (result) {
                $scope.itemList = result;
                $scope.loadingSpinner = false;
              });
     };

     // Other functions
     $scope.loadingSpinner = false;
]}

HTML

<div ng-controller="ItemsController">
     <button class="btn btn-primary" ng-click="changeItemList()"> Check New Items </button>

    <select id="allotmentStatus" data-ng-model="allotment" ng-options="c.text for c in allotmentStatus"                                                            ng-change="changeItemListAccordingToStatus(allotment.value)"></select>


        <table>
            <img src="app/img/spinner.gif" ng-show="loadingSpinner"/>
           <tr ng-repeat="item in itemList">
               <td>{{item.name}}</td>
               <td>{{item.quentity}}</td>
               <td>{{item.status}}<td>
           </tr>
        </table>
 </div>