How to share data between controllers in AngularJS ?

The task is to share data variable between two or more controllers by using AngularJS. There are many procedures to achieve this. Here we will discuss the most popular ones.

Approach: To share data between the controllers in AngularJS we have two main cases:

  • Share data between parent and child: Here, the sharing of data can be done simply by using controller inheritance as the scope of a child controller inherits from the scope of the parent controller.
  • Share data between controllers without having relation: Here, the sharing of data can be done through a few ways some of them are:

    By using rootScope variable: We can use the rootScope variable to hold shared data and then can reference it from any controller. Here, at the starting of the Angular app, we initialized the rootScope variable with some value and then refer it from every controller and thus bind scope variables in both controllers to the rootScope variable.

    • Example:
      filter_none

      edit
      close

      play_arrow

      link
      brightness_4
      code

      <!DOCTYPE html>
      <html>
        
      <head>
          <title>
              Angular JS sharing data using rootScope
          </title>
          <script src=
          </script>
      </head>
        
      <body>
          <h1 style="color:green;"
              GeeksforGeeks 
          </h1>
        
          <div ng-app="mainApp">
              <div ng-controller="firstcontroller">
                  <h2>First controller</h2>
                  <p>{{firstvalue}}</p>
              </div>
              <div ng-controller="secondcontroller">
                  <h2>Second controller</h2>
                  <p>{{secondvalue}}</p>
              </div>
          </div>
        
          <script>
              var mainApp = angular.module("mainApp", []);
        
              mainApp.run(function($rootScope) {
                  $rootScope.value = 
                     'A Computer Science Portal for Geeks';
              });
              mainApp.controller('firstcontroller',
                  function($scope, $rootScope) {
                      $scope.firstvalue = $rootScope.value;
                  });
              mainApp.controller('secondcontroller',
                  function($scope, $rootScope) {
                      $scope.secondvalue = $rootScope.value;
                  });
          </script>
      </body>
        
      </html>                    

      chevron_right

      
      

    • Output:

    By using factory or service: The $rootscope method is not preferred for data transfer or sharing data because it has a global scope that is available for the entire application. So, we use another method in which we create a factory or service to hold share data. AngularJS factories and services are JS functions that perform a specific task containing both methods & properties and can be injected in other components (e.g. your controllers) using dependency injection. In this way we can define a shared variable in a factory, inject it in both controllers and thus bind scope variables in both controllers to this factory data.

    • Example:
      filter_none

      edit
      close

      play_arrow

      link
      brightness_4
      code

      <!DOCTYPE html>
      <html>
        
      <head>
          <title>
              Angular JS sharing data using factory
          </title>
          <script src=
          </script>
      </head>
        
      <body>
          <h1 style="color:green;"
              GeeksforGeeks 
          </h1>
        
          <div ng-app="mainApp">
              <div ng-controller="FirstController">
                  <input type="text" ng-model="value.name">
                  <br> Input in first controller is : {{value.name}}
              </div>
              <hr>
              <div ng-controller="SecondController">
                  Input in second controller is : {{value.name}}
              </div>
          </div>
        
          <script>
              var mainApp = angular.module("mainApp", []);
        
              mainApp.factory('Fact', function() {
                  return {
                      name: ''
                  };
              });
        
              mainApp.controller('FirstController',
                              function($scope, Fact) {
                  $scope.value = Fact;
              });
        
              mainApp.controller('SecondController',
                              function($scope, Fact) {
                  $scope.value = Fact;
              });
          </script>
      </body>
        
      </html>                    

      chevron_right

      
      

    • Output:



    My Personal Notes arrow_drop_up

    Check out this Author's contributed articles.

    If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

    Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.