Let's get access to underlying Angular data, called scope. Right click on number or buttons and select "Inspect Element".
Type following into console to get access to scope s = angular.element($0).scope()
Now, get currentNum in console using s.currentNum
Click buttons and then use up arrow to re-execute s.currentNum to see that is in fact the current value
Now, update the currentNum using s.currentNum = 100;. Check the value using s.currentNum. The value has updated but the UI hasn't. Angular waits to update the UI until you tell it you are done making changes. Let's do that using s.$apply(). Notice that the UI updated and the Increase button disabled. But there is a bug, the candy stripe wasn't updated.
Before we fix that, let's do some scope debugging to see if the page title is part of the Angular scope.
Right-click to inspect the page title element and then type angular.element($0).scope(). Notice that undefined is returned, meaning the page title is outside of Angular and therefore isn't controlled by Angular.
Back to the candy stripe bug, if you look at the source code, app.js, on line 20, 24 you'll see we call syncWithNumber after updating currentNum. This updates the data for the candy stripe. We didn't call that from the console, so try that now, s.syncWithNumber(); s.$apply();
Let's see if we can clean that code up by subscribing to currentNum and when it changes automatically calling syncWithNumber. So, let's try subscribing to currentNum, s.$watch('currentNum', function () { console.log('currentNum changed to ' + s.currentNum); });. Confirm the subscription works by clicking on the buttons and watching the console.
Now, we can add a subscription that calls syncWithNumber, s.$watch('currentNum', s.syncWithNumber);
Let's test updating currentNum and see if UI and candy stripe update, s.currentNum = 10; s.$apply();
So, now we could take our subscription that we tested and update our source code in app.js
But, let's try accessing Angular services. In this app we have a ColorService that when given a number will return a color. This is useful for unit testing and for allowing users to select between services to change the candy stripe. Let's see if we can interact with this service from the console.
To access the Color Service, we need access to Angular Dependency Injection system. So, right-click and inspect the current number or buttons and then type the following in the console, cs = angular.element($0).injector().get('ColorService');
Now, let's test the Color Service using cs.determine(5) and cs.determine(10);
And that's the end of debugging Angular using the Console