$scope variable does not update within $interval function

Question

I am using $interval for my custom stopwatch. Within the $interval function I have a variable $scope.inputValue which is binded to a range. The problem is that after each iteration of $interval (every 500ms), the most recent $scope.inputValue is not taken into account, but only the value at the initialization (1000).

How to solve this?

Controller

.controller('DashCtrl', function($scope, $interval) {

    var interval, incrementTimer;

    $scope.inputValue       = 1000;

    //
    //
    incrementTimer = function() {
        userValue = $scope.inputValue; 
        console.log(userValue); // does not update when range changes
    };


    //
    // button toggle
    $scope.toggleTimer = function() {
        interval = $interval(incrementTimer, 500);
    };

})

HTML

<input type="range" min="0" max="2000" step="100" ng-model="inputValue">

<button class="button button-positive" ng-click="toggleTimer()">Start</button>

@devqon in my html, on a button click (I have updated the question). — WJA, Jun 22 '15 at 14:45
try logging $scope.inputValue inside of incrementTimer, do you get the correct result? — ajmajmajma, Jun 22 '15 at 14:48
@ajmajmajma no, it just stays the same value (1000), despite me changing the range (even when I change it before I initiate toggleTimer()) — WJA, Jun 22 '15 at 14:49
@JohnAndrews could you make a fiddle or something? would be easier to debug if it we could see it running in something. Thanks! — ajmajmajma, Jun 22 '15 at 14:53
The problem is probably [not using](http://stackoverflow.com/questions/17606936/angularjs-dot-in-ng-model) a [dot in `ng-model`](http://stackoverflow.com/questions/18128323/angularjs-if-you-are-not-using-a-dot-in-your-models-you-are-doing-it-wrong). If it is the case, then there may be an inherited scope being created by a parent node which contains the HTML you posted. Posting some more context around it will help in debugging it. — musically_ut, Jun 22 '15 at 14:58
This code works 100% for me in jsfiddle. Check console errors. Ajs version.... — nada, Jun 22 '15 at 15:15
@musically_ut that was indeed the problem... do you want to anser this question so I can accept it or do you prefer that I answer it on my own? — WJA, Jun 23 '15 at 08:11

score 1 · Accepted Answer · edited May 23 '17 at 12:19

1

The problem is probably not using a dot in ng-model. There probably is an inherited scope being created by a parent node which contains the HTML posted in the question.

$scope variable does not update within $interval function

2 Answers2