[SOUND] In part two of this lecture, we've set up watchers using the $watch function. But that's not the best way of setting up watchers inside of the controller function. AngularJS has a more automated way of going about it, which we will take a look at now. Now, the way that we've set up the watchers is actually not a recommended way at all. You should never have these $watch functions executed inside of your controller. And the reason that is, is this controllers and the templates or HTML already have mechanisms that automatically set up these watchers. For us, so how can we do this? Well, one way you can do this is let's go ahead and comment this out and save that. Let's go to index HTML and we'll just open up another div right here and inside the div we'll say once counter and we'll say interpolation with once counter, and we'll put an ugly break here, but that will work. I'll say regular counter. And again we'll say just counter. So, now when we go back even though we don't have anymore watchers that at least manual watchers set up. If we go back to our HTML page and go ahead and click number of watchers. You'll see the number of watchers is still two. And as we keep. Doing the once counter, you'll see we'll never change, but it changed once, and the increment counter as you could see, is going as many times as we want as we're clicking our increment counter button. Now there's a really cool trick to actually kind of tie in, into the digest loop and to see when it's actually getting executed. So far, all we've seen is how are watch is being executed, but what about the digest loop. Well, the way we could do this is the following. If we say $scope.$watch and now instead of giving it a real property around our scope, we'll give it a function, because this function is something that is supposed to return the name of the property to watch. Which means every time through the loop, the digest cycle will want to figure out what property is that and execute it. So that means we could catch when the digest loop is actually going through all these watchers. So all we have to do is really provide one function. And we'll say here, log("Digest Loop Fired!"). Let's save that. I'm going to go back, you'll see the digest loop already fired twice before we even started anything. And the reason that is is that when we go back and look as to what's going on here, since our watchers are being set up by the interpolation, double curly braces, when we have the $scope.onceCounter equals zero, that means this property gets changed and so does this. So which means there's already a one time that the properties gets changed and since we know that one time things are changing, it will go once through loop and it will go through loop one more time just to see that everything is clean, there's no dirty values, meaning nothing has changed anymore. That's why you see here the Digest Loop Fired twice. Now, if we click one up once counter, you'll see that, again, it fired twice. Because one time was for changing the actual counter, and another time, to see that nothing's changed. Now, now that I know that it's changed and it will not change again, if I click up once counter again you'll see that it's only changing once. Let's actually clear that and you'll see that the digest loop is only getting fired once let's clear it again and still only get fired once, and the reason that is, is that through the first time that a digest loop fires, it sees that nothing really has changed. However, if we say Increment Counter, well it's going to fire twice. Once for checking that the counter actually got incremented and once to see that nothing else has changed. If we click it, and we clear that again click it again, it will once again see that the counter change and then we'll run through all the watchers once again to see that nothing else has change. And therefore every time I click, you'll see that the number of times this console.log will get printed out is going to be incrementing by two, so six, eight, ten and so on, in other words every time I click, it's going to be two times of the digest loop goes through the watchers to make sure that everything us updated properly. So now we've seen two ways as to how to set up this watchers. One is to do it manually through this $watch functions which are not recommended to be done inside a controller, however you could do it inside of a service which we haven't yet covered or a directive or a component. And the second way is to actually just interpolate using double curly braces some property and that automatically or AngularJS automatically sets up a watch for you, because it knows that once this property changes it will need to update the DOM and update your page. So therefore, a watch is required. There's a third way to set up a watch and that is simply having an input element with an ng model. An ng model is what's called a two way binding. And we're going to talk about that in a minute. So if I say ng model and it's going to be equal name, if I save that and actually create a name right here, so we could see something for that property, we'll say scope.name = "Yaakov" and save it. If we go back you'll see the Digest again fire twice, well that's because we've initialize things here. If we click on number of watchers, you'll see that number of watchers is now four. So where did you get number 4? Well, let's go back and take a look at our code, and let's start counting. The first one is the input field that we set here with an ng-model="name". The second one is the onceCounter with interpolation. The third one is the counter, again with interpolation. And he fourth one is actually our trick that we made in order for us to watch the digest loop. This is also a watch that we're setting up. So that's the fourth one. And if we go back to our page, if I start typing in that field you'll see that every time I type, the Digest Loop gets fired twice. In fact, let's go ahead and clear that. And if I start typing anything you'll see that the Digest Loop fired twice. Again, the idea is the same. Once it fires because we change something about the property that is being washed, which is our name property right here. And the second time it fires to make sure no other properties would triggered and changed as a result of the first changed. So every time we type, the Digest Loop will run twice, once because of the change and the second time to verify that nothing else has changed in the entire list over the watchers that we have. So let's summarize. So in this lecture we spoke about the Digest Cycle which is basically running these digest loops over and over until all watchers report that nothing has changed. And this whole process is really not specific to AngularJS, it's really in general called dirty checking to make sure that every one of the watchers is no longer dirty. Meaning the values have not changed. We also saw several ways to set up these watchers that watch a particular property that is set on the dollar sign scope. One way to do it is to directly call the $watch function on the $scope object. And you never want to do this in a controller. And the only reason we did this is because that's all we learned about up until this point, but it is not a good practice to do that. And the reason it's not a good practice to do that, again is because controllers and templates have their own ways to deal with watchers and set them up. For example, another way we learned about it is simply to interpolate some property inside the HTML template. That alone sets up a watch. Also, if you have an input element that has an ng-model declared on it, that property that is declared on ng-mode will have a watch associated with it, because Angular will set one up for you. Now remember, everything we've discussed only applies to things done inside of the Angular context. If the event that triggered the whole process, even updating some property inside of the $scope, that is not an Angular type of event, it's not triggered inside the Angular infrastructure, the Angular digest cycle will not know to run and therefore, nothing will show to be updated until the next time the Digest Cycle runs, because of some other events and then it will repaint the browser with the proper values that are already sitting there. But it will not show up the browse immediately because the digest cycle needs to be kicked off. And it only knows to get kicked off if it's inside the Angular context.
