$scopes

$watch helps to listen for $scope changes

$watch

$watch(watchExpression, [listener], [objectEquality]);

function MyController($scope) { $scope.anyvar = 6; $scope.$watch('anyvar', function() { // this is listener method which will be call if it finds the changes alert('hey, anyvar has changed!'); }); $scope.buttonClicked = function() { $scope.anyvar = 4; // This will trigger $watch expression to kick in }; }

var obj1 = { key1: "value1", key2: "value2", key3: {skey: "svalue", skey2: "svalue2"} } var obj2 = { key2: "value2", key1: "value1", key3: {skey2: "svalue2", skey: "svalue",} } angular.equals(obj1, obj2) // returns true











$.ajax({ url:"abc.do", type:"post", success: function() { scope.anyvar++; scope.$apply(); // This line will do the magic } });

$.ajax({ url:"abc.do", type:"post", success: function() { scope.$apply(function(){ scope.anyvar++; }); } });

Its a basic question that comes to most of the developers mind while learning angular js. And its very obvious that it came to my mind too as I come from the same background.So the first word I heard while trying to know about this is "".Yes angular js uses dirty checking for data binding. Now what is Dirty checking?This basically means that if the value gets dirty or changed from what it has maintained then events associated gets executed. Angular js basically remembers the old value and compares with new one and get to know that whether the change event is to be executed or not. We call $apply() method in angular js which performs a $digest after evaluating the expression. In the $digest phase the scope examines all of the $watch expressions and compares them with the previous value. So digest basically is the cycle that does dirty checking.Next question that arises is "What exactly is done when you call $digest to do dirty checking?"As far as I know $digest evaluates watch expressions on all the variables monitored by all theand compares with the old value and fires listeners accordingly.You can also create your own. Thus,helps you to execute few lines of code when any variable attached to the $scope gets changed. It is rarely used, but sometimes is helpful.Below is the syntax of watch expression.This registers a listener callback to be executed whenever the watchExpression changes.For instance, if you want to run some code each time 'anyvar' changes, you could do the following:Here third parameter [objectEquality] allows us to force angular to compare two object by angular.equals method. By default it compares the references by using !== operator. angular.equals does a deep comparison and does not depend on the order of the keys.Everything in Angular JS where binding is done likeetc all of these uses use scope.$apply() internally.Similarly all the changes outside Angular JS world also use $rootScope.$apply() for data binding.Another question that arises is "Why and when should I invoke $apply if everything gets executed automatically"Listeners gets executed only for those scope variable changes which lies inside the angular scope. This is because angular framework only know the changes which are done under its scope. There may be cases where we need to change the scope variables values outside the angular world or function out of angular scope.A very simple case can be that you want to change the scope variables value($scope.anyvar) on success of an ajax call. So you need to figure out a way to intimate angular framework that the value of scope variable is changed and it need to invoke the associated change listeners. So here comes $apply in rescue to this problem.With $apply you can enable communication with the angular world being outside of its scope. It internally starts the digestion cycle and also take cares of the errors and exception with proper exception handlers.Here is an example:So in the above example scope.$apply() tells the angular framework about the changes that are done to the scope variable. But by this method angular will never come to know about the errors if they occur while data-binding. Here is a better way.Now this wrap function will give full control to the angular framework. So the basic difference is that in the first version "If any error is thrown while updating the values, Angular will never come to know about this". But in the second version with wrap function, it gets informed about the error thrown. So if there is a need to show error message to the user, we can achieve it via this wrap function.So this is how the whole data-binding process works in angular js. I hope there are a lot of other question that might be arising in your mind while reading this article. Feel free to ask in comments. I will try my best to answer those if I am able to. Also I would love to know feedback from about this article.