How to use $compile to apply a function to all rows with angularjs + razor?

Issue

EDIT: I Think you guys don't understand it, I need to apply the function on all rows, not to use '', "", '"...

So, after some research I've found that I'll need to use $compile, but I don't know how to apply here, help me please.

I'm having some trouble passing parameters on the second to the last page of datatable.

All rows need to have a button which contains a function to open a modal and show all fields, but only the first page is working.

Using razor to show table values and to send the parameters, inspecting the other pages I can see that all buttons has the value, it's just don't trigger the function "GetData()" on the other pages.

Here's the code:

<div ng-app="testApp" ng-controller="testController">
<table id="customTable" class="table table-responsive table-hover table-striped table-bordered custom-Datatable" style="font-family:'Segoe UI'; width:100%;">
    <thead>
        <tr class="bg-primary text-center" style="color:white">
            <th>Status</th>
            <th>AuthorizationNumber</th>
            <th>Remarks</th>
            <th>Client</th>
            <th>MerchantName</th>
            <th>Option</th>
        </tr>
    </thead>
    <tbody>
        @foreach (var item in Model)
        {
            <tr style="font-family:'Segoe UI'" class="text-center">
                <td>
                    @Html.DisplayFor(model => item.Status)
                </td>
                <td>
                    @Html.DisplayFor(model => item.AuthorizationNumber)
                </td>
                <td>
                    @Html.DisplayFor(model => item.Remarks)
                </td>
                <td>
                    @Html.DisplayFor(model => item.ClientName)
                </td>
                <td>
                    @Html.DisplayFor(model => item.MerchantName)
                </td>
                <td>
                    <input type="button" value="See More"
                           ng-click="GetData('@item.Id')"
                           class="btn btn-outline-primary" />
                </td>
            </tr>
        }

    </tbody>
</table>
</div>

Here's my js:

var app = angular.module('testApp', []);
app.controller('testController', function ($scope, $http) {

    $scope.GetData = function (id) {
        $http.post('/WexReportInfoes/GetTransaction', { InfoId: id })
          .then(function (result) {
            debugger;
            if (result.data.error == null) {
                $scope.object = result.data;
                $('#modalInfo').modal('show');
            }
            else {
                alert('error')
            }
            
        })
    }   
})

Someone already had this problem and can help me?

Solution

I don't think you need:

GetData('@item.Id')

Just use:

GetData(@item.Id)

Answered By - Mohtasim Nuran