Question

38

$watch an object

rated 0 times [ 44] [ 6] / answers: 1 / hits: 169636 / 11 Years ago, fri, october 18, 2013, 12:00:00

I want to watch for changes in a dictionary, but for some reason watch callback is not called.

Here is a controller that I use:

function MyController($scope) {

    $scope.form = {

        name: 'my name',

        surname: 'surname'

    }



    $scope.$watch('form', function(newVal, oldVal){

        console.log('changed');

    });

}

Here is fiddle.

I expect $watch callback to be fired each time name or surname is changed, but it doesn't happen.

What is the correct way to do it?

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

estefanib

Add To Favorites

Follow

Total Points: 508

Total Questions: 104

Total Answers: 83

Location: Lebanon

Member since Sun, Aug 2, 2020

4 Years ago

estefanib questions

1 JavaScript - wait until element loaded on website using Chrome extension

Sat, Jul 10, 21, 00:00, 3 Years ago

1 How to auto close an alert after few seconds with Bootstrap?

Mon, Jun 28, 21, 00:00, 3 Years ago

1 What is the difference between a User and a GuildMember in discord.js?

Sun, Sep 20, 20, 00:00, 4 Years ago

1 react styled components style inner elements

Fri, Aug 21, 20, 00:00, 4 Years ago

1 How to automatically refresh an interactive grid after clicking on save button or at a fixed interval?

Wed, Jun 17, 20, 00:00, 4 Years ago

View All

answered 11 Years ago noa · Accepted Answer

Call $watch with true as the third argument:

$scope.$watch('form', function(newVal, oldVal){

    console.log('changed');

}, true);

By default when comparing two complex objects in JavaScript, they will be checked for reference equality, which asks if the two objects refer to the same thing, rather than value equality, which checks if the values of all the properties of those objects are equal.

Per the Angular documentation, the third parameter is for objectEquality:

When objectEquality == true, inequality of the watchExpression is determined according to the angular.equals function. To save the value of the object for later comparison, the angular.copy function is used. This therefore means that watching complex objects will have adverse memory and performance implications.