How to share data between controllers in AngularJS ?

Last Updated : 14 Feb, 2023

The task is to share data variables 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 a relation: Here, the sharing of data can be done in a few ways some of them are:

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

Example 1: This example demonstrates the basic sharing of the data between controllers in AngularJS by using the rootScope variable.

HTML

<!DOCTYPE html>
<html>

<head>
    <title>
        Angular JS sharing data using rootScope
    </title>
    <script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js">
    </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>

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 into other components (e.g. your controllers) using dependency injection. In this way we can define a shared variable in a factory, inject it into both controllers and thus bind scope variables in both controllers to this factory data.

Example 2: This example demonstrates the sharing of the data between controllers in AngularJS by using factory or service.