Datatables show no data available in the table - angularjs

Question

Can someone help me on this matter? Here are my codes:
<div class="modal-body no-padding" style="overflow-y: scroll; max-height: 500px;">
<table width="auto" class="table report-table table-star" id="example">
<thead>
<tr>
<td class="center">#</td>
<th>Name</th>
<th>Email / Mobile</th>
<th>Date / Time</th>
<th>Excellent</th>
<th>Good</th>
<th>Average</th>
<th>Bad</th>
<th>Worse</th>
</tr>
</thead>
<tr ng-repeat="u in user_report">
<td class="center">{{$index+1}}</td>
<td>{{u.name}}</td>
<td>{{u.email}} / {{u.mobile}}</td>
<td>{{u.timestamp}}</td>
<td class="center">
<span ng-if="u.choice == 1"><i class="fas fa-check"></i></span>
<span ng-if="u.choice != 1"><i class="fas fa-times"></i></span>
</td>
<td class="center">
<span ng-if="u.choice == 2"><i class="fas fa-check"></i></span>
<span ng-if="u.choice != 2"><i class="fas fa-times"></i></span>
</td>
<td class="center">
<span ng-if="u.choice == 3"><i class="fas fa-check"></i></span>
<span ng-if="u.choice != 3"><i class="fas fa-times"></i></span>
</td>
<td class="center">
<span ng-if="u.choice == 4"><i class="fas fa-check"></i></span>
<span ng-if="u.choice != 4"><i class="fas fa-times"></i></span>
</td>
<td class="center">
<span ng-if="u.choice == 5"><i class="fas fa-check"></i></span>
<span ng-if="u.choice != 5"><i class="fas fa-times"></i></span>
</td>
</tr>
</table>
</div>
And the script below the html to call the datatable:
<script>$(document).ready(function() {$('#example').DataTable();} );</script>
By the way, it show the data but there is "No data available in the table" message on the last row. Once I click on the sorting / pagination, the data gone out from the table.