×

Html & Html5

The World's best Software Development Study Portal

AngularJS Scope


  • The Scope is an object that is specified as a binding part between the HTML (view) and the JavaScript (controller).

  • It plays a role of joining controller with the views.

  • It is available for both the view and the controller.

  • The scope is an object with the available properties and methods.

  • To make a controller in AngularJS, you have to pass the $scope object as an argument.

  • When adding properties to the $scope object in the controller, the view (HTML) gets access to these properties.

  • In the view, you do not use the prefix $scope, you just refer to a property name.

  • let us understand with an example




    	 <div ng-app="myApp" ng-controller="myCtrl">
    
           <input ng-model="name">
    
           <h5> {{carname}}</h5>
    
           </div>
           <script>
           var app = angular.module('myApp', []);
    
           app.controller('myCtrl', function($scope) {
           $scope.carname = "Volvo";
           });
           </script>


    Output
    Volvo




         <div ng-app="myApp" ng-controller="myCtrl">
    
         <input ng-model="name">
    
         <h1>welcomes you {{name}}</h1>
    
         </div>
    
         <script>
         var app = angular.module('myApp', []);
         app.controller('myCtrl', function($scope) {
         $scope.name = "IT training institute";
         });
         </script>
    
    Output

    Welcomes You {{name}}