How to add link to item field with angular?

Question

I am a beginner in Angular. I am trying to combine several TASKS list into single Angular table. It works well and here is part of my code, JS part:

$http({
    method: 'GET',
    url: $urllist[1],
    headers: {
        "Accept": "application/json;odata=verbose"
    }
}).then(function successCallback(response) {
    $scope.myTasks = $scope.myTasks.concat(response.data.d.results)

    angular.element(document).ready(function() {
        dTable = $('#user_table')
        dTable.DataTable();
})}, function errorCallback(response) {

});

Html part:

<table width="100%" cellspacing="0" id="user_table" class="users list dtable" border="1">
      <thead id="TblHead">
         <tr>
            <td class="RightMargin">Edit</td>
            <td class="RightMargin">Ref</td>
            <td class="RightMargin">Task Name</td>
            <td class="RightMargin">Start Date</td>
            <td class="RightMargin">Due Date</td>
            <td class="RightMargin">Task Status</td>
            <td class="RightMargin">% completed</td>
            <td class="RightMargin">Milestone</td>
         </tr>
      </thead>
      <tbody>
      <tr ng-repeat="MyTask in myTasks | filter:singleSelect">
          <td><a title='Click to edit' href="{{MyTask.url}}/EditForm.aspx?ID={{MyTask.ID}}" target='_blank' class='btn btn-info btn-md'><span class='glyphicon glyphicon-user'></span> Edit</a></td>
          <td>{{MyTask.Ref}}</td>
          <td>{{MyTask.Title}}</td>
          <td>{{MyTask.StartDate | date}}</td>
          <td>{{MyTask.DueDate | date}}</td>
          <td>{{MyTask.Status}}</td>
          <td>{{MyTask.PercentComplete}}</td>
          <td>{{MyTask.Milestone}}</td>
      </tr>
      </tbody>
   </table>

I would like to add additional column "EDIT" with a button link to the edit form for each task item (e.g. /Lists/Schedule/EditForm.aspx?ID=1&IsDlg=1)

My question is:

1. Is there any existing URL field in the list so that I can call with Angular directly?
2. If not, I can build it myself (e.g. {{MyTask.url}}/EditForm.aspx?ID={{MyTask.ID}}). The task list have "ID" field but do not have "url" field. How can I add a field (url) in the $scope.myTasks?

Answer 1

Thanks Ganesh for the hints. Eventually I solved the problem. I have tried syntax like push or angular.extend($scope.myTasks, $scope.myTasks, response.data.d.results); but it is not working (the new get results always override the existing values in myTasks)

Here is my code for future reference. In html part, add a td cell to hold the Edit button:

<td class="ms-cellstyle ms-vb1"><a title='Edit' href='#' ng-click='OpenPopUpPage(MyTask.url+MyTask.ID)', RefreshOnDialogClose, 800, 600); ' class='pointerCursor'><img border="0" alt="edit" src="/_layouts/15/images/edititem.gif?rev=40"></a></td>

In JS part, add the "url" string into results "url" field with a forEach loop :

// $urllist[] hold a list of URLs for different subsites
let url = $urllist[i]+"Lists/Schedule/EditForm.aspx?ID=";
let resturl = $urllist[i]+"_api/web/lists/GetByTitle('Schedule')/Items";

$http({
    method: 'GET',
    url: resturl,
    headers: {
        "Accept": "application/json;odata=verbose"
    }
}).then(function successCallback(response) {
    angular.forEach(response.data.d.results, function(value, key) {
        response.data.d.results[key].url = url;
    })
    //angular.extend($scope.myTasks, $scope.myTasks, response.data.d.results);  <-- not working T_T
    $scope.myTasks = $scope.myTasks.concat(response.data.d.results)
    angular.element(document).ready(function() {
        dTable = $('#user_table')
        dTable.DataTable();
})}, function errorCallback(data) {
        // hmm... how to write error handling?
});