AngularJS Scope: The scope syncs the HTML and the JavaScript. This is an object with the accessible properties and methods. It is accessible to both the view and the controller, which passes the object in the $scope as an argument. As your application first begins, AngularJS generates the “$rootScope.”
As the scope searches the DOM, it finds and processes directives, some of which (such as “ng-controller”) request new scopes. Once the compilation is complete, AngularJS will have produced a scope tree replica of the DOM tree. Separate scopes allow for different parts of the view to separate their presentations of the data model.
AngularJS Scope Examples
<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
<div ng-app="example App' ng-controller="exampleCtrl">
<h1>{{state}}</h1>
</div>
</script>
var app = angular.module(example App', []);
app.controller('exampleCtrl', function($scope) {
$scope.state = "California";
});
</script>
</body>
</html>
Angular JS Scope Output
Scope Inheritance
In Angular JS, the scope is the controller- specific. By defining the nested controllers the child controller will inherit from its parent controller.
Scope Inheritance Example
<html>
<head>
<title>Angular JS Forms</title>
</head>
<body>
<h2>AngularJS Sample Application</h2>
<div ng-app = "mainApp" ng-controller = "RoundController">
<p>{{message}} <br/> {{type}} </p>
<div ng-controller = "circleController">
<p>{{message}} <br/> {{type}} </p>
</div>
<div ng-controller = "squareController">
<p>{{message}} <br/> {{type}} </p>
</div>
</div>
<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script>
var mainApp = angular.module("mainApp", []);
mainApp.controller("RoundController", function($scope) {
$scope.message = "In Round controller";
$scope.type = "Shape";
});
mainApp.controller("circleController", function($scope) {
$scope.message = "In circle controller";
});
mainApp.controller("squareController", function($scope) {
$scope.message = "In square controller";
$scope.type = "Square";
});
</script>
</body>
</html>
