Angular ng-click giving Syntax Error: Token '{' invalid key at column 22 of the expression

Question

Before I post my question, just want to let you know I searched enough and couldnt find the solution. This issue is perplexing me.

I have following code. First ng-click correctly inserts the ID in the function, but generates angular error (mentioned in subject). Second ng-click neither generates error nor inserts the ID, instead it renders the literal.

I searched all the forums and most mentioned to use it like my 2nd ng-click but it is not working for me. Help required!

<tr ng-repeat="registration in vm.filteredList">
    <td>{{registration.id}}</td>
    <td>{{registration.dateModified | date}}</td>
    <td>
        <a class="btn btn-primary" ng-click="vm.editRegistration({{registration.id}})" href="#">E</a>
        <a class="btn btn-danger" ng-click="vm.deleteRegistration(registration.id)" href="#">D</a>
    </td>
</tr>

ANSWER:

I did some testing and found out it is confusing for newbie because in HTML inspector of FF or Chrome developer toolbar, you will see that code will render

<a class="btn btn-danger" ng-click="vm.deleteRegistration(registration.id)" href="#">D</a>
<a class="btn btn-danger" ng-click="vm.deleteRegistration(registration.id)" href="#">D</a>
<a class="btn btn-danger" ng-click="vm.deleteRegistration(registration.id)" href="#">D</a>

instead of

<a class="btn btn-danger" ng-click="vm.deleteRegistration(1)" href="#">D</a>
<a class="btn btn-danger" ng-click="vm.deleteRegistration(2)" href="#">D</a>
<a class="btn btn-danger" ng-click="vm.deleteRegistration(3)" href="#">D</a>

but when the actual function fires it will pass the right value. For example below function will receive and show 1,2,3 etc.

vm.deleteRegistration = function (id) { alert("ID: " + id)};

Hopefully it explains and helps.

Answer 1

Should use

ng-click="vm.editRegistration(registration.id)"

without {{ & }}