Edit ng-repeated item using ngclick - angularjs

Question

Im learning Angular and am trying to build bits and bobs to learn. Ive tried to explain myself as clear as possible below - any help will be much appreciated.
Example:
http://jsbin.com/micasafetise/2/
http://jsbin.com/micasafetise/2/edit?html,js,console,output
I've created myself this bit of data
$scope.people =
[
{
"personID": 1,
"first_name": "Sam",
"last_name": "Stimpson",
"attending": false
},
{
"personID": 2,
"first_name": "Alison",
"last_name": "van Schoor",
"attending": true
},
{
"personID": 3,
"first_name": "Lindsay",
"last_name": "van Schoor",
"attending": false
}
];
I've created an output in my view like this:
<div ng-repeat="person in people">
<a href="" ng-click="isAttending()">
{{person.first_name}}{{person.last_name}} - {{person.attending}}
</a>
</div>
Now the bit I'm stuck on. I want to be able to click on a person and update their attending field from false to true. I understand I can use ng-click like this
$scope.isAttending = function() {
alert("is attending");
};
but do not have a clue how to update the person Ive clicked to change false to true in the $scope.people.
When I have achieved this I plan to have another ng-repeat with a filter to show those attending but Ill be able to do that part I believe.
can anyone help me or give me some advise, anything will be much appreciated at the moment.
Thanks in advanced.
I wrote out an example of what I'm trying to do here:
http://jsbin.com/micasafetise/2/
http://jsbin.com/micasafetise/2/edit?html,js,console,output

Answer 1

You could just pass the repeated person <a href="" ng-click="isAttending(person)"> and have your handler method take that object, so you can update its property (well you could do that inline as well in the view, but it is better to separate out and place the logic in the controller as you originally had).
$scope.isAttending = function(person) {
person.attending = true;
};
Just add a filter as well on both the sections to show who are all attending and who are not.
<div ng-repeat="person in people | filter:{attending:false} track by person.personID">
<a href="" ng-click="toggleAttending(person)">
{{person.first_name}}{{person.last_name}} - {{person.attending}}
</a>
</div>
and
$scope.toggleAttending = function(person) {
person.attending = !person.attending;
};
Demo
In your case you could probably optimize better (you have 2 filters on same list of people) by filtering out from the controller and populate to 2 list of people people.invited and people.attendance.
function updatePeopleAttendance(){
$scope.people.attending = [];
$scope.people.invited = [];
angular.forEach(people, function(person){
$scope.people[person.attending ? 'attending' : 'invited'].push(person);
});
}
Demo
or even better you could pass the id, index and status in the method and pull the item out of one array and push it the other one.