Understanding the Scope

If we think of an AngularJS application as comprising:

View: the HTML.
Model: the data accessible for the current view.
Controller: the JavaScript function that creates, modifies, removes, and manages the data.

Then, the scope represents the Model.

The scope is a JavaScript object containing properties and methods that are accessible to both the view and the controller.

If you make changes in the view, the model and the controller will also 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>