AngularJS $scope Hierarchy

Here in this article, we will discuss about AngularJS $scope Hierarchy. One of these important concepts is scopes. In an AngularJS application, the controller and view share an object called a scope; this object is at the core of its amazing two-way data binding. The controller sets properties on the scope, and the view binds to those properties. AngularJS takes responsibility for keeping the two in sync. A controller is responsible for setting model properties and functions. This can be done only through $scope. Whatever function or model you apply in View (html file), that is accessed in controller using scope. Only methods defined on this $scope object are accessible from the HTML/view. Example – from ng-click, filters, etc. AngularJS extended the raw JavaScript objects with custom methods and properties. These objects, also known as scope in AngularJS terms, work as a glue between the view and other parts ( directives, controllers and services ) inside the AngularJS application. For Example: Below is the controller.js code app.controller(‘MySimpleController’, function($scope) { $scope.message = ‘Hello Raj!’; }); Below is the html part

{{message}}

In this example, the controller sets a property, message, on the scope. When AngularJS processes the ng-model directive in the view, it starts listening for change events on that input element and on the scope’s message property. If the value of message changes, the input will update, and if the input changes, message updates.

Post navigation

About Bijay Kumar

I am Bijay from Odisha, India. Currently working in my own venture TSInfo Technologies in Bangalore, India. I am Microsoft Office Servers and Services (SharePoint) MVP (5 times). I works in SharePoint 2016/2013/2010, SharePoint Online Office 365 etc. Check out My MVP Profile.. I also run popular SharePoint web site SharePointSky.com