What is scope in Angular Js

Angular Js Scope

The scope is the binding part between the HTML (view) and the JavaScript (controller).

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

The scope is available for both the view and the controller.

How to Use Scope ?

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

<h1>{{carname}}</h1>

</div>

<script>

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

app.controller('myCtrl', function($scope) {
    $scope.carname = "Volvo";
});

</script>

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 propertyname, like {{carname}}.

Understanding the Scope

If we consider an AngularJS application to consist of:

• View, which is the HTML.
• Model, which is the data available for the current view.
• Controller, which is the JavaScript function that makes/changes/removes/controls the data.

Then the scope is the Model.

The scope is a JavaScript object with properties and methods, which are available for both the view and the controller.

Example

If you make changes in the view, the model and the controller will be updated:

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

<input ng-model="name">

<h1>My name is {{name}}</h1>

</div>

<script>

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

app.controller('myCtrl', function($scope) {
    $scope.name = "John Doe";
});

</script>

                                                  Source: https://www.w3schools.com/