How to call function foo("someName") using template in AngularJS?

Question

I have some dynamic elements (ie list) on the page. I want to add handler for onClick action to each elements besides each element should call this handler with specified data.

I tried this:

js:

$scope.data = [
      {
        id: 1,
        name: "1",
        order: "10"
      },    
      {
        id: 2,
        name: "2",
        order: "20"
      },    
      {
        id: 3,
        name: "3",
        order: "30"
      }
    ];

html:

  <div ng-repeat="item in data" name="{{ 'name_' + item.id }}" ng-click="onClick({{ '\'name_' + item.id +'\'' }})" value="item">
    Item name is "{{ item.name }}"
  </div>

When I am observing dom I see correct html: ng-click="onClick('name_1')", but when I click on the row, nothing happens. Why? (also, I am getting long red error by angularJS in console, saying that I am really wrong)

How I can achieve what I want? I don't say that it must be done by my approach. May be there are another approach - better then mine (like using some angular property maybe (like ng-repeat has: $index))

Answer 1

ngClick directive needs an expression in it. You should not interpolate anything inside of it. So it should be:

ng-click="onClick('name_' + item.id)"