title: How to call the destroy function of angular datatables?
body: <p>I have a controller and I want to call the destroy function of Jquery Datatables in the controller in a watch method:</p>
  
  <pre><code>      $scope.$watch('model.SelectedWaiver', function() {
          if ($scope.model.SelectedWaiver.SurchargeID != null) {
              //destroy table here
              $scope.getIndecies($scope.model.SelectedWaiver);
  
          }
      });
  </code></pre>
  
  <p>I am not setting up the table in any way currently because there are two tables on the page:</p>
  
  <p>first:</p>
  
  <pre><code>&lt;table datatable="ng" dt-options="dtOptions" dt-columns="dtColumns" class="table-bordered"&gt;
      //stuff
  &lt;/table&gt;
  </code></pre>
  
  <p>second:</p>
  
  <pre><code>&lt;table datatable="ng" id="secondTable" dt-options="dtOptions" dt-columns="dtColumns" class="table-bordered"&gt;
      //stuff
  &lt;/table&gt;
  </code></pre>
  
  <p>I want to destroy this table when the user selects a different row in the first table.</p>
  
  <p>jquery equivalent:</p>
  
  <pre><code>&lt;script&gt;
      $(document).ready(function() {
          var table = $('#secondTable').DataTable();
  
  
      });
      $('#selectedWaiver').on('change', function () {
          table.destroy();
      });
  &lt;/script&gt;
  </code></pre>
  
  <p>How do I do this part of the code in angular?</p>
  
  <p><a href="https://l-lin.github.io/angular-datatables/#/welcome" rel="nofollow">Using this to inject datatables</a></p>