Angular datatables

<!DOCTYPE html>
<html>

<head>
    <link rel="stylesheet" href="//cdn.datatables.net/1.10.1/css/jquery.dataTables.css" />
<style>
  table.dataTable td {
     vertical-align: top;
  }
</style>
</head>

<body ng-app="datatablesSampleApp" ng-controller="sampleCtrl">
  

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

    <script data-require="jquery@1.10.1" data-semver="1.10.1" src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
    <script src="//cdn.datatables.net/1.10.1/js/jquery.dataTables.js"></script>
    <script type="text/javascript" src="http://code.angularjs.org/1.6.9/angular.js"></script>
    <script type="text/javascript" src="https://rawgithub.com/l-lin/angular-datatables/v0.6.1/dist/angular-datatables.js"></script>
    <script type="text/javascript" src="https://rawgithub.com/a8m/angular-filter/master/dist/angular-filter.js"></script>
    <script src="script.js"></script>      
    
</body>  
  
</html>

(function(angular) {
    'use strict';
    angular.module('datatablesSampleApp', ['datatables', 'angular.filter']).
    controller('sampleCtrl', function($scope, $q, $http,  $compile, DTOptionsBuilder, DTColumnBuilder, DTColumnDefBuilder) {
       
$scope.buttonClick = function() {
  alert('clicked')
}      
 
   
$scope.dtOptions = 
  DTOptionsBuilder.fromFnPromise(function() {  
    var defer = $q.defer();
    $http({
      method: 'GET',
      url: 'issues.json'
    }).then(function(result) {
      var data = [];
      result.data.forEach(function(i) {
        var item = data.find(item => item.IssueId == i.IssueId)
        if (item) {
          item.childs.push(i)
        } else {
        data.push({ 
          IssueId: i.IssueId, 
          Issue: i.Issue,
          MeetingNo: i.MeetingNo,      
          childs: [i] 
        })
      }
    }) 
    defer.resolve(data);
  })
  return defer.promise;
})    
  

$scope.dtColumns = [
DTColumnBuilder.newColumn(null).withTitle('No')
  .withOption('createdCell', function(cell, cellData, rowData, rowIndex, colIndex) {
     if (rowData.AnswerStatus == 1) $(cell).addClass('read')
  })  
  .renderWith(function(data, type, full, meta) {
    return (meta.row+1);
  }),
 DTColumnBuilder.newColumn('Issue').withTitle('Issue'),
 DTColumnBuilder.newColumn('MeetingNo').withTitle('Meeting No.'),
 DTColumnBuilder.newColumn(null)
   .withTitle('Department/Unit') 
   .renderWith(function(data, type, row, meta) {
       var html = '<table><tbody>';
       row.childs.forEach(function(child) {
         html += '<tr><td>'+child.Department+'/'+child.Unit+'</td></tr>'
         html += '<tr><td><button ng-click="buttonClick()">click</button></td></tr>'
       }) 
       html += '</tbody></table>'
       return html
    })
   .withOption('createdCell', function(cell, cellData, rowData, rowIndex, colIndex) {    
     $compile(cell)($scope);  
   })

 ];

          
    });
})(angular);

[{
    "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"

}]