Как пропустить Angularjs DTColumnBuilder в DataTable и создать собственное тело таблицы?

Question

У меня возникли проблемы с использованием angularjs datatable. Я могу создать таблицу, используя DTColumnBuilder, но я хочу создать таблицу, используя ng-repeat для нестандартного дизайна, реализуя простое связывание модели angular, и мой весь остальной код остается таким же, как: разбиение на страницы на стороне сервера. Я просто хочу реализовать таблицу, используя ng-repeat

Текущий HTML Код:

<table id="entry-grid" datatable="" dt-options="dtOptions" dt-columns="dtColumns" class="table table-hover">

</table>

Я хочу реализовать следующим образом:

<table id="entry-grid" datatable="" dt-options="dtOptions" dt-columns="dtColumns" dt-instance="showCase.dtInstance" class="table table-hover">
    <thead>
        <tr>
            <th class="text-center">Sl</th>
            <th class="text-center">Member Id</th>
            <th class="text-center">Full Name</th>
            <th class="text-center">PhoneNo</th>
            <th class="text-center">Status</th>
            <th class="text-center">Select</th>
            <th class="text-center">Action</th>
        </tr>
    </thead>
    <tbody>
        <tr ng-repeat="x in monthlyList track by $index">
            <td class="text-center">{{ $index+1 }}</td>

            <td class="text-center">{{ x.FullName }}</td>
            <td class="text-center">{{ x.PhoneNo }}</td>
            <td class="text-center">
                <label ng-show="x.Status==1" class="label bg-danger m-l-xs">Unpaid</label>
                <label ng-show="x.Status==2" class="label bg-success m-l-xs">Paid</label>
                <label ng-show="x.Status==3" class="label bg-danger m-l-xs">Payment Request</label>
            </td>
            <td>
                <label class="i-switch bg-primary" ng-show="x.Status<=0">
                    <input type="checkbox" ng-model="x.IsSelected" tabindex="0" aria-checked="{{x.IsSelected}}">
                    <i></i>
                </label>
            </td>
            <td class="text-center">
                <a ng-show="x.Status>0" ng-click="$parent.details(x.SubscriptionId)"><img width="25" src="../../assets/img/Icon/edit.png" /></a>
                &nbsp;
                <a ng-show="x.Status>0" ng-click="$parent.delete(x.SubscriptionId)"><img width="25" src="../../assets/img/Icon/delete.png" /></a>
            </td>
        </tr>
    </tbody>
</table>

AngularJs Код таблицы данных:

var vm = this;
$scope.dtInstance = {};
$scope.dtColumns = [
    //here We will add .withOption('name','column_name') for send column name to the server 
    DTColumnBuilder.newColumn("MembershipId", "MembershipId").withOption('name', 'MembershipId').withOption('searchable', true),
    DTColumnBuilder.newColumn("FullName", "FullName").withOption('name', 'FullName'),
    DTColumnBuilder.newColumn("PhoneNo", "Phone No").withOption('name', 'PhoneNo'),
    DTColumnBuilder.newColumn(null).withTitle('Status').withOption('class', 'text-center').renderWith(statusHtml),
    DTColumnBuilder.newColumn(null).withTitle('Select').withOption('class', 'text-center').renderWith(selectHtml),
    DTColumnBuilder.newColumn(null).withTitle('Actions').withOption('width', '20%').withOption('class', 'text-center').notSortable().renderWith(actionsHtml)
];
function actionsHtml(obj) {
    var html = "";
    if (obj.Status > 0) {
        html="<a ng-click='details(" + obj.SubscriptionId + ")'><img width='25' src='../../assets/img/Icon/edit.png' /></a>" +
            "&nbsp;" +
            "<a ng-click='delete('" + obj.SubscriptionId + "')'><img width='25' src='../../assets/img/Icon/delete.png' /></a>";
    }
    return html;
}
function selectHtml(obj) {
    var html = '';
    if (obj.Status <= 0) {
        html = '<label class="i-switch bg-primary">' +
                '<input type="checkbox" tabindex="0" aria-checked="true">' +
                '<i></i>' +
            '</label>';
    }
    return html;
}
function statusHtml(obj) {
    var html = "";
    if (obj.Status === 1) {
        html = "<label class='label bg-danger m-l-xs'>Unpaid</label>";
    }
    else if (obj.Status === 2) {
        html = "<label class='label bg-success m-l-xs'>Paid</label>";
    } else if (obj.Status === 3) {
        html = "<label class='label bg-danger m-l-xs'>Payment Request</label>";
    }
    return html;
}
//If this removed actionHtml does not works:
function createdRow(row, data, dataIndex) {
    $compile(angular.element(row).contents())($scope);
}

$scope.getMonthlyStatus2 = function (year, month) {
    $scope.dtOptions = DTOptionsBuilder.newOptions().withOption('ajax', {
        url: constant.baseUrl + "/api/subscription/getMonthlyStatus2",
        type: 'POST',
        contentType: 'application/json',
        dataType: 'json',
        accepts: "application/json",
        headers: {
            "Token": angular.fromJson($window.localStorage.getItem('Token')),
            "content-type": "application/json",
            "cache-control": "no-cache"
        },
        data: function (d, settings) {
            var api = new $.fn.dataTable.Api(settings);
            // Update URL
            api.ajax.url(
                constant.baseUrl + '/api/subscription/getMonthlyStatus2?year=' + year + '&month=' + month + '&pageNo=' + d.start + '&pageSize=' + d.length + '&search=' + d.search.value
            );

            // Store "draw" parameter
            vm.dtDraw = d.draw;
            return JSON.stringify(d.data);
        }
    })
        .withDataProp(function (json) {
            console.log(" ajax > post > success > response > ", json);
            // Retrieve "draw" parameter
            json.draw = vm.dtDraw;
            $scope.monthlyList = json.data.Result;
            console.log($scope.monthlyList);
            return json.data.Result;
        })
        .withOption('processing', true)
        .withOption('serverSide', true)
        .withPaginationType('full_numbers')
        .withOption('createdRow', createdRow);
};