AngularJS Scope


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

It is an object that holds the data and functions you want to use in both the controller and the view.

Anything you attach to $scope becomes accessible in your HTML using expressions like {{ }} or directives like ng-model.


How to Use the Scope?

When you create a controller in AngularJS, you pass the $scope object as an argument to that function. You can then define variables and methods on it:

Output :

Understanding the Scope

If we consider an AngularJS application to consist of the following parts:

  • View: The HTML content that the user sees.
  • Model: The data available for the current view.
  • Controller: The JavaScript function that creates, modifies, or manages the model.

Then, in AngularJS, the Scope is the Model.

The $scope is a JavaScript object containing properties and methods. It connects the controller to the view and ensures that any changes made in the controller are reflected in the view, and vice versa.

Output :

Know Your Scope

It is important to know which $scope you are dealing with at any given time in an AngularJS application.

In small applications, there may be only one scope — usually defined by a single controller — so scope management is simple.

However, in larger applications, different parts of the HTML DOM may be controlled by different controllers. Each controller creates its own child scope, which means data and functions in one scope may not be directly accessible from another.

Therefore, understanding which scope you're working with helps avoid issues like undefined variables, unwanted data binding behavior, or incorrect function calls.

Output :

Root Scope

Every AngularJS application has a special scope called $rootScope. It is created automatically on the HTML element that contains the ng-app directive.

The $rootScope is accessible throughout the entire application, making it useful for storing global variables or functions that multiple controllers need to access.

However, if a variable with the same name exists in both the current scope and the root scope, AngularJS will prioritize the variable in the current scope.

Output :

AngularJS Scope Example — Two-Way Data Binding using $scope


This program is a basic AngularJS application that demonstrates core concepts in a simple and user-friendly way.

It uses the $scope object to store and share data between the controller (JavaScript) and the view (HTML).

It implements two-way data binding using the ng-model directive — so when the user types in the input field, the value updates instantly on the screen.

This shows how AngularJS automatically synchronizes the model (JavaScript data) and the view (HTML UI) in real time, without writing additional JavaScript code.

Output :