$scope in AngularJS is an object which refers to an application model. It is an object that binds view (DOM element) with the controller. In controller, model data is accessed via $scope object. As we know, AngularJS supports MV* pattern, $scope object becomes the model of MV*.
The $scope is a special JavaScript object. Both View and controller have access to the scope object. It can be used for communication between view and controller. Scope object contains both data and functions. Every AngularJS application has a $rootScope that is the top most scope created on the DOM element which contains the ng-app directive. It can watch expressions and propagate events.
Characteristics of scope object
- It provides the APIs to observe model (example $watch).
- It can be nested, so that it limits access to the properties. Nested scopes are either child scope or isolated scope.
- It provides the APIs to propagate any model changes from the outside of "Angular realm" (example $apply).
- It provides context against the expression to be evaluated.
Example
In the following example, I have created three controllers: parentController, firstChildControllerand secondChildController and defined one property in each controller; parentName, level1name, and level2name respectively. Here controllers are attached with DOM elements in a nested way.
As described above, AngularJS evaluates expressions with current associated scope and then it searches in parent scope and so on until the root scope is reached.
TestAngularJs.html
<!DOCTYPE html>
<html>
<head>
<title>AngularJS Test Application</title>
<script src="angular.js"></script>
</head>
<body ng-app="myapp">
<h2>AngularJS - Scope Inheritance</h2>
<div ng-controller="ParentController">
<div ng-controller="firstChildController">
<div ng-controller="secondChildController">
<p>Parent Name:{{parentName}}</p>
<p>First Child Name:{{level1name}}</p>
<p>Second Child Name:{{level2name}}</p>
</div>
</div>
</div>
<script>
var app = angular.module("myapp", []);
app.controller("ParentController", function($scope)
{
$scope.parentName = "Parent Controller";
});
app.controller("firstChildController", function($scope)
{
$scope.level1name = "First Child Controller";
});
app.controller("secondChildController", function($scope)
{
$scope.level2name = "Second Child Controller";
});
</script>
</body>
</html>
