Update the value of variable in one controller from another controller after http.get?

Question

I have two controllers. I want to update a variable from one controller to another controller using service but its not updating.

I want the variable $scope.names in controller 'select' to update in the controller 'current' and display it

app.controller('select', ['$scope', '$http', 'myService', function($scope,$http, myService) {
$http.get('/myapp/stocknames'). 
success(function(data) {
    $scope.names=data;
    myService.names=data;
});
}]);

I am using myService to exchange the data between the two controllers. I have declared in my service.

app.service('myService', function($http, $rootScope) { this.names=[] });

app.controller('current', ['$scope', '$http', 'myService', function($scope,$http, myService) {
$scope.names=myService.names;
console.log($scope.names);  
}]);

Can you please help. How should I make the current controller update the data once the $scope.names variable in the select controller is updated?

According to me what I am doing should work :-/

Answer 1

There are many way to archive this:

First: By watching for the service variable data change

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

app.service('dataService', function() {
  this.serviceData = "test";
});

app.controller('MainCtrl', function($scope, dataService) {
  $scope.mainClickHandler = function(mainData) {
    dataService.serviceData = mainData;
  }
});


app.controller('SubCtrl', function($scope, dataService) {
  $scope.name = 'World';

  $scope.getServiceData = function() {
    return dataService.serviceData;
  }

  $scope.$watch("getServiceData()", function(newValue, oldValue) {
    if (oldValue != newValue) {
      $scope.name = newValue;
    }
  });
});

http://plnkr.co/edit/G1C81qvDD179NILMMxWb

Second:

Using event broadcast

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

app.factory('dataService', function($rootScope) {
  var serviceData = {
    "mydata": "test"
  };

  $rootScope.$watch(function() {
    return serviceData.mydata;
  }, function(newValue, oldValue, scope) {
    $rootScope.$broadcast('dataService:keyChanged', newValue);
  }, true);

  return serviceData;

});

app.controller('MainCtrl', function($scope, dataService) {
  $scope.mainClickHandler = function(mainData) {
    dataService.mydata = mainData;
  }
});


app.controller('SubCtrl', function($scope, $rootScope, dataService) {
  $scope.name = 'World';

  $rootScope.$on('dataService:keyChanged', function currentCityChanged(event, value) {
    console.log('data changed', event, value);
    $scope.name = value;
  });

});

http://plnkr.co/edit/tLsejetcySSyWMukr89u?p=preview

Third:

Using callback

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

app.service('dataService', function() {
  var serviceData = "test";
  var callback = null;
  this.updateServiceData = function(newData){
    serviceData = newData;
    if(null!==callback)
    {
      callback();
    }
  };

  this.getServiceData = function(){
    return serviceData;
  };

  this.regCallback = function(dataCallback){
    callback = dataCallback;
  };
});

app.controller('MainCtrl', function($scope, dataService) {
  $scope.mainClickHandler = function(mainData) {
    dataService.updateServiceData(mainData);
  }
});


app.controller('SubCtrl', function($scope, dataService) {
  $scope.name = 'World';
  $scope.dataChangeCalback = function() {
    $scope.name = dataService.getServiceData();
  }
  dataService.regCallback($scope.dataChangeCalback);
});

http://plnkr.co/edit/vrJM1hqD8KwDCf4NkzJX?p=preview

Answer 2

One way to do this is we can bind the entire service to the scope:

myApp.controller('select', ['$scope', '$http', 'myService', function($scope,$http, myService) {
          $scope.myService = myService;
          $scope.click = function () {
              myService.names = "john";
        };

And then we change the myService.names directly

current controller should look like this:

myApp.controller('current', ['$scope', '$http', 'myService', function($scope,$http, myService) {
$scope.names=myService.names;
console.log($scope.names);  

          $scope.$watch(function() { return myService.names; }, function(newVal, oldVal) {
   $scope.names = newVal;
   });
 }]);
}]);

We then use a watcher expression.

or a watcherExpression See for more details.