An  AngularJS application uses an object called $scope which is shared between controller and view.  This object holds the Model data that is passed to the View and acts as a glue between Controller and View. In this blog we will dive deeper into the working of $scope object.

Let's start with an example to see a basic scope in action:

View definition:

<div ng-controller="BasicController">
  <input ng-model="message">
  <span>{{message}}</span>
</div>

Controller definition:

app.controller('BasicController', function($scope) {
  $scope.message = 'Hello , Let us learn about scope object !';
});

In the above example, the controller sets a property "message" on the scope object. On running the above code snippets we get the below result in browser.

As can be seen because of two way binding if the value of message changes, the input will be updated and similarly  if the input is changed message will be  updated.

Let's look at another example to understand more about  scope boundaries:

View definition:

<div ng-controller="ScopeOneController">
  <input ng-model="message">
  <span>{{message}}</span>
</div>
<div ng-controller="ScopeTwoController">
  <input ng-model="message">
  <span>{{message}}</span>
</div>

Controller definition:

app.controller('ScopeOneController', function($scope) {
  $scope.message = 'I am from scope one !';
});

app.controller('ScopeTwoController', function($scope) {
  $scope.message = 'I am from scope two !';
});

We get the below result in browser on running the above code sample.

It is obvious from the output that since scopes are different so are the results.

Let us now go through an example to understand interaction between parent and child scopes.

Following is a code snippet for view , we can see the child nested inside the parent:

<div ng-controller="ParentController">
    <h1>{{ message }}</h1>
    <div ng-controller="ChildController">
        <h1>{{ message }}</h1>
    </div>
</div>

Following is the definition for controller , note that we have defined nothing on scope object for child controller:

app.controller("ParentController", [ '$scope', function($scope){
    $scope.message = "I am from parent.";
 }]);

app.controller("ChildController", [ '$scope', function($scope){
    //Nothing defined on scope object
}]);

We get the below result in browser on running the above code sample.

From the above result we can see that child scopes can access properties of there parents scope. Now let us make a small tweak in the child controller definition as below:

app.controller("ChildController", [ '$scope', function($scope){
       $scope.message = "I am from child.";
}]);

On running the updated code snippet we get the below result in browser:

We can clearly see in the above result that parent's scope value is hidden by the child. In fact children can access/modify parent scope but children's scopes are not accessible to the parent. To access a parent's scope we can make use of the below variable:

$scope.$parent

Key points regarding $scope object:

1) $scope acts as a glue between  the view and controller

2) $scope is plain JavaScript object

3) $scope can be seen as a view-model in AngularJS

4) Both view and model can access the $scope object

5) $scope gets modified when View changes and vice versa

6) $scope holds data and functions from the controller that should be displayed and executed in the view

7) $scope objects are created with prototypal inheritance

8) A new $scope is created for each controller

9) $scope objects have access to their parent's $scope object

10) $rootScope is the top most scope and an angular app can have only one $rootScope

Best practices for working with $scope in AngularJS:

1) Since $rootScope is a global valriable we shouldkeep it free of variables

2) We should avoid attaching functions to $scope for better maintainability

3) We should use the scope option to create isolate scopes while  making reusable components

4) We should define data objects for storing primitive types

Summary

Even though scope is a simple JavaScript object it is a core feature of  AngularJS . A good working knowledge of scope lets you organize large applications efficiently. Hope this article helps you in understanding $scope object better. For more details you  may check at the following official link: https://docs.angularjs.org/guide/scope