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

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?

Naren Murali · Accepted Answer · 2017-10-05 18:16:00Z

0

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

answered Oct 5, 2017 at 18:16

Naren Murali

66.1k6 gold badges51 silver badges96 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

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

1 Answer 1

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Linked

Related