Angular JS: Using $scope.variable Across Controllers

Question

So, I've got a counter ($scope.counter) that I increment on ng-click. The problem I'm having is that I want to increment it from two different controllers, keeping the counter value in sync.

controllerA.js

.controller('controllerA', controllerA);
  function controllerA($scope) {
    $scope.counter = 0;

    function incrementCounter() { 
      $scope.counter = $scope.counter + 1;
    }
    ...

controllerB.js

.controller('controllerB', controllerB);
  function controllerB($scope) {
    $scope.counter = 0;

    function incrementCounter() { 
      $scope.counter = $scope.counter + 1;
    }
    ...

When I call the incrementCounter() on 'controllerA' it updates the counter on 'controllerA', but not on 'controllerB' and vice versa.

Is there a proper way to keep these in sync, no matter which controller I call the incrementCounter() function from?

Any help is appreciated. Thanks in advance!

Answer 1

A service is a good way to share the counter variable. If you want to avoid watches to keep them in sync, make sure you define the variable as a property of an object on the service. You can set the value to null initially if you want to populate it with a $http callout as per your comment.

app.service('MyService', ['$http', function($http) {
  var service = {
    counter: {
      value: null
    },
    incrementCounter: incrementCounter,
    fetchTotal: fetchTotal
  }

  return service;

  function incrementCounter(){
    service.counter.value++;
  }

  function fetchTotal(url, p) {
    $http.get(url, { params: p })
      .then(function(response) {
        service.counter.value = response.data.meta.total;
      }, function(error) {
        console.log("error occurred");
    });
  }
}]);

Then assign the counter object as a property on $scope in your controllers, and call the service to do the $http callout:

app.controller('Controller1', function ($scope, MyService) {
  $scope.counter = MyService.counter;

  $scope.incrementCounter = function(){
    MyService.incrementCounter();
  }

  fetchTotal('/test', '');
});

Assigning the counter object as a property on $scope ensures that ensure two-way binding is intact in the view. You can use ng-if so you don't render anything until the $http call is complete and the counter is initialised.

<div ng-controller="Controller1">
  <div ng-if="counter.value">
    {{counter.value}}
    <span ng-click="incrementCounter()">increment</span>  
  </div>
</div>

Fiddle with a mocked $httpBackend

Answer 2

There are two solutions.

1. using $rootScope instead of $scope.
2. Having a parent controller and define $scope.counter = 0 in it, then in your child controllers(A,B) that are used in this parent just update the $scope.counter value.

Answer 3

This is where services come in handy.

egghead.io has a nice video on this: https://egghead.io/lessons/angularjs-sharing-data-between-controllers

He talks a lot about ui-router as well, but it also shows how you can use a service.

UPDATE

If you want the value to update instantaniously in both controllers you can watch the service.

http://jsfiddle.net/jkrielaars/1swyy6re/2/

app.service('counterService', function() {
    this.counter = 0;
    this.addOne = function(){
        this.counter++;
    }
    this.getCounter = function(){
        return this.counter;
    }
});

//Controllers
app.controller("controller1",function($scope, counterService){
    $scope.counterService = counterService;
    $scope.$watch('counterService.getCounter()', function (newVal) {
      $scope.counter = newVal;
    });

    $scope.addOne = function(){
       counterService.addOne();
   }
})

app.controller("controller2",function($scope, counterService){
    //same internals as controller 1
})

In your views you can now have both controllers that will update simultaniously

<div ng-controller="controller1">
    counter value: {{counter}}
    <button ng-click="addOne()">add 1</button>
</div>

<div ng-controller="controller2">
    counter value: {{counter}}
    <button ng-click="addOne()">add 1</button>
</div>

Answer 4

You also can use the broadcast of events to update the value in other controller. Here is how it can be done:

app.controller('MainCtrl', function($scope, $rootScope) {
  $scope.name = 'World';
  $scope.counter = 0;
  $scope.incrementCounter = function() {
    $scope.counter++;
    $rootScope.$broadcast('incrementedInController1', $scope.counter);
  }
  $scope.$on('incrementedInController2', function(event, newValueCounter) {
    $scope.counter = newValueCounter;
  });
}).controller('MainCtrl2', function($scope, $rootScope) {
  $scope.name2 = 'World2';
  $scope.counter = 0;
  $scope.incrementCounter = function() {
    $scope.counter++;
    $rootScope.$broadcast('incrementedInController2', $scope.counter);
  }
  $scope.$on('incrementedInController1', function(event, newValueCounter) {
    $scope.counter = newValueCounter;
  });
});

Answer 5

You can use $rootScope which can be accessed from all controllers but it's not recommended because of debuging issues.

.controller('controllerA', controllerA);
  function controllerA($rootScope) {
    $rootScope.counter = 0;
}
.controller('controllerB', controllerA);
  function controllerB($rootScope) {
    $rootScope.counter = 1;
}

if you are using something common between all controllers it's recommended to use Service or Factories instead

here is a sample when to use it : http://viralpatel.net/blogs/angularjs-service-factory-tutorial/