Function in AngularJS not calling to $WatchGroup

Question

I have this function that is activated when a button is pressed, and it removes an object from an array:

$scope.remove = function (index) {
    //$scope.myPeople.splice(index, 1);
    $scope.myPeople.splice(index, 1);
    console.log($scope.myPeople);
}

And in my $scop.$watchGroup I have this:

$scope.$watchGroup(['metric.value', 'startDate.value', 'endDate.value', 'myPeople', 'remove'], function () {
angular.forEach($scope.myPeople, function (key) {
   peopleArray = peopleArray.concat(key.screenName + ",");
});
   peopleArray = peopleArray.slice(0, -1);
   peopleArray = peopleArray.concat("}");
});

But for some reason, when I delete something from the list, $watchGroup doesn't seem to be listening to it...

Here is the html code that I used in the call, maybe it helps

 <a ng-click="remove($index)" value="{{person}}" type="button"style="color:red"> <i class="fa fa-times"></i></a> 

I'm still trying this without success...

    $scope.$watchCollection('[myPeople]', function () {
    $scope.dataPie.length = 0;

    angular.forEach($scope.myPeople, function (value) {

        $scope.dataPie.push({
            "key": value.name,
            "y": value.followerCount
        });
    });

});

But it does not trigger when this function is invoked!

$scope.remove = function (index) {
    $scope.myPeople.splice(index, 1);
    $scope.apply;
}

Any clue?!?

Answer 1

You can use $watch with third argument true and custom function that return object for watching, for example

$scope.$watch(
    function(scope){
      return [scope.myPeople, $scope.$eval('metric.value')];
    }, 
    function() {
        ...
    },
    true
);

Sample

 var app = angular.module('plunker', []); app.controller('ProfileController', function($scope) { $scope.myPeople = [{ name: '1', followerCount: 1 }, { name: '2', followerCount: 2 }, { name: '3', followerCount: 3 }, { name: '4', followerCount: 4 }]; $scope.remove = function(index) { $scope.myPeople.splice(index, 1); }; $scope.dataPie = []; $scope.$watch( function(scope){ return [scope.myPeople, $scope.$eval('metric.value')]; }, function() { $scope.dataPie.length = 0; console.log("test"); angular.forEach($scope.myPeople, function(value) { $scope.dataPie.push({ "key": value.name, "y": value.followerCount }); }); },true); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> <div ng-app="plunker" class="table-responsive" ng-controller="ProfileController"> <table class="table table-striped"> <thead> </thead> <tbody> <tr ng-repeat="person in myPeople | orderBy:predicate:reverse"> <td><img class="img-rounded" ng-src="{{person.profileImageUrl}}"></td> <td>{{person.name}}</td> <td> <a ng-click="remove($index)" value="{{person}}" type="button" style="color:red"> <i class="fa fa-times"></i>Remover</a> <br> </td> </tr> </tbody> </table> {{dataPie}} <br><br> <label> <input type="radio" ng-model="metric.value" value="11"> valueOne <i class="fa fa-twitter"></i> </label> <br/> <label> <input type="radio" ng-model="metric.value" value="12"> valueTwo <i class="fa fa-twitter"></i> </label> <br/> <label> <input type="radio" ng-model="metric.value" value="13"> valueThree <i class="fa fa-twitter"></i> </label> </div> 

Answer 2

watchGroup doesn't do a deep scan of the array contents

You may want to use the $watchCollection instead of $watchGroup .

See the Angular Docs here .

An array is an indexed collection as well as being an object, which is why the $watchCollection can be used:

Angular Code

$scope.remove = function(index) {
 $scope.myPeople.splice(index, 1);
};


$scope.$watchCollection('myPeople', function(newPeople, oldPeople) {
 console.log(newPeople);
});

Here is a Plunker showing the code in action: Plunker

Answer 3

If you replace

$scope.myPeople.splice(index, 1);

With

$scope.myPeople = $scope.myPeople.slice(0).splice(index, 1);

You don't need an additional $watch.