In this tutorial, We will discuss $scope in Angular Js. $scope is javascript object that is used to build communication between view and controller. $scope is available to both view and controller. $scope is controller specific which means we can not access $scope object outside the controller.

After completing this tutorial you will be able to understand:

  • $scope in Angular Js.

$scope in Angular Js:

$scope is javascript object that is used to build communication between view and controller. $scope is available to both view and controller. $scope is controller specific which means we can not access $scope object outside the Controller.

$scope is an angular js built-in object which contains application data and methods. You can define modal data using the $scope and access them from the view(HTML DOM element).

$scope

$scope is the first parameter while defining a Controller.

Let’s see how to define a $scope in angular

var myApp = angular.module("myApp", []);


  

    myApp.controller("myController", function($scope) {

      $scope.Greeting = "Hello World..!!";

   

   });

We can display $scope data using expression, ng-bind or ng-model directive of angular js. Following example will show you how to $scope object works in Angular Js.

<!DOCTYPE html>

<html >

<head>

    <title>AngualrJS $scope Example</title>

  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular.min.js"></script>

</head>

<body ng-app="myApp">

    <div ng-controller="myController">

        Message: <br />

        {{Greeting}}<br />

        <span ng-bind="Greeting"></span> <br />

        <input type="text" ng-model="Greeting" />

    </div>

    <script>

        var myApp = angular.module('myApp', []);




        myApp.controller('myController', function ($scope) {

            $scope.Greeting = "Hello World!";       

        });

    </script>

</body>

</html>

Click here to see the demo.

Scope Inheritance:

As we discussed scope are Controller specific. In case of the nested controller, the child controller can access the scope of its parent controller.  That means child controller can access properties of parent controller but parent controller cannot access the properties defined in child controller scope.

Let’s see an example of a nested controller.

<html>

   <head>

      <title>Angular JS Nested Controller</title>

        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular.min.js"></script>

   </head>

  

   <body>

      <h2>Angular JS Nested Controller</h2>

     

      <div ng-app = "myApp" ng-controller = "parentController">

         <p>{{message}} <br/> {{level}} </p>

        

         <div ng-controller = "childController">

            <p>{{message}} <br/> {{level}} </p>

         </div>  

</div>

    <script>

         var myApp = angular.module("myApp", []);

        

        myApp.controller("parentController", function($scope) {

            $scope.message = "In Parent Controller";

            $scope.level = "Parent";

         });

        

         myApp.controller("childController", function($scope) {

            $scope.message = "In Child Controller";

         

         });

      </script>     

   </body>

</html>

Click here to see the demo.

View more :

Conclusion:

I hope you understand this tutorial about $scope in Angular Js. I would appreciate your Feedback, Comments, and Suggestions.

Thank You.

Leave a Comment