Q:

ng-show expression ... how to debug it

I have the following code 
<span ng-show="form.email.$error.unique">Email already exists</span>

This is working correctly and I am able to see the span element if the email entered in the "email" input field already exists in our db.
However if I go into chrome console. and then type
form.email.$error

it says undefined.
I can type in 
form.email 

and it shows me 
​<input name=​"email" ng-model=​"model.email" required class=​"ng-dirty ng-invalid ng-invalid-unique">

So the question is why can't I see $error in chrome console? this value definitely exists because angular is reading it and based on the value it is deciding whether to show the span or not.
Edit:: Upon further reading documentation, I feel that the directive which checks whether email is valid or not... sets the validity on the controller object (4th parameter . $setValidity )
but somehow the UI reads that $error from the UI element .
so that's very confusing as to what is the actual workflow... where is the $error being set and from where it is being read.
Can someone clarify this?

A:

Instead of debugging in the console, a useful technique to use is to just output the variable in the view:{{form.email.$error.unique}}. Put this above or below your input element and watch the value dynamically change as you type into it.

A:

Download the AngularJS Batarang Plugin for Chrome. After enabling it you can inspect any element and in the console $scope will be the scope of the selected element.
You can then inspect your mentioned span and type in console $scope.form.email.$error.uniqueand you'll get the current value of it.

Alternatively if you dont want to install that plugin (I would prefer installing it) you can get via javascript the current scope like angular.element(document.getElementById(...)).scope()  and then inspect that scope. (Of course you can get the element on other ways then per document.getElementById(...))

