title: AngularJs with DataTable custom search box
body: <p>I am working with AngularJs+DataTable library, and I wish to create a custom control that can apply a exactly search function from DataTable, but with custom UI and control. However, the <code>serch()</code> return 0 length result which no consist any string value and the <code>draw()</code> isn't call properly.</p>
  
  <p>I have follow some similar question on github, article and implement with <code>$scope.dtInstance.DataTable.search(...).draw();</code>
  but turn out, it wouldn't working, so below is what I try, but same result. 
  Any suggestion?</p>
  
  <p>Here is my HTML implementation</p>
  
  <pre><code>&lt;button class="btn btn-white btn-sm" type="button" 
  data-toggle="collapse" data-target="#collapseSearch" 
  aria-expanded="false"    
  aria-controls="collapseSearch"&gt;
  &lt;i class="fa fa-search"&gt;&lt;/i&gt; Search
  &lt;/button&gt;
  
  &lt;div class="collapse" id="collapseSearch"&gt;
                          &lt;div class="row margin-top-20px"&gt;
                              &lt;div class="col-sm-12 margin-bottom-5px"&gt;
                                  &lt;div class="input-group bookingRecordDataTable_filter dataTables_filter"&gt;
                                      &lt;span class="input-group-addon input-addon-green"&gt;Search&lt;/span&gt;
                                      &lt;input type="search" class="form-control" 
                                      ng-model="searchText" 
                                        ng-change="searchTable()" 
                                        placeholder="search" 
                                        aria-controls="bookingRecordDataTable"&gt;
                                  &lt;/div&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
  
  &lt;table datatable="ng"
  class="table table-hover"
  dt-options="dtOptions"
  dt-column-defs="dtColumnDefs" id="bookingRecordDataTable"
   dt-instance="dtInstanceCallback"&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>Here is the angular controller</p>
  
  <pre><code> $scope.dtOptions = DTOptionsBuilder.newOptions()
      .withOption('bInfo', false)
      .withOption('bFilter', false)
      .withOption('bAutoWidth', false)
      .withOption('bLengthChange', false)
      .withDOM("&lt;'col-sm-12't&gt;&lt;'col-sm-12'p&gt;")
      .withOption('order', [0, 'desc'])
      .withBootstrap();
  $scope.dtColumnDefs = [
      DTColumnDefBuilder.newColumnDef(0).withTitle('Id').notVisible(),
    ...
  ];
  $scope.dtInstanceCallback = function(dtInstance)
  {
      var datatableObj = dtInstance;
      $scope.tableInstance = datatableObj;
  }
  $scope.searchTable = function ()
  {
      console.log($scope.tableInstance);
      var query = $scope.searchText;
      console.log(query);
      var result = $scope.tableInstance.DataTable.search(query, false, false, false);
      console.log(result);
      $scope.tableInstance.DataTable.search(query, false, false, true).draw();
  };
  </code></pre>