update scopes in multiple controllers after $http

Question

I'm struggling to figure out how to do this. Hope anyone can help :)

1. I have multiple controllers in my Angular app. Like titleCtrl and SettingsCtrl

2. I have a service which holds a variable like this:

   var myVar = {title: 'test', settings: {color: 'black', font: 'verdana'}};

3. I'm making a $http.get request to update the "myVar" variable from the server.

The question is, how do I update the $scope.title in titleCtrl and $scope.settings in SettingsCtrl AFTER the http request has finished? I know how to do it in a single controller, but how do I update the $scopes in multiple controllers?

Answer 1

I've found a better and easier maintainable solution in my opinion. Simply do the following to achieve to-way data-binding between one (or more) controller(s) with a service:

Lets assume you fetch (i.e. $http) and store data in your service (serviceName) in the variable serviceData.

In your controller reference the service like this to achieve to-way data-binding:

$scope.data = serviceName

In your view/html bind to the data properties like this:

<input ng-model="data.serviceData.title">

Thats it! :) When your serviceData variable updates the view/scope does as well. This will work with multiple controllers.

Answer 2

• Make your service return promise object.
• Then in controller you can define a success call back to fetch title in one and settings in another controller once the promise is resolved.

Code to use promises

In your service class:

var factory = {};

var factory.fetchData = function () {
    return $http({method: 'GET', url: '/someUrl'});
}

return factory;

In controller 1:

$scope.getData = function(){
                factory.fetchData().success(response){
                            $scope.title = response.title;
                }
               }

Similarly you can update controller 2, to set settings data.

Answer 3

Use both factory and service to pass value to two controllers. This is the only way to pass value

   angular.module('mulipleCtrlApp', [])
    .service('shareService', function () {
    return {
        title: 'test',
        settings: {
            color: 'black',
            font: 'verdana'
        }
    };
})
    .controller('titleCtrl', function ($scope, shareService) {
    $scope.myVar = shareService;
    $scope.testchange = function () {
        $scope.myVar.title = 'Completed test';
    };
})
    .controller('settingCtrl', function ($scope, shareService) {
    $scope.myVar = shareService;
});

Egghead Link

Jsfiddler Link example

Answer 4

Just in you service create a object when you get data from you server copy it to that object, so all your controllers can reference to that object. Please see here http://plnkr.co/edit/j25GJLTHlzTEVS8HNqcA?p=preview

JS:

var app = angular.module('plunker', []);
app.service('dataSer', function($http) {
  var obj = {};

  getData = function() {

    $http.get("test.json").then(function(response) {

      angular.copy(response.data, obj);

    });

  }

  return {
    obj: obj,
    getData: getData

  };


});
app.controller('MainCtrl', function($scope, dataSer) {
  $scope.data = dataSer;
  $scope.get = function() {
    $scope.data.getData()
  }

});
app.controller('SecondCtrl', function($scope, dataSer) {
  $scope.data = dataSer;


});

HTML:

<div ng-controller="MainCtrl">
    <button ng-click="get()">get data</button>
    <p>Fist Controller:
      <br/>{{ data.obj.title}}</p>
  </div>
  <div ng-controller="SecondCtrl">

    <p>Second Controller:
      <br/>{{data.obj.settings}}</p>
  </div>

Answer 5

Use a watch on that variable in the service. When its updated, then update your values in controller scope. Here's an example:

Inside your controller, you can watch a var myVar on YourService and when it changes, update a variable called myVarInController with the value it changed to.

$scope.$watch(
    // This function returns the value being watched.
    function() { 
        return YourService.myVar; 
    },
    // This is the change listener, called when the value returned above changes
    function(newValue, oldValue) {
        if ( newValue !== oldValue ) {
            $scope.myVarInController = newValue;
        }
    }
);