How to pass child object from ng-repeat to ng-click

Question

I wish the previous questions had answered this problem, but it seems like I'm facing something different here, unless I'm missing something..

I understand ng-repeat creates a child object and from that we can call things such {{note.id}}.

My problem is living in my attempt to pass that note.id to ng-click

Below the code with attempts and errors.

<div class="col-lg-3" ng-controller="mainCtrl">
  <div class="list-group">
    <a href="#notes/{{note.id}}"   class="list-group-item" ng-repeat="note in notes" >
      {{note.title}}
      <button ng-click="deleteNote(note.id)" class="btn btn-danger" >x</button>
    </a>
   </div>
</div

Inspecting the elements we have

<a href="#notes/5" class="list-group-item ng-binding ng-scope" ng-repeat="note in notes">
  hello update
  <button ng-click="deleteNote(note.id)" class="btn btn-danger">x</button>
</a>

And in case I try something that would look more like the angularjs sintax

<button ng-click="deleteNote({{note.id}})" class="btn btn-danger" >x</button>

In that case my element inspection brings up the right id ...

<button ng-click="deleteNote(5)" class="btn btn-danger">x</button>

Bu I have an error

Error: [$parse:syntax] http://errors.angularjs.org/1.2.19/$parse/syntax?p0=note.id&p1=is%20unexpected%2C%20expecting%20%5B%3A%5D&p2=14&p3=deleteNote(%7B%7Bnote.id%7D%7D)&p4=note.id%7D%7D)

I could not tell what the error is from the message or the link it takes me to

Syntax Error: Token 'note.id' is at column {2} of the expression [{3}] starting at [{4}].

code for the controller

.controller('mainCtrl',['$scope', 'notesFactory', function($scope, notesService){

    $scope.notes = notesService.notesObjectInService;

    $scope.addNote = function(){
         if ($scope.title === "" ) {
                 return;
         }
         notesService.create({
             title: $scope.title
             body:$scope.body
         });
         $scope.title= '';
             $scope.body= '';
         };

     $scope.deleteNote = function(id) {
         notesService.delete(id);
         notesService.getAll();
     };
}])

Answer 1

http://jsfiddle.net/p2t1waxp/2/

Your first attempt <button ng-click="deleteNote(note.id)" class="btn btn-danger">x</button>

actually works, doesn't it?

It just doesn't render the id when you inspect it, but it process it right in the controller, as you can see in the console

Answer 2

I'm sorry but turns out that the standard way to do things as supposed works just fine. ng-click(note.id) .. I had not implemented completely my function yet because I was debugging with Chrome tools Inspecting the element and I expected that the id element should come up in the inspection. Once it didn't as I showed in the code above I assumed it was wrong. But by finishing implementing the service and the back end it actually works just fine. It's something I didn't know about the developer tools. What i still don't understand is why the id doesn't show up in the html inspection like href="#notes/{{note.id}}" ....I am assuming it has to do with the {{}} notation, but I'd have no precise answer for it. If someone can explain it'd help with my knowledge of angular and html as I'm new to programming.

Thanks and sorry for silly mistake.