How AngularJS prefixes $ and $$ are used? Last Updated : 31 Jul, 2020 Improve Improve Like Article Like Save Share Report $: The $ in AngularJs is a built-in object.It contains application data and methods. The scope($) acts as a link between controller and view. Scope($) Inside the controller function the properties and the methods to the scope($) can be attached. Expression, ng-model, or ng-bind directive can be used to display the scope data in the view. <!DOCTYPE html> <html> <head> <script src= "https://ajax.googleapis.com/ajax/libs/angularjs/1.3.16/angular.min.js"> </script> </head> <body ng-app="Ng"> <h1>$scope</h1> <div ng-controller="myController"> Message: <br /> {{message}}<br /> <span ng-bind="message"></span> <br /> <input type="text" ng-model="message" /> </div> <script> var ngApp = angular.module('Ng', []); ngApp.controller('myController', function ($scope) { $scope.message = "GFG!"; }); </script> </body> </html> Output: Example 2: <!DOCTYPE html> <html> <script src= "https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"> </script> <body> <div ng-app="myApp" ng-controller="myCtrl"> First Name: <input type="text" ng-model="firstName" /><br /> Middle Name: <input type="text" ng-model="middleName" /><br /> Last Name: <input type="text" ng-model="lastName" /><br /> <br /> Full Name: {{firstName +middleName+ " " + lastName}} </div> <script> var app = angular.module("myApp", []); app.controller("myCtrl", function ($scope) { $scope.firstName = "Geeks"; $scope.middleName = "for"; $scope.lastName = "Geeks"; }); </script> </body> </html> Output: $rootScope: The AngularJS application consists of a single $rootScope. All the other $scope are child objects.$rootscope has properties and methods attached to it which will be available be to all the controllers. Method Description $new It is used to create new Child Scope $watch It is used to Register a callback which is to be executed whenever the model property changes. $watchGroup It is used to register a callback which is to be executed whenever model properties changes. We specify an array of properties in this. $watchCollection It is used to register a callback which is to be executed whenever model object or array property changes. $digest It processes all of the watchers of the current scope and its children. $destroy Remove the current scope from parent scope. $eval Execute expressions on the current scope. $emit It is used to dispatch the specified event upwards till $rootScope. $broadcast It is used to dispatch the specified event downwards till child Scope. Example 3: <!DOCTYPE html> <html> <head> <script src= "https://ajax.googleapis.com/ajax/libs/angularjs/1.3.16/angular.min.js"> </script> </head> <body ng-app="Ng"> <h1> $watch </h1> <div ng-controller="Controller"> Enter Message: <input type="text" ng-model="message" /> <br /> New : {{newMessage}} <br /> Old : {{oldMessage}} </div> <script> var ngApp = angular.module('Ng', []); ngApp.controller('Controller', function ($scope) { $scope.message = "GFG!"; $scope.$watch('message', function (newValue, oldValue) { $scope.newMessage = newValue; $scope.oldMessage = oldValue; }); }); </script> </body> </html> Output: $$ $$ in this are treated as private variables. We use $$ to avoid the internal variable conflicts and not to expose for external use. Some of them are listed below:- $$observers, $$watchers, $$childHead, $$childTail, $$ChildScope etc. Method Description $$watchers It contains all of the watches associated with the scope $$asyncQueue It is a async task queue.It is consumed on every digest $$postDigest(fn) It executes fn after the next digest cycle. $$destroyed It destroys the scope. Syntax: $$('.selector'); or element.all(by.css('.selector')); A common ways of communication between modules of application, with the help of core AngularJS functionality is establishing a connection between controllers using $parent, $$childHead, $$nextSibling. Example: <!DOCTYPE html> <html> <script src= "https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"> </script> <body> <div ng-app="myApp" ng-controller="myCtrl"> First Name: <input type="text" ng-model="firstName" /><br /> Middle Name: <input type="text" ng-model="middleName" /><br /> Last Name: <input type="text" ng-model="lastName" /><br /> <br /> Full Name: {{firstName +middleName+ " " + lastName}} </div> <script> var app = angular.module("myApp", []); app.controller("myCtrl", function ($scope) { $$scope.firstName = "Geeks"; $$scope.middleName = "for"; $$scope.lastName = "Geeks"; }); </script> </body> </html> Output: The above output will be produced when we add $$, since, it acts as private object. So, to prevent accidental name collisions while writing your code angular prefixes public objects with $ and private objects with $$. Like Article Suggest improvement Next How to use $scope.$apply() in AngularJS ? Share your thoughts in the comments Add Your Comment Please Login to comment...