ng-show expression ... how to debug it

Question

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?

Answer 1

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.