What is the difference between $scope.$root and $rootScope?

Question

I see in controllers that $scope has $root, what is this? How is it different from $rootScope which can be injected in the controller?

Answer 1

$rootScope var which points to the parent of all the scopes and can be injected everywhere. All other scopes are children of the $rootScope. They are created via the $new method of the $rootScope thus every scope inherits from the $rootScope.

In the angular source in the definition of the Scope constructor there is a line :

 function Scope() {
   this.$id = nextUid();
 ...
 this['this'] = this.$root =  this;
 ...

It seems the $root var is just a placeholder for this of the first scope created - $rootScope.

Next there is this piece of code in the $new method:

  $new: function(isolate) {
      ...

    if (isolate) {
      child = new Scope();
      child.$root = this.$root;
   ...
   return child;

So the $root var of every scope child of $rootScope is a reference to $rootScope. And all the children of those children will get the same reference to $rootScope

In my opinion it is better to use the $rootScope via dependency injection because it is an explicit and overall more frequently used way of referring to the $rootScope

Answer 2

As mentioned before, $scope.$root holds a reference to the $rootScope.

Unfortunately, there IS a difference between using $scope.$root and using $rootScope:

1. When $scope IS the root, its $root property is null
2. $scope.$root is only assigned on isolate scopes: https://github.com/angular/angular.js/blob/v1.3.6/src/ng/rootScope.js#L204

So you might have a situation where $scope.$root is null. Better use $rootScope instead...