Scope
- Scope is the binding part between the HTML (UI) and the Javascript (the Controller).
- Scope object contains the available properties and methods.
- Scope is accessible in both HTML and Javascript.
Scope Example
<div ng-app="myApp" ng-controller="myCtrl"><h1>{{ name }}</h1></div><script>var app = angular.module('myApp', []);app.controller('myCtrl', function($scope) { $scope.name = "Coderz Heaven";});</script> |
Root Scope
- Root Scope is created on the HTML element that contains the ng-app directive
- Root Scope is available for the entire application
- If a variable is available in both rootScope and scope, then the application uses one in the current scope
Root Scope Example
<body ng-app="myApp"><p>The rootScope's name :</p><h1>{{ name }}</h1><div ng-controller="myCtrl"> <p>Name is : {{ name }}</p></div><p>The rootScope name is still {{ name }}</p><script>var app = angular.module('myApp', []);app.run(function($rootScope) { $rootScope.name = 'Coderz';});app.controller('myCtrl', function($scope) { $scope.name = "Heaven";});</script></body> |
So for the above example the final value for variable “name” is “Heaven” since it is in the current scope.