<table datatable="ng" dt-options="dtOptions" class="table table-striped table-bordered">
                                <thead>
                                    <tr>
                                      <th>No</th>
                                        <th>Issue</th>
                                        <th>Meeting No.</th>
                                          <th>Department/Unit</th>
                                   </tr>
                                </thead>
                                <tbody>
                                    <tr ng-repeat="(key, value) in issueList | groupBy : 'IssueId' | reverse track by $index">
                                      <td ng-class="{read : value[0].AnswerStatus == 1}">{{$index+1}}</td>
                                        <td>{{value[0].Issue}}</td>
                                        <td>{{value[0].MeetingNo}}</td>
                                        <td>
                                          <table class="table table-striped table-bordered" cellspacing="0" width="100%">
                                            <tbody>
                                              <tr ng-repeat="x in value">
                                              <td width="80%">{{x.Department}}/{{x.Unit}}</td>
                                            <td>  <a class="btn btn-default waves-effect m-b-5" ng-click="sendDetail(x.IssueId,x.UnitId)"><i class="fa fa-folder-open"></i> Show </a></td>
                                            </tr>
                                            </tbody>
                                          </table>
                                          </td>

                                    </tr>

                    </tbody>
                            </table>

$scope.dtOptions =
DTOptionsBuilder.newOptions()
.withOption('stateSave', true)
.withOption('stateDuration', -1)
.withOption('deferRender', true);

$http({
method: 'GET',
url: 'http://issue.json'})
.then(function(response) {
    $scope.issueList = response.data;
  });

[{
    "IssueId": "1",
    "MeetingNo": "1",
    "Issue": "Issue title 1",
    "Content": "Content 1",
    "AnswerStatus": null,
    "UnitId": 1,
    "Unit": "Unit 1",
    "DepartmentId": 1,
    "Department": "Department 1"
}, {
    "IssueId": "2",
    "MeetingNo": "1",
    "Issue": "Issue title 2",
    "Content": "Content 2",
    "AnswerStatus": null,
    "UnitId": 5,
    "Unit": "Unit 5",
    "DepartmentId": 1,
    "Department": "Department 1"
}, {
    "IssueId": "2",
    "MeetingNo": "1",
    "Issue": "Issue title 2",
    "Content": "Content 2",
    "AnswerStatus": 1,
    "UnitId": 6,
    "Unit": "Unit 6",
    "DepartmentId": 1,
    "Department": "Department 1"

}]

<table datatable="" dt-options="dtOptions" dt-columns="dtColumns" class="table table-striped table-bordered">

                            </table>

$scope.dtOptions =
    DTOptionsBuilder.fromFnPromise(function() {
        var defer = $q.defer();
            $http({
          method: 'GET',
          url: 'http://issue.json'
      }).then(function(result) {
            defer.resolve(result.data);
        });
        return defer.promise;
    })
    .withOption('stateSave', true)
    .withOption('stateDuration', -1)
    .withOption('deferRender', true); //the very reason to use promise for performance booth

$scope.dtColumns = [
DTColumnBuilder.newColumn(null).withTitle('No')
        .renderWith(function(data, type, full, meta) {
            return (meta.row+1);
        }),
 DTColumnBuilder.newColumn('Issue').withTitle('Issue'),
 DTColumnBuilder.newColumn('MeetingNo').withTitle('Meeting No.'),
 DTColumnBuilder.newColumn('Department').withTitle('Department/Unit'),
 ];