Angular variable in set Timeout doesn't refresh?

Question

I've got some question. Why doesn't h1 value refresh after it is changed in function? Should do the refresh because as far as I know about Angular, it always does a refresh on change of variable, or I'm on the wrong track?

angular.module('ionicApp', ['ionic'])
.controller('MainCtrl', function($scope) {
$scope.CurrentCount = 0;
$scope.CallCounter = function(){
    setTimeout(function(){
      console.log($scope.CurrentCount)
      if($scope.CurrentCount != 9){
      $scope.CurrentCount = $scope.CurrentCount+1;
      $scope.CallCounter();
    }},1000);
  }
});

body {
  cursor: url('http://ionicframework.com/img/finger.png'), auto;
}

.container h1{
  text-align:center;
  color:green;
}

<html ng-app="ionicApp">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
    <title>Count Down</title>
    <link href="//code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet">
    <script src="//code.ionicframework.com/nightly/js/ionic.bundle.js"></script>
  </head>
  <body ng-controller= "MainCtrl">
    <div class="container">
      <div class="spacer"></div>
      <h1>{{CurrentCount}}</h1>
      <div class="button button-positive" ng-click="CallCounter()">CountDown</div>
    </div>
    
  </body>
</html>

use $timeout, Instead setTimeout,

user3227295
– user3227295

2015-05-25 08:57:49 +00:00
Commented May 25, 2015 at 8:57 — user3227295
– user3227295, Commented May 25, 2015 at 8:57

Alex Filatov · Accepted Answer · 2015-05-25 09:00:52Z

3

you should use $timeout instead of setTimeout, because setTimeout hasn't info about angular scope. So it should be

angular.module('ionicApp', ['ionic'])
    .controller('MainCtrl', function ($scope, $timeout) {
    $scope.CurrentCount = 0;
    $scope.CallCounter = function () {
        $timeout(function () {
            console.log($scope.CurrentCount)
            if ($scope.CurrentCount != 9) {
                $scope.CurrentCount = $scope.CurrentCount + 1;
                $scope.CallCounter();
            }
        }, 1000);
    }
});

answered May 25, 2015 at 9:00

Alex Filatov

2,3693 gold badges33 silver badges47 bronze badges

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

Comments

Zee · Accepted Answer · 2015-05-25 08:59:47Z

3

Update in setTimeout is happening outside angular's knowledge, hence the view is not updating. Do it inside $timeout.

angular.module('ionicApp', ['ionic'])
.controller('MainCtrl', function($scope, $timeout) {
$scope.CurrentCount = 0;
$scope.CallCounter = function(){
    $timeout(function(){
      console.log($scope.CurrentCount)
      if($scope.CurrentCount != 9){
      $scope.CurrentCount = $scope.CurrentCount+1;
      $scope.CallCounter();
    }},1000);
  }
});

answered May 25, 2015 at 8:59

Zee

8,4805 gold badges39 silver badges59 bronze badges

Comments

user3227295 · Accepted Answer · 2015-05-25 08:58:43Z

angular.module('ionicApp', ['ionic'])
.controller('MainCtrl', function($scope,$timeout) {
$scope.CurrentCount = 0;
$scope.CallCounter = function(){
    $timeout(function(){
      console.log($scope.CurrentCount)
      if($scope.CurrentCount != 9){
      $scope.CurrentCount = $scope.CurrentCount+1;
      $scope.CallCounter();
    }},1000);
  }
});

body {
  cursor: url('http://ionicframework.com/img/finger.png'), auto;
}

.container h1{
  text-align:center;
  color:green;
}

<html ng-app="ionicApp">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
    <title>Count Down</title>
    <link href="//code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet">
    <script src="//code.ionicframework.com/nightly/js/ionic.bundle.js"></script>
  </head>
  <body ng-controller= "MainCtrl">
    <div class="container">
      <div class="spacer"></div>
      <h1>{{CurrentCount}}</h1>
      <div class="button button-positive" ng-click="CallCounter()">CountDown</div>
    </div>
    
  </body>
</html>

Collectives™ on Stack Overflow

Angular variable in set Timeout doesn't refresh?

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related