Scope in AngularJS:

The $scope in an AngularJS is a built-in object, which contains application data and methods. You can create properties to a $scope object inside a controller function and assign a value or function to it.

The $scope is glue between a controller and view (HTML). It transfers data from the controller to view and vice-versa.

As we have seen in the controller section, we can attach properties and methods to the $scope object inside controller function. The view can display $scope data using an expression, ng-model, or ng-bind directive, as shown below.

Example: $scope

<!DOCTYPE html>
<html >
<head>
    <title>AngualrJS $scope object</title>
    <script src="~/Scripts/angular.js"></script>
</head>
<body ng-app="myNgApp">
    <div ng-controller="myController">
        Message: <br />
        {{message}}<br />
        <span ng-bind="message"></span> <br />
        <input type="text" ng-model="message" /> 
    </div>
    <script>
        var ngApp = angular.module('myNgApp', []);

        ngApp.controller('myController', function ($scope) {
            $scope.message = "Hello World!";        
        });
    </script>
</body>
</html>

 
Try it 

AngularJS creates and injects a different $scope object to each controller in an application. So, the data and methods attached to $scope inside one controller cannot be accessed in another controller. With the nested controller, child controller will inherit the parent controller's scope object. Therefore, child controller can access properties added in parent controller but parent controller cannot access properties added in child controller.

Note: The ng-model directive is used for two-way data binding. It transfers the data from controller to view and vice-versa. An expression and ng-bind directive transfers data from controller to view but not vice-versa.

$rootScope:

An AngularJS application has a single $rootScope. All the other $scope objects are child objects.

The properties and methods attached to $rootScope will be available to all the controllers.

The following example demonstrates the $rootScope and $scope object.

Example: $rootScope & $scope

<!DOCTYPE html>
<html>
<head>
    <title>AngualrJS Controller</title>
    <script src="~/Scripts/angular.js"></script>
</head>
<body ng-app="myNgApp">
    <div ng-controller="parentController">
        Controller Name: {{controllerName}} <br />
        Message: {{message}} <br />
        <div style="margin:10px 0 10px 20px;" ng-controller="childController">
            Controller Name: {{controllerName}} <br />
            Message: {{message}} <br />
        </div>
    </div>
    <div  ng-controller="siblingController">
        Controller Name: {{controllerName}} <br />
        Message: {{message}} <br />
    </div>
    <script>
        var ngApp = angular.module('myNgApp', []);

        ngApp.controller('parentController', function ($scope, $rootScope) {
            $scope.controllerName = "parentController";
            $rootScope.message = "Hello World!";
        });

        ngApp.controller('childController', function ($scope) {
            $scope.controllerName = "childController";
        });

        ngApp.controller('siblingController', function ($scope) {

        });
    </script>
</body>
</html>

 
Try it 

Result:


Controller Name: parentController
Message: Hello World!
    Controller Name: childController
    Message: Hello World!
Controller Name:
Message: Hello World!

As per the above example, properties added in $rootScope are available in all the controllers.

The $scope object contains various methods. The following table lists important methods of $scope object.

Method	Description
$new()	Creates new child scope.
$watch()	Register a callback to be executed whenever model property changes.
$watchGroup()	Register a callback to be executed whenever model properties changes. Here, specify an array of properties to be tracked.
$watchCollection()	Register a callback to be executed whenever model object or array property changes.
$digest()	Processes all of the watchers of the current scope and its children.Ã‚Â
$destroy()	Removes the current scope (and all of its children) from the parent scope.
$eval()	Executes the expression on the current scope and returns the result.
$apply()	Executes an expression in angular outside the angular framework.
$on()	Register a callback for an event.
$emit()	Dispatches the specified event upwards till $rootScope.
$broadcast()	Dispatches the specified event downwards to all child scopes.

$watch:

Angular scope object includes $watch event which will be raised whenever a model property is changed.

Example:$watch()

<!DOCTYPE html>
<html>
<head>
    <script src="~/Scripts/angular.js"></script>
</head>
<body ng-app="myNgApp">
    <div ng-controller="myController">
        Enter Message: <input type="text" ng-model="message" /> <br />
        New Message: {{newMessage}} <br />
        Old Message: {{oldMessage}} 
    </div>
    <script>
        var ngApp = angular.module('myNgApp', []);
    
        ngApp.controller('myController', function ($scope) {
            $scope.message = "Hello World!";

            $scope.$watch('message', function (newValue, oldValue) {
                $scope.newMessage = newValue;
                $scope.oldMessage = oldValue;
            });
        });
    </script>
</body>
</html>
            
             
Try it 

As you can see in the above example, $watch registers a callback, which will get called whenever the specified model property "message" changes.