$scope
in an AngularJS is a built-in object, which contains application data and methods. The Scope is an object that is specified as a binding part between the HTML (view) and the JavaScript (controller).  The scope is available for both the view and the controller. $scope
data using an expression, ng-model
, or ng-bind
directive, as shown below.$scope
object as an argument.<!DOCTYPE html>
<html>
<head>
<title>AngularJS Scopes</title>
<script type="text/javascript" src="js/angular.min.js"></script>
</head>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<h2>{{website}}</h2>
</div>
<script type="text/javascript">
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.website = "www.freetimelearning.com";
});
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>AngularJS $rootscope</title>
<script type="text/javascript" src="js/angular.min.js"></script>
</head>
<body ng-app="myNgApp">
<div ng-controller="parentController">
Website Name: {{controllerName}} <br />
Website URL : {{message}} <br />
<div style="margin:10px 0px 10px 20px;" ng-controller="childController">
Website Name: {{controllerName}} <br />
Website URL: {{message}} <br />
</div>
</div>
<div ng-controller="siblingController">
Website Name: {{controllerName}} <br />
Website URL : {{message}} <br />
</div>
<script type="text/javascript">
var ngApp = angular.module('myNgApp', []);
ngApp.controller('parentController', function ($scope, $rootScope) {
$scope.controllerName = "Free Time Learning";
$rootScope.message = "www.freetimelearn.com'";
});
ngApp.controller('childController', function ($scope) {
$scope.controllerName = "Free Time Learn";
});
ngApp.controller('siblingController', function ($scope) {
});
</script>
</body>
</html>