Odd behavior in $scope.$watch

Question

I have the following $scope.watch function:

$scope.logChecked = []; 
$scope.selectAll = false;
$scope.$watch('selectAll', function(selectAll) {
       console.log($scope.logChecked.length, $scope.logChecked, selectAll);
});

The console.log() output correctly enumerates $scope.logChecked while $scope.logChecked.length shows 0

0 [pf2n1448: false, cc7a1340: false, cc7a1328: false, pf2n1424: false, if2n1328: false…] true

I am modifying logsChecked with the following checkbox:

<td><input type="checkbox" ng-model="logChecked[log.batchId]"/></td>

What's going on here?

Answer 1

Because logChecked is an array with nothing inside (hence length is 0), but you attached properties to it (arrays are still objects).

var foo = [];

foo.bar = 'baz';

document.write(foo.length); // 0

document.write(foo.bar); // "baz"

The part that isn't obvious is that log.batchId isn't numeric. Thus logChecked[log.batchId] attaches that value as a property of logChecked, but not inside the array.

Your problem could be solved by making logChecked an object ({}) instead. To get the number of things in that object, use Object.keys($scope.logChecked).length