I'm having trouble using the $watch function in AngularJS with an array of boolean values. I want to display a message when there's a change in the array, but it's not working as expected.
Check out this code example where the array values are updated, but the $watch function doesn't detect the changes. Any suggestions?
View
<div data-ng-repeat="catA in categoryA">
<b><input type="checkbox" checked="checked" ng-model="arrayCategoryA[$index]"/>{{catA.name}}</b>
</div>
Controller
app.controller("controllerApp", function($scope, $http, $filter){
$scope.arrayCategoryA = [];
$scope.$watchCollection($scope.arrayCategoryA, function(newVal, oldVal){
console.log("something changed");
}, true);
$http.get("categoryA.json").success(function(data) {
$scope.categoryA = data;
for (var i = 0; i < $scope.categoryA.length; i++)
$scope.arrayCategoryA[i] = true;
});
});