juniorAngularJS

What is the purpose of $rootScope in AngularJS?

Updated Apr 28, 2026

Short answer

$rootScope is the top-level scope object in AngularJS that is available throughout the entire application. It allows data and functions to be shared between different controllers, directives, and components without passing them through multiple child scopes. Because every $scope in an AngularJS application inherits from $rootScope, values stored there can be accessed globally.

Deep explanation

In AngularJS, $scope is the object that connects controllers with views. Every controller typically has its own scope, and these scopes form a hierarchy. At the top of this hierarchy is $rootScope.

The $rootScope is created automatically by AngularJS when the application starts. All other scopes created using controllers, directives, or services are child scopes that inherit from it through JavaScript prototypal inheritance.

The relationship looks like this:

TypeScript
$rootScope
    |
    ├── Controller Scope
    |       |
    |       └── Child Scope
    |
    └── Another Controller Scope

If a value exists on $rootScope, child scopes can access it:

JavaScript
app.controller("UserController", function($scope, $rootScope) {
    $rootScope.appName = "My AngularJS App";


    $scope.username = "John";
});

The view connected to UserController can use:

HTML
<h1>{{ appName }}</h1>
<p>Welcome, {{ username }}</p>

AngularJS looks for appName first in the current $scope. If it does not find it there, it searches the parent scope and eventually reaches $rootScope.

Common uses of $rootScope

$rootScope is mainly used for application-wide data or events that need to be accessed from multiple parts of an application.

Examples include:

  • Storing global application settings.
  • Sharing user authentication information.
  • Broadcasting application-wide events.
  • Keeping common configuration values.

For example, an application might store the currently logged-in user:

JavaScript
app.controller("AuthController", function($rootScope) {
    $rootScope.currentUser = {
        name: "Alice",
        role: "Admin"
    };
});

Other controllers can access:

JavaScript
app.controller("DashboardController", function($scope, $rootScope) {
    $scope.user = $rootScope.currentUser;
});

$rootScope and events

AngularJS also provides event communication through $rootScope.

A controller can broadcast an event:

JavaScript
$rootScope.$broadcast("userLoggedIn", {
    username: "Alice"
});

Another scope can listen for it:

JavaScript
$scope.$on("userLoggedIn", function(event, data) {
    console.log(data.username);
});

$broadcast() sends an event downward from $rootScope to child scopes.

Why $rootScope should be used carefully

Although $rootScope provides a convenient way to share data, excessive use can make applications difficult to maintain.

Problems caused by overusing $rootScope include:

  • Creating hidden dependencies between controllers.
  • Making debugging harder because many parts of the application can modify the same data.
  • Increasing the chance of naming conflicts.
  • Making code less reusable and harder to test.

A better approach is often to use AngularJS services for shared application data:

JavaScript
app.service("UserService", function() {
    this.user = {
        name: "Alice"
    };
});

Services provide a cleaner way to manage shared state because they keep related logic in one place.

Real-world example

Imagine an AngularJS application with a login system. After a user logs in, multiple parts of the application need to know whether a user is authenticated.

A simple implementation could store the user on $rootScope:

JavaScript
app.controller("LoginController", function($scope, $rootScope) {


    $scope.login = function() {
        $rootScope.isLoggedIn = true;
        $rootScope.username = "John";
    };


});

The navigation bar can then display different options:

HTML
<div ng-if="isLoggedIn">
    Welcome, {{ username }}
    <button>Logout</button>
</div>


<div ng-if="!isLoggedIn">
    <button>Login</button>
</div>

Since both the login controller and navigation section have access to the same $rootScope, they can share authentication information.

In a larger application, however, this would usually be replaced with an AuthService that manages login state more cleanly.

Common mistakes

  • * Using `$rootScope` as a replacement for all services and shared state management.
  • * Storing large amounts of application data directly on `$rootScope`.
  • * Forgetting that every controller can modify `$rootScope` values, which can create unexpected behavior.
  • * Assuming `$rootScope` is available before AngularJS initializes the application.
  • * Creating too many global variables on `$rootScope` and making the application harder to maintain.
  • * Confusing `$rootScope` with `$scope`
  • `$rootScope` is the parent scope, while `$scope` is usually controller-specific.

Follow-up questions

  • What is the difference between $scope and $rootScope in AngularJS?
  • How does prototypal inheritance work with $rootScope and child scopes?
  • Why is using $rootScope considered a bad practice in many AngularJS applications?
  • How are $broadcast() and $emit() different in AngularJS?
  • How can you share data between controllers without using $rootScope?

More AngularJS interview questions

View all →