jQuery Datatables mRender not working using AngularJS and AJAX Data Source

I am developing a Web App which uses jQuery Datatables to display dynamic data from an API url on my web server, which contains JSON data.

Now, I am trying to add an "Edit" button at the end of each data row, using mRender, but with no success so far. When I write the following piece of code:

...
'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>';
       }
   }

I end up with only the value of data.id being displayed, so without the whole <a>...</a> element.

Does anyone know how to fix this? Here is a screenshot of the actual web app: 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;