Difference between $scope and $rootScope

Can anyone explain the difference between $scope and $rootScope?

I think

$scope:

We can get ng-model properties in particular controller from the particular page by using this.

$rootScope

We can get all ng-model properties in any controller from any page by using this.

Is this correct? Or anything else?

Solution 1:

"$rootScope” is a parent object of all “$scope” angular objects created in a web page.

enter image description here

$scope is created with ng-controller while $rootscope is created with ng-app.

enter image description here

Solution 2:

The main difference is the availability of the property assigned with the object. A property assigned with $scope cannot be used outside the controller in which it is defined whereas a property assigned with $rootScope can be used anywhere.

Example: If in the example below you replace $rootScope with $scope the department property will not be populated from the first controller in the second one

angular.module('example', [])
  .controller('GreetController', ['$scope', '$rootScope',
    function($scope, $rootScope) {
      $scope.name = 'World';
      $rootScope.department = 'Angular';
    }
  ])
  .controller('ListController', ['$scope',
    function($scope) {
      $scope.names = ['Igor', 'Misko', 'Vojta'];
    }
  ]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<body ng-app="example">
  <div class="show-scope-demo">
    <div ng-controller="GreetController">
      Hello {{name}}!
    </div>
    <div ng-controller="ListController">
      <ol>
        <li ng-repeat="name in names">{{name}} from {{department}}</li>
      </ol>
    </div>
  </div>
</body>

Difference between $scope and $rootScope

$scope:

$rootScope

Solution 1:

Solution 2:

Related

Recent Posts