How to get dynamic variable's value inside a HTML tag

Issue

I'm currently using AngularJS, this is my HTML:

<tbody>
    <tr dir-paginate="tdata in tableData | orderBy:predicate:reverse | filter:searchFilter | itemsPerPage:10 track by $index ">
        <td class="table-data-edit-all">
            <input type="checkbox" ng-model="tdata.selectedCell">
        </td>
        <td class="align-left">
            {{ tdata.companyName }}
        </td>
        <td class="align-left">
            {{ tdata.department }}
        </td>
        <td>
            <a ng-click="editCompany({{ tdata.id }})"><i class="fa fa-edit"></i></a>
            <a ng-click="removeCompany({{ tdata.id }})"><i class="fa fa-remove"></i></a>
        </td>
    </tr>
</tbody>

and here is Angular:

$scope.editCompany = function(index) {
    console.log(index);
    // my stuffs
}

When the page is loaded:

• first time, tdata.id show the number id 1 in HTML view and editCompany(index) also print out to the console number 1.
• second time, after I did a sort using Angular orderBy, tdata.id show the number id 10 corresponding with tdata.companyName. However, at this time, editCompany(index) still print out to the console number 1, not 10.

How can I fix it?

Solution

Use ng-click="editCompany(tdata.id) instead of ng-click="editCompany({{tdata.id}})

<tbody>
    <tr dir-paginate="tdata in tableData | orderBy:predicate:reverse | filter:searchFilter | itemsPerPage:10 track by $index ">
        <td class="table-data-edit-all">
            <input type="checkbox" ng-model="tdata.selectedCell">
        </td>
        <td class="align-left">
            {{ tdata.companyName }}
        </td>
        <td class="align-left">
            {{ tdata.department }}
        </td>
        <td>
            <a ng-click="editCompany(tdata.id)"><i class="fa fa-edit"></i></a>
            <a ng-click="removeCompany(tdata.id)"><i class="fa fa-remove"></i></a>
        </td>
    </tr>
</tbody>

Answered By - Upalr