--- title: "Difference between $rootScope and $scope in AngularJS." description: "Difference between $rootScope and $scope in AngularJS." author: "Revati S Misra" published: 2024-06-17 updated: 2024-06-17 canonical: https://www.mindstick.com/forum/160755/difference-between-rootscope-and-scope-in-angularjs category: "angular js" tags: ["javascript", "angular js", "angularjs scope"] reading_time: 2 minutes --- # Difference between $rootScope and $scope in AngularJS. [Difference](https://www.mindstick.com/articles/157114/good-news-or-bad-news-and-the-difference-is) between $rootScope and $[scope in AngularJS](https://www.mindstick.com/forum/160747/this-vs-scope-in-angularjs-controllers). ## Replies ### Reply by Ashutosh Patel ### $rootScope vs $scope In AngularJS, both $rootScope and $[scope](https://www.mindstick.com/interview/372/what-are-the-different-scopes-for-java-variables) are important components for managing data and interactions in applications. Here are some of the differences and how to use them, #### $scope ## Local Scope **$scope** is a local object for every controller in AngularJS. When you define a controller in AngularJS, you can add **$scope**. ```javascript angular.module('myApp', []) .controller('MyController', ['$scope', function($scope) { $scope.message = 'Hello, AngularJS!'; }]); ``` ## Scope Inheritance **$scope** objects form a hierarchy that has a hierarchy based on **DOM structure**. **Child** controllers created in the scope of the **parent** controller inherit the parent's **$scope**. This property allows child managers to access properties and roles defined in parent scopes. ## Controller-specific Each controller has its own **$scope**, which means that any property or function defined in **$scope** is accessible only in the scope of that controller and its children. #### $rootScope ## Global Scope **$rootScope** is the **parent** of all **$scope** objects created in the AngularJS application. It is a global object that can be accessed anywhere in the application. ```javascript angular.module('myApp', []) .run(['$rootScope', function($rootScope) { $rootScope.appName = 'My AngularJS Application'; }]); ``` ## Event Communication **$rootScope** is useful for creating events and listening for events across scopes. It provides a means of communication between different controllers or components connected directly through scope descendants. ## Careful Usage Although $rootScope is powerful, it should be used sparingly to avoid polluting the global namespace and causing potential conflicts or performance issues ## Example- ```javascript ng-Root Scope

Root Scope color is:

{{color}}

Scope color is :

{{color}}

Root Scope color again is :

{{color}}

``` ## Output- ```plaintext Root Scope color is: green Scope color is : yellow Root Scope color again is : green ``` **Also, Read:** [How to use the $http service in my AngularJS?](https://www.mindstick.com/forum/160660/how-to-use-the-http-service-in-my-angularjs) --- Original Source: https://www.mindstick.com/forum/160755/difference-between-rootscope-and-scope-in-angularjs Copyright © MindStick Software Pvt. Ltd. This Markdown version is provided for developers, AI systems, and offline reading.