jQuery Datatables mRender无法使用AngularJS和AJAX数据源

Question

我正在开发一个Web应用程序，它使用jQuery Datatables显示来自我的Web服务器上的API URL的动态数据，其中包含JSON数据。

现在，我正在尝试使用mRender在每个数据行的末尾添加“编辑”按钮，但到目前为止没有成功。当我写下以下代码时：

...
'sAjaxSource': 'http://api.xxxxxxxx.dev:8000/v1/users',
'aoColumns': [
   { 'mData': 'id' },
   ...
   { 
      'mData': 'id',
      'mRender': function(data, type, full) {
                     return '<a href class="btn btn-xs" data-id="' + data.id + '">Edit</a>';
       }
   }

我最终只显示data.id的值，因此没有整个<a>...</a>元素。

有谁知道如何解决这个问题？以下是实际网络应用的屏幕截图：Click here

jQuery Datatables config

var dtOptions = {
'sAjaxSource': 'http://api.avansintro.dev:8000/v1/users',
'aoColumns': [
{ 'mData': 'id' },
{ 'mData': 'username' },
{ 'mData': 'display_name' },
{ 'mData': 'email' },
{ 'mData': 'created_at' },
{ "sTitle": "example",
  "mData": "id", 
  'mRender': function(data, type, full) {
     return '<a href class="btn btn-xs" data-id="' + data.id + '">Edit</a>';
  }
}
],
'aoColumnDefs': [
{
    'bSortable': false,
    'aTargets': [ 5 ]
},
{
    'bSearchable': false,
    'aTargets': [ 4, 5 ]
}
]
};
$scope.dtOptions = dtOptions;