Not update dataTable info - angularjs

Question

I have a class list. As you can see in the first picture, there are different numbers of students in each class.
1st class -> 3
2nd class -> 0
3rd class -> 1
When I click on '(3)', I use the variable "sinif" as $scope.sinif for use in modal. I list $scope.sinif.ogrenciler in modal with ng-repeat. When I click (3), the list is correct. But when I turn off modal and click (0), the info is not updated. Likewise when I click (1). How can we solve this.
This is my first list. After clicking on the following modal opens.
Modal
This problem here. Look info
This is My modal.
<!-- Modal -->
<div class="modal fade in" id="SinifOgrenci" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel"> {{this.sinif.sinifAdi}} - Öğrencileri </h4>
</div>
<div class="modal-body">
<table datatable-setups ng-if="sinif.ogrenciler" class="table table-bordered table-striped js-dataTable-full-pagination">
<thead>
<tr>
<th class="hidden-xs" style="width: 5%;"></th>
<th class="text-center">Öğrenci Adı Soyadı</th>
<th class="text-center">Yaş</th>
<th class="text-center">Boy</th>
<th class="text-center">Cinsiyet</th>
<!--<th class="text-center">Aktif / Pasif</th>-->
</tr>
</thead>
<tbody>
<tr ng-repeat="ogrenci in sinif.ogrenciler">
<td class="hidden-xs">{{this.ogrenci.id}}</td>
<td class="text-center">{{this.ogrenci.adSoyad}}</td>
<td class="text-center">{{this.ogrenci.yas}}</td>
<td class="text-center">{{this.ogrenci.boy}}</td>
<td class="text-center">{{this.ogrenci.cinsiyet}}</td>
</tr>
</tbody>
</table>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal"> Kapat </button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
My datatable directive
angular.module("app")
.directive('datatableSetups', ['$timeout', '$rootScope',
function ($timeout, $rootScope) {
return {
restrict: 'A',
link: function (scope, element) {
$timeout(function () {
element.dataTable({
pagingType: "full_numbers",
columnDefs: [],
pageLength: 10,
lengthMenu: [[5, 10, 15, 20], [5, 10, 15, 20]]
});
});
}
};
}
]);