Angular, watch $scope for changes

Question

I am trying to watch a scope so I can have a function re run each time, and it does not seem to be working how I immagined it would.

so I just have

 $scope.user = userFactory.getUser();

My user being pulled in from a factory

And then later in a click function I change it to something else by having the user click a button like so

 $scope.swapUserTest = function(){
  $scope.user = {'name' : 'new'}
}

And then I'm trying to just watch if it changes - which right not is just in the click, in the future it will be from multiple differnt things so I would like a watch over it so whenever it changes my function fires. Something like this :

$scope.$watch($scope.user, function() {
  console.log("changed")
});

So I was assuming, whenever $scope.user changed this would fire, but it seems to only be firing when it first enters the controller form the factory. Could use some guidance here. Thank you!

Answer 1

You can either specify the property of an object:

$scope.$watch('user', function(newValue, oldValue) {
    // do something
});

or you can specify a function that returns the value you're watching:

$scope.$watch(function () {
    return $scope.user;
}, function(newValue, oldValue) {
    // do something
});

Answer 2

To watch a property of a scope, set it as the first parameter for the $watch function. Note: when you watch an object, then your watch gets called only when the entire object changes, not when a property of that object changes. Eg:

$scope.user = {"username": "john", "email": "john@smith.com"};
$scope.$watch("user", function(user) {
    console.log("users email now is:", user.email);
});

$timeout(function() {
    $scope.user = {"username": "jack", "email": "jack@rocks.com"};
}, 1000);

$timeout(function() {
    $scope.user.email = "jim@beam.com";
}, 2000);

//  after one second console outputs
// jack@rocks.com
//after 2 seconds ... nothing, even though user object's email has changed.

To "deep watch" an object, set the third parameter of your $watch to be true. $watch("property_name", callback_function, true);

Or when you want to watch a specific property of an object, use

$scope.$watch("user.email", function(email) {
    console.log("user.email watch called with:", email);
});
/* 
outputs both 
user.email watch called with: jack@rocks.com
users.js:60 user.email watch called with: jim@beam.com
*/