Updating the scope variable across multiple controllers in angularjs

Question

I have two controllers- searchBoxController and productList. What I am trying to do is to update the scope variable $scope.products from multiple controllers. I know that defining it as a root variable is a very bad design- but putting that in shared service is not solving the problem. The update doesn't reflect in the HTML templates!

function SearchTermService(){
    this.productSearch = function(data, $http){
        var url = "";
        $http.get(url).then(function(resp){
            return resp.data;
        },
        function(err){
            console.log(err);
        });
    };
};

var app = angular.module('app', []);
app.service("myService", MyService);
app.service("searchTermService", SearchTermService);
app.run(function($rootScope) {
    $rootScope.products = new Date();
});

app.controller('productList', function ($scope, $rootScope, $http, myService) {
    $rootScope.products = prod_res;
});



app.controller('searchBoxController', function($scope, $http, searchTermService, $rootScope){
        $scope.getSearchResults = function(){
        $rootScope.products = searchTermService.productSearch($scope.term, $http)
    };
});

PS: I am not sure if I need to have a promise returned while assigning the $rootScope.products in 'searchBoxController', as the console.log says its undefined. Currently I am not returning a promise from the service.

this code doesn't appear to be using a shared service, rather it appears to be using `$rootScope`. — Claies, Sep 22 '15 at 13:35
I had put the shared service code- ref: http://stackoverflow.com/questions/21919962/angular-share-data-between-controllers. But since it was not working- I got back to using to $rootScope — Ajay Pal Singh, Sep 22 '15 at 13:42

score 10 · Accepted Answer · answered Sep 22 '15 at 14:02

In order to update a scope variable across multiple controller, you can use angular service.

You should use this because all angular services are singletons, so you can easily share common logic, share data between controller.

I've made an example where I use service in order to update some data. Then, my factory return an object data, so we will get an object, not just a fixed value. Thanks to this, our data will be updated, we will keep the binding data.

Controller

(function(){

function Controller($scope, $timeout, Service) {

  //Retrieve current data object of our service
  $scope.data = Service.value;

  //will be set to 4
  $timeout(function(){
    Service.set(4, 'product');
  }, 1000);

}

angular
.module('app', [])
.controller('ctrl', Controller);

})();


(function(){

function Controller2($scope, $timeout, Service) {

  //Retrieve current data object of our service
  $scope.data2 = Service.value;

}

angular
.module('app')
.controller('ctrl2', Controller2);

})();

Service

(function(){

  function Service() {

    //Our data object
    var data = {
      product: null
    };

    function set(value, field){
      data[field] = value;
    }

    return {
      set: set,
      value: data
    };


  }

  angular
    .module('app')
    .factory('Service', Service);

})();

HTML

  <body ng-app='app'>

    <div ng-controller='ctrl'>
      <h2>Service value : {{data.product}}</h2>
    </div>

    <div ng-controller='ctrl2'>
      <h2>Service value from controller2 : {{data2.product}}</h2>
    </div>

  </body>

So, we will share our data across multiple controller. By using services, you can avoid to use the $rootScope.

You can see the Working plunker

Yes it works! And you don't even needs events or watchers! Awesome. — user1261710, Jul 06 '17 at 09:41

Updating the scope variable across multiple controllers in angularjs

1 Answers1