Sharing data between controllers in Angular, to watch or not watch?

Question

I read the following questions and answers: Share data between AngularJS controllers, Update scope value when service data is changed, and Angular: Update service and share data between controllers.

My question is about the answers provided. The answers often suggest to $watch and I don't understand why.

I wanted to share some values between controllers so I simply did this (this is a simplification of the code):

  angular.module('app', [])
.factory('SomeSharedData', function() 
{
  return { 'pointer' : { 'someKey' : 'someValue' }};
})

.controller('Controller1', ['$scope', 'SomeSharedData', function($scope, SomeSharedData) {
  $scope.pointer = SomeSharedData.pointer;
}])

.controller('Controller2', ['$scope', 'SomeSharedData', function($scope, SomeSharedData)
{
  $scope.pointer = SomeSharedData.pointer;
}]);

Is this inheritly evil for some reason?

Why use something like:

$scope.$watch(function () { return SomeSharedData.someKey(); }, function (newValue) {
    if (newValue) $scope.someKey = newValue;
});

Depends what you want to achieve. In your first example, the value of `pointer` will be set when the controller is first run, and will not be updated if `SomeSharedData.pointer` is changed elsewhere. If that's all you need, then a $watch is unnecessary. If you want data-binding between all instances that reference `SomeSharedData.pointer`, you'll need to use something like the second snippet of code. — Michael Bromley, Sep 21 '14 at 15:45

score 1 · Accepted Answer · answered Sep 21 '14 at 16:14

It actually depends, in your case the pointer variable in the controller will be set to the SomeSharedData factory pointer variable. So there is no need to use $watch in your case as the variable will be set once.

But, what if you want to do something if the pointer variable in the controller changes. You will not know, whether the pointer variable has changed if you don't use $watch (that is what the $watch is for).

Like, take an example. Here i have created a model called pointer and i am watching for changes, and if anything changes the count is increased by 1 everytime. In this case the $watch is necessary. So, if in any case you want to do something if the model is changes, you can use $watch.

index.html

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Angular $watch</title>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular.min.js"></script>

</head>
<body>
<div ng-app="myApp">
    <div ng-controller="myCtrl">
        <input type="text" ng-model="pointer">
        {{pointer}}
        <br>
        <h3>Will increase if input changes:<h1>{{count}}</h1></h3>  
    </div>
</div>           

    <script src="main.js"></script>
</body>
</html>

main.js

var myApp = angular.module('myApp', []);

myApp.controller('myCtrl', ['$scope', function ($scope) {
    $scope.count = 1;
    $scope.$watch('pointer', function(newValue, oldValue) {
        if ( newValue !== oldValue ) {
            $scope.count += 1;
        }        
    });
}]);

So if the `onChange` directive is used to watch for changes from the outside (from the user), the `$watch` is used to respond to changes that come from the inside: services and other controllers? — AturSams, Sep 21 '14 at 18:32

Sharing data between controllers in Angular, to watch or not watch?

1 Answers1