How to call the destroy function of angular datatables?

Question

I have a controller and I want to call the destroy function of Jquery Datatables in the controller in a watch method:

      $scope.$watch('model.SelectedWaiver', function() {
        if ($scope.model.SelectedWaiver.SurchargeID != null) {
            //destroy table here
            $scope.getIndecies($scope.model.SelectedWaiver);

        }
    });

I am not setting up the table in any way currently because there are two tables on the page:

first:

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

second:

<table datatable="ng" id="secondTable" dt-options="dtOptions" dt-columns="dtColumns" class="table-bordered">
    //stuff
</table>

I want to destroy this table when the user selects a different row in the first table.

jquery equivalent:

<script>
    $(document).ready(function() {
        var table = $('#secondTable').DataTable();


    });
    $('#selectedWaiver').on('change', function () {
        table.destroy();
    });
</script>

How do I do this part of the code in angular?

Using this to inject datatables

Answer 1

With dtInstance you have access to the dataTables API :

$scope.dtInstance = {};

add dtInstance as declaration to the table

<table datatable dt-instance="dtInstance" dt-options="dtOptions" dt-columns="dtColumns">

Now you can destroy the dataTable with

$scope.dtInstance.DataTable.destroy();

angular dataTables have a extended ngDestroy() cleaning up bindings made by itself :

$scope.dtInstance.DataTable.ngDestroy();

There is still some style (and a little bit more garbage left) in the headers, so remove them too (here on a table with the id #table) :

$scope.destroy = function() {
    $scope.dtInstance.DataTable.ngDestroy();
    var i, ths = document.querySelectorAll('#table th');
       for (i=0;i<ths.length;i++) {
          ths[i].removeAttribute('style'); 
       }
    }
}

demo -> http://plnkr.co/edit/fQ9YjsbNBNzyYuuvpk6T?p=preview

If you have multiple angular dataTables, use multiple dtInstances and different table id's.