Angular1 Sharing Data Between Controllers

angular1

// Angular 1 - Sharing data between controllers:

app.controller('ParentController', ['$scope', function($scope) {
  $scope.model = {
    name: 'Michael Jackson'
  };
}]);

app.controller('ChildController', ['$scope', function($scope) {
}]);

<body>
  <div ng-controller="ParentController">
    <input type="text" ng-model="model.name"/>
    <p>This is parent: {{model.name}}</p>
    <div ng-controller="ChildController">
      <input type="text" ng-model="model.name"/>
      <p>This is child: {{model.name}}</p>
    </div>
  <div>
  <div ng-controller="ParentController">
    <input type="text" ng-model="model.name"/>
    <p>This is second parent: {{model.name}}</p>
  </div>
</body>

In the above code, we define a controller function, and we give it a name, and 
in the HTML, we reference that name.  In the above code, Angular instantiates 
two instances of ParentController.  These instances are separate.  The first 
ParentController instance has a child.  The second ParentController instance 
does not.  Changing the name in the first ParentController automatically update 
the UI of its child, and changing the name in the ChildController automatically 
update the UI of its parent.  None of these impact the second instance of 
ParentController because it is a separate instance.

There are a few ways to share data across controllers.  The first way to share 
data using the scope hierarchy is by placing all of the controllers that we want 
to share data within a common parent controller.  This involves creating the 
common parent controller, adding an HTML tag corresponding to the common parent 
controller, and putting the HTML tags for the child controllers inside this new 
HTML element.  See page 27-28 of the "Angularjs for beginners - Learn AngularJS 
Step by Step in a day" book for concrete example.

The second way to share data between controllers is more flexible.  It involves 
using a service.

app.service('SharedService', function() {
  return {name: 'Ajay Pravin'};
});

app.controller('FirstController', ['$scope', function($scope) {
}]);

app.controller('SecondController', ['$scope', function($scope) {
}]);

In the above code, we have two independent controllers, FirstController and 
SecondController.  In order for us to use the 'SharedService' across them, we 
need to inject the service into the constructor functions:

app.controller('FirstController',['$scope', 'SharedService', 
  function($scope, SharedService) {
    $scope.model = SharedService;
  }
]);

app.controller('SecondController', ['$scope', 'SharedService', 
  function($scope, SharedService) {
    $scope.model = SharedService;
  }
]);

Now, the controllers are two separate instances, but share the same data.  
Notice how we created the SharedService using the service method.  Also notice 
how Angular does dependency injection for services.  If Angular see the variable 
$scope in the parameter list of a function, it knows that it need to create a 
scope object and pass it to the function.  The string 'SharedService' can be 
anything.  I guess that if Angular does not recognize it, it looks into the 
"service repository / directory" and retrieve it from there.
Unless otherwise stated, the content of this page is licensed under Creative Commons Attribution-ShareAlike 3.0 License