How to pass value to Angular $interval function - angularjs

Question

Condition
I have an array of HTML element constructed using ngRepeat.
<li ng-repeat="person in persons">Name: {{ person.name }}. Age {{ person.age }}</li>
In my controller I am trying to update (random) the person's "age" dynamically using Angular $interval.
$scope.persons = [
{name: "John Doe", age: 30},
{name: "Peter Parker", age: 21},
{name: "Clark Kent", age: 45},
{name: "John Wayne", age: 33}
];
var promiseOfYouth = [];
$scope.makeYoung = function() {
//since persons are store in array object.
//loop persons to update dynamically each person age
for(var x = 0; x < $scope.persons.length; x++) {
//check age randomizer already running
if ( angular.isDefined(promiseOfYouth[x]) ) return;
//make them young!
promiseOfYouth[x] = $interval(function() {
console.log('x value in $interval function: '+x);
try {
$scope.persons[x].age = Math.floor(Math.random() * (99 - 17 + 1)) + 17;
} catch(err) {
console.log('"$scope.persons['+x+'].age" is not valid. Error message:'+err.message);
}
}, 100, 50);
}
}
Problem
In the makeYoung function the "x" value always return "4"
Question
How do I passed value of "x" (in this case it should 0,1,2,3) into the $interval function?
For further details please take a look at my jsFiddle example here

Answer 1

That's a classical JavaScript gotcha. You need to have x in a new scope to make this work. Otherwise, all the closures use the value of the same x variable, which is 4 at the end of the loop.
See the jsfiddle
function makePersonYoung(x) {
//check age randomizer already running
if ( angular.isDefined(promiseOfYouth[x]) ) return;
//make them young!
promiseOfYouth[x] = $interval(function() {
$scope.persons[x].age = Math.floor(Math.random() * (99 - 17 + 1)) + 17;
}, 100, 50);
}
$scope.makeYoung = function() {
//since persons are store in array object.
//loop persons to update dynamically each person age
for(var x = 0; x < $scope.persons.length; x++) {
makePersonYoung(x);
}
}
This solution has the added advantage of making the code more readable.

Answer 2

This is a quirk of javascript. That blog post suggests several solutions. Copy the x variable as an immediately executing function:
(function(x2) {promiseOfYouth[x2] = $interval(function() {
console.log('x value in $interval function: '+x2);
try {
$scope.persons[x2].age = Math.floor(Math.random() * (99 - 17 + 1)) + 17;
} catch(err) {
console.log('"$scope.persons['+x2+'].age" is not valid. Error message:'+err.message);
}
}, 100, 50)}(x);
Or bind the the function
promiseOfYouth[x] = $interval(function(x2) {
console.log('x value in $interval function: '+x2);
try {
$scope.persons[x2].age = Math.floor(Math.random() * (99 - 17 + 1)) + 17;
} catch(err) {
console.log('"$scope.persons['+x2+'].age" is not valid. Error message:'+err.message);
}
}.bind(null, x), 100, 50);

Answer 3

you can inject it like a parameter
promiseOfYouth[x] = $interval(function(x) {
console.log('x value in $interval function: '+x);
try {
$scope.persons[x].age = Math.floor(Math.random() * (99 - 17 + 1)) + 17;
} catch(err) {
console.log('"$scope.persons['+x+'].age" is not valid. Error message:'+err.message);
}
}, 100, 50);
fiddle example