How to bind data using angular js and datatable with extra row and column

You can follow davidkonrad's answer in the comment just like following structure:

HTML:

<table id="entry-grid" datatable="ng" class="table table-hover">            <thead>                <tr>                    <th>                        CustomerId                    </th>                    <th>Company Name </th>                    <th>Contact Name</th>                    <th>                        Phone                    </th>                    <th>                        City                    </th>                </tr>            </thead>            <tbody>                <tr ng-repeat="c in Customers">                    <td>{{c.CustomerID}}</td>                    <td>{{c.CompanyName}}</td>                    <td>{{c.ContactName}}</td>                    <td>{{c.Phone}}</td>\                    <td>{{c.City}}</td>                </tr>            </tbody>        </table>

Create controller in angular like this:

var app = angular.module('MyApp1', ['datatables']);app.controller('homeCtrl', ['$scope', 'HomeService',    function ($scope, homeService) {        $scope.GetCustomers = function () {            homeService.GetCustomers()                .then(                function (response) {                    debugger;                    $scope.Customers = response.data;                });        }        $scope.GetCustomers();    }])

Service:

app.service('HomeService', ["$http", "$q", function ($http, $q) {    this.GetCustomers = function () {        debugger;        var request = $http({            method: "Get",            url: "/home/getdata"        });        return request;    }}]);

Instruct angular-dataTables to use the "angular way" by datatable="ng" :

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

Then change dtColumns to address column indexes rather than JSON entries:

$scope.dtColumns = [   DTColumnBuilder.newColumn(0).withTitle('').withOption('width', '2%'),   DTColumnBuilder.newColumn(1).withTitle('User Name'),   DTColumnBuilder.newColumn(2).withTitle('Email'),   DTColumnBuilder.newColumn(3).withTitle('LoginID'),   DTColumnBuilder.newColumn(4).withTitle('Location Name'),   DTColumnBuilder.newColumn(5).withTitle('Role Name'),   DTColumnBuilder.newColumn(6).withTitle('Active').withOption('width', '7%') ];

You can skip the <thead> section entirely if you do as above. Finally I would reduce the two last redundant <td>'s to one :

<td class="center-text">  <span ng-show="user.IsActive == true" class="icon-check2"></span>  <span ng-show="user.IsActive == false" class="icon-close"></span></td>