I don't understand Angular data binding at all

Question

I spent several hours trying to make minor variations of this code, and I don’t understand why it works and the other does not.

Here's the scenario: I'm trying to present a list of registered users (which I get with a simple database query that returns just a few columns), and then when one username is clicked, I will get more detailed information about this user from the database and submit him in a different view. At the moment, I am doing this with regular <a> elements with the ng-click directive, which sets a value called currentid . Elsewhere in my code, I use $watch() to send a new database query when the currentid changes. This part seems to work (I see console.log() output from my callback in hours, and the database query spits out the data I need) ... but sometimes the currentid changes, and sometimes not, and I can't figure out why.

• jsfiddle where it doesn't work: http://jsfiddle.net/aLcRL/11/
• jsfiddle where it works: http://jsfiddle.net/aLcRL/12/

(Click on the “rmunn” and “admin” links in the table: the “Currrent ID” value should be updated below. And I apologize for the almost complete lack of CSS, I'm an encoder, not a graphic designer (“Damn it, Jim!”), And this also very soon in my time zone right now, so I don’t have any motivation for this. It is functional, it demonstrates the problem, and I am going to leave it to that.

The only difference between the two is that it is tied to currentid and the other tied to vars.currentid . Now I understand why binding to currentid will not work in the case of the parent and child areas (the child value will obscure the parent value); as I come from the Python background, this makes sense to me (this is similar to how Python instance namespaces can obscure namespaces with anything defined in a class). But in this jsfiddle I use only one controller - aren't all these variables in the same scope?

I've been banging my head about this all day, and the few overflow stack answers I tried to read (e.g. How does data binding work in AngularJS? For example) just left me even more confused: $apply() and $digest() and areas about my! Therefore, if anyone can give me a good simple beginner guide on areas in Angular (or point me to one already written, which I missed), I would be very grateful.

“I learned Clojure and Haskell, I can learn the simple Javascript structure,” I thought. "It will be easy." Boy, I was wrong. :-)

Answer 1

You are having a problem where ng-repeat creates a child region.

 <tr ng-repeat="user in data" blarg="{{user.id}}"> <!-- currentid here is part of the ng-repeat child scope and not your root scope --> <td><a href="#{{user.id}}" ng-click="currentid = user.id">{{user.userName}}</a></td> <td>{{user.email}}</td> </tr> 

If you need to access the parent area, you can use $parent.currentid

 <a href="#{{user.id}}" ng-click="$parent.currentid = user.id">{{user.userName}}</a> 

You need to use $apply() when you change the value outside the angular world. For example, using setTimeout() or the jQuery plugin. Calling $apply() angular warnings to re-evaluate scope to ensure that something has changed and updated accordingly.