$scopes in AngularJs

The two-way binding, angular’s key point is indeed implemented through $scope variables. $scope variables when called in DOM, bind the data received from model and also reflect the changes done on the view back to the model! That’s what two-way  data binding is!  Expressions written in {{expression}} are even hence, modifiable that’s is there value changes when there is change in model through controller or view.

The only difference with $rootScope being that $rootScope variables are accessible via all the controllers. And $scope variables are infact child of $rootScope. And before it becomes too much to digest, let’s take a look at the code, it explanation and simple diagram following it to make it crystal clear to you!



<div ng-controller="MyController">
  Your name:
    <input type="text" ng-model="name">
    <button ng-click='printYourName()'></button>

angular.module('scopeExample', [])

.controller('MyController', ['$scope', function($scope)


     $scope.name= "";

     $scope.printYourName= function()





Here, the value will be binded to the ng-model: name here that is whenever their is update in the value, ‘name’ model automatically takes in the updated value. And that value change can be used through {{nameVar}} in the front-end where DOM would reflect back all the changes associated.


Hope, it would have made you clear with the  concept. If you still have an any doubt, leave it in the comment section below. Our team would revert back within 24 hours.

Do Follow our Facebook page https://www.facebook.com/lovebeingengineer/.

Similar Blogs:

Top 10 AngularJs Interview Questions


Forms in AngularJs


Templates And Expressions in AngularJs


Services in AngularJs


Controllers in AngularJs

Understanding Two-Way Data Binding in AngularJs


Journey of Angular


Dependency Injection in AngularJs!



Tagged : /

Leave a Reply