AngularJS (55 Blogs) Become a Certified Professional

All you Need to Know about Angular JS watch Function

Last updated on Apr 05,2024 6.1K Views

The Angular JS $scope functions are some of the main functions. In this article, we will discuss the Angular JS watch function in the following order:


What is the angular JS watch function?

The angular JS $watch function is used to watch the scope object. The $watch keep an eye on the variable and as the value of the variable changes the angular JS $what runs a function. This function takes two arguments one is the new value and another parameter is the old value.

angular js watch


How to use angular JS watch function?

Let’s take a simple example of what the watch function in angular JS exactly does. So in our angular JS program we created two files there index.js is responsible for frontend and the app.js is responsible for handling backend. Here we make a simple program with a form and this form has an input field. When we give the name into the input field the output message shows us the old value and the new value.

If you wish to learn more about Angular framework, then check out our Angular Course which comes with instructor-led live training and real-life project experience. This training will help you understand Angular in-depth and help you achieve mastery over the subject.



Our index.html page has an angular app with the name ngWatchApp and a controller with the name watchController. Then we create a form with an input field name and the value of that input field we print in h1 tag and the message prints in <p> tag.

&amp;lt;!DOCTYPE html&amp;gt;
&amp;lt;html lang="en"&amp;gt;
    &amp;lt;meta charset="UTF-8"&amp;gt;
    &amp;lt;title&amp;gt;Angular watch example&amp;lt;/title&amp;gt;
&amp;lt;body ng-app="ngWatchApp"&amp;gt;
&amp;lt;div ng-controller="watchController"&amp;gt;
        &amp;lt;label&amp;gt;Enter you name&amp;lt;/label&amp;gt;
        &amp;lt;input type="text" ng-model="name"&amp;gt;
    &amp;lt;h1&amp;gt;Hello {{name}}&amp;lt;/h1&amp;gt;
&amp;lt;!--angular js library--&amp;gt;
&amp;lt;script src="assets/js/angular.js"&amp;gt;&amp;lt;/script&amp;gt;
&amp;lt;script src="app.js"&amp;gt;&amp;lt;/script&amp;gt;

Find out our UI UX Design Course in Top Cities

UI UX Designer Course in ChennaiUI UX Design Course in Mumbai
UI UX Design Course in PuneUI UX Design Course in Ahmedabad
UI UX Design Course in BangaloreUI UX Design Course in Delhi

JavaScript Code

In the app.js we created an app with the name ngWatchApp and a controller with the name watchController. Next, we define the two variable in scope with the name, name, and message and in the watch function we pass two parameters, one is the name of the field that is affected when change and other is the function that also has two parameters, new value, and old value. Finally, we append two values in the message variable and that the message variable is shown on the index.html page.

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

app.controller('watchController', function($scope) {

// adding scope variable
$ = "";
$scope.message = "";

// add watch with name field
$scope.$watch("name", function (newValue='', oldValue='') {
$scope.message = `new valus is ${newValue} and old value is ${oldValue}`;



Whenever we watch a function, then this function called multiple times according to digest. Whenever the code executes, AngularJS passes-in the current $scope reference as the first argument. Not only does it mean that we can reference the proper scope from within the function body it also means that we can watch any function that expects a $scope reference.

This is how we can use angular js watch() function in applications to watch $scope variable changes. There are some other things that work with $watch these are $digest() function iterates through all the watches in the $scope object when $digest() iterates over the watches, it calls the value function for each watch. The $scope.$apply() function takes a function as a parameter which is executed, and after that $scope.$digest() is called internally.

Turn your passion for design into a career with our UI UX Design Certification Course.

Build visually stunning and responsive mobile app UIs with a Flutter Course Online.

Got a question for us? Please mention it in the comments section of ”Angular JS Watch Function” and We will get back to you.

Upcoming Batches For Angular Certification Course Online
Course NameDateDetails
Angular Certification Course Online

Class Starts on 27th July,2024

27th July

SAT&SUN (Weekend Batch)
View Details
Angular Certification Course Online

Class Starts on 31st August,2024

31st August

SAT&SUN (Weekend Batch)
View Details

Join the discussion

Browse Categories

webinar_success Thank you for registering Join Edureka Meetup community for 100+ Free Webinars each month JOIN MEETUP GROUP

Subscribe to our Newsletter, and get personalized recommendations.

image not found!
image not found!

All you Need to Know about Angular JS watch Function