如何将现有表（Html）转换为AngularJS中的jQuery数据表

Question

下面是我用来在表格中显示数据的html，它的工作正常。

现在我想将其转换为jQuery Datatables。

HTML： -

<table cellpadding="3" class="table table-bordered">
            <thead>                
                <tr class="success">                      
                    <th style="cursor: pointer;" ng-click="sort('DOB')"><b>DOB</b>  <span class="glyphicon sort-icon" ng-show="sortKey=='DOB'" ng-class="{'glyphicon-chevron-up':reverse,'glyphicon-chevron-down':!reverse}"></span></th>
                    <th style="cursor: pointer;" ng-click="sort('StateName')"><b>State</b>  <span class="glyphicon sort-icon" ng-show="sortKey=='StateName'" ng-class="{'glyphicon-chevron-up':reverse,'glyphicon-chevron-down':!reverse}"></span></th>
                    <th style="cursor: pointer;" ng-click="sort('FileId')"><b>Image</b>  <span class="glyphicon sort-icon" ng-show="sortKey=='FileId'" ng-class="{'glyphicon-chevron-up':reverse,'glyphicon-chevron-down':!reverse}"></span></th>
                    <th><b>Actions</b></th>                       
                </tr>
            </thead>
            <tbody>
                <tr dir-paginate="employee in employees|orderBy:sortKey:reverse|filter:search|itemsPerPage:5" ng-model="search">
                    <td>{{employee.DOB | date:'MM/dd/yyyy' }}                   
                    <td>{{employee.StateName}}
                    </td>
                    <td>                     
                    <img ng-src="UploadedFiles/{{employee.FilePath}}" class="img-circle" style="max-width: 50px" alt='Employee Image Missing' />
                    </td>
                </tr>
           </tbody>            
</table>