[SOUND] In the previous lecture, we spoke about the fact that the entire digest cycle and the digest loops that go over the setup watchers is only triggered when the original event from our event cue is something that is angular aware. In other words, it knows about the digest cycle and kicks it off as part of the process. But what about code that is not inside of our angular application and sometimes still need to effect the values inside of our angular app? This is where the special dollar sign digest and dollar sign apply functions come into play. Let's take a look at the diagram. So we've seen this diagram before, this is the event queue that has an ng-click on it, that is set up to handle click event, but at the same time is angular context aware. And therefore is going to eventually, at some point, call the dollar sign digest function. But what happens when you have other events on the event queue that are not AngularJS aware? Like onclick, a regular onclick event, or a timeout that gets put on the event queue and then some functionality gets executed after a certain timeout? In these cases, we actually need to do something special in order to let Angular know that it needs to run its digest cycle. In practice, it's not the custom timeout events or onclick events that we deal with but probably something like a custom library, like jquery, that has to handle some jquery-specific functionality, and we want to kind of Plug into that and affect some of the values and therefore our UI state inside of our Angular app. However, in our example, we're going to use a time out simply because it's much easier to deal with than setting up a whole infrastructure with jQuery. So let's jump into the code editor and see how we can handle this inside of our Angular application. Okay, so here I am inside of my editor and I'm looking it in lecture 15 which is located in fullstack-course5/examples folder. And this is a very simple CounterApp that we had before, except we cleaned up a couple of things to make it even simpler. And what we have here is a single controller A counter controller and it has upCounter and she click button here that is connected to upCounter function on this scope and it's going to increment the counter and every time it increments it, it will kick off to digest cycle and go ahead and update this counter Interpolation because obviously double curly braces sets up the watcher for us. Let's take a look at our ab.js, and it's as simple as could be. It has the controller declared and we have our regular injection going here with the scope, $scope. We initialize the counter to zero and then in our up counter, we just say scope.counter++ and knows we're just incrementing it. So let's go take a look at this inside a browser. And you can see here, we have our increment, counter button, and counter zero. So if we keep click it, our counter keeps going up by one. Let's go back to the code and instead of implementing this right away, in other words, the second a person clicks upCounter and invokes the upCounter function that the counter should go up. Let's go ahead and set up a timeOut to do this in a couple of seconds. So let's do setTime out. And the timeout takes a function, we don't need the name and right after the function it takes how long should do the function wait or how long should timeout wait before it executes that function. And in this case, we'll say two hun two thousand milliseconds which equals to two seconds, and we'll just go ahead and move that counter Right inside of there, okay? So now that we moved it inside of there, and let's make sure that it is actually executing so right after we'll say, log and we'll say, Counter incremented, okay, now let's save that. So let's go back to our webpage. We'll click the increment counter and it should be a couple more seconds, and bam, the counter got incremented. Except there's one problem. The regular counter here, the interpolation still says 0. How come that is going on, well the reason that's going on is this timeout gets put in the event Q completely separately from this call of upCounter really gets it taken out out of the angular context all together. It's not being called inside the angular context. And because it's not being called inside the angular context the digest cycle doesn't know to have to To kick off at all. So in order for us to do that, what we could do is we could just kick it off manually ourselves. We could say, $scope.$digest. And if we do that, At the end of this, the digest cycle is going to know to get kicked off and the watcher for this counter will therefore be checked and our DOM will get updated and repainted. The browser will get repainted. Let's go back to our browser and this case we'll click increment counter, we'll count a couple of seconds and bam, the counter is incremented and now you see the counter Is one, so it did get incremented. That's all well and good, but there is a better way of doing this than colon digest. The problem with colon digest directly is if there is any kind of errors or any exceptions that happen in the colon that we are executing, the exceptions thrown as part of this code. Will not be visible to Angular JS, so how can we make it visible to Angular JS? Well, there comes the special function called $apply, so let's go ahead and actually it will just keep it for your reference so we'll copy it, comment that out, let's write it again except this time instead of the digest Inside the timeout will say $scope.$apply and it takes a function inside of which we could place our code. So let's cut the code out here, and we'll place it right inside of the $apply. So now, when the time out gets executed after two seconds, this function will get executed, and this function will call $apply. And have another function as part of it and execute that function, which will have the code that we actually want to execute. But since it's all going to get wrapped inside the apply function, not only will we catch any exceptions in AngularJS. Contacts will catch those exceptions. But also at the end of that process, the digest, $digest will get called automatically by angular, and therefore the will get updated. So let's go back to our browser and let's click income encounter, counter two, and you'll see that counter got incremented and want is displayed. So we could do it again And counter will get incremented again, second time that log message is here, and now it's 2. However, in practice you should always try to see if there's an AngularJS alternative that's available that is native to AngularJS. In our case, there's Is a service called dollar sign timeout that does exactly the same thing as set timeout does except that does it inside the angular context already, so what do you need to do on any of these tricks. So let's go ahead and rewrite this one last time but this time we're going to use the angular timeout service Instead of the native set timeout from JavaScript. So the first thing we going to have to do is add more one value to our dollar sign inject property to our controller, so we'll say $timeout and since it $timeout we know it's a native service that JS provides out of the box, and we'll edit as one of the arguments $timeout And we'll go ahead and comment this out, and we'll copy and comment this out for future reference. And meanwhile we'll just write a new one, and instead of saying setTimeout, we'll go ahead and just erase that, and we'll say $ timeout, and the first thing is the function that we need to execute. And the second argument is the number of milliseconds it should wait, which in this case again is 2,000. And all you need to do is really just move our Two lines that we executed before right here. We need to comment this out again, and now that we save it let's go back to our webpage and we'll click increment counter. We'll wait two seconds and sure enough the counter incremented gets displayed and one is displayed on our webpage. So let's summarize. In this lecture we spoke about the fact that the Digest Cycle does not get triggered automatically if the events are unaware of Angular and certainly unaware of Angular context and the Digest Cycle itself There are few different solutions that you could use to take care of this problem. The first one is you could call the digest, dollar sign digest function yourself directly after you custom code. That would tell angularjs to go ahead and kick off the whole digest cycle. And your changes that you've made to the scope properties will get detected. Number two is, and a better way, is to wrap your custom code inside of a dollar sign apply function. What that will allow you to do is if your code, your custom code, throws any exceptions, those exceptions will actually be seen by the Angular context As oppose if you just call digest at the very end the exceptions that might have gone thrown before hand will not get registered in the angular contacts. The third way is probably the best of them all, is to find angular specific service that handles the same functionality. In our case, we used the set timeout which is a JavaScript native functionality, but there is a equivalent dollar sign timeout or the timeout service that does exactly the same thing and is already angular aware. So you need not do anything else but just use that timeout service.
