Google News
logo
AngularJS Scopes
The $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. 

The view can display $scope data using an expression, ng-model, or ng-bind directive, as shown below.
How to Use the Scopes
To make a controller in AngularJS, you have to pass the $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>
Output :
AngularJS $rootScope
The angularJS is a single $rootScope applications which is the scope created on the HTML element that contains the ng-app directive.. The rootScope is available in the entire application.
<!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>
Output :