$scope variable doesn't change in callback function, angularjs

Question

I want to show a spinner into button during function one running and after finishing, hide spinner, this is what I tried:

<div ng-controller="MyController">       
        <button ng-click="InsertData()">

            <i class="fa fa-refresh fa-spin" ng-show="loading"></i>Loading
        </button>
        <br />
        {{loading}}
    </div>

and this is controller.js

angular.module('MyApp', []).controller('MyController', function ($scope) {

$scope.InsertData=function()
{
    $scope.loading = true;
    $scope.one($scope.two);

}

$scope.one = function (callback) {

    setTimeout(function () { alert("this is function one"); callback(); }, 1000);

}

$scope.two = function () {
    alert("two");
    $scope.loading = false;

}

});

but this line

$scope.loading = false;

doesn't execute! although line above it runs, I mean alert("two") appears!

why the value of $scope.loading doesn't change in callback function? how to solve this problem?

score 0 · Accepted Answer · answered Oct 05 '17 at 18:16

The problem is because you are using setTimeout which is a Javascript function, this will cause issues, where the scope variable will not be updated in the scope. Hence we must use the angular wrapper for this which is $timeout().

More details here, to know the difference between $timeout() and setTimeout() refer here

Below is a working fiddle for the question.

JSFiddle Demo

$scope variable doesn't change in callback function, angularjs

1 Answers1