angularjs datatable is not working while using datatable='ng' searching and pagination

Question

My Controller

.controller('BankaccountViewController', function($scope, $uibModal, $log, $location, $routeParams, $timeout, DTOptionsBuilder, BankaccountService) {
    
    $scope.dtOptions = DTOptionsBuilder.newOptions()
    .withOption('lengthMenu', [[10, 25, 50, -1], [10, 25, 50, "All"]])
    .withOption('oLanguage', {"sEmptyTable": "No timesheets available on the selected criteria..!" })
    
   /* setTimeout(function(){
      angular.element('#example').dataTable( {
        paging: true,
        searching: false
      });
    }, 0); */
    
  
    
    $scope.dtInstance = {};

    $scope.dtInstanceCallback = function(_dtInstance) {
      $scope.dtInstance = _dtInstance;
      $scope.dtInstance.reloadData(); //or something else....
    }
    
    
    $scope.setBankAccountDatas = function() {
      BankaccountService.getBankaccount($routeParams.id)
      .success(function(data){
          if(data.status == 403) {
            $location.path('/403');
          }
          $scope.bankaccount = data.bankaccount;
          $scope.total = data.total;
          $scope.bankaccounts = data.bankaccounts;
          $scope.bankaccountentries = data.bankaccountentries;
      });
    }
    $scope.setBankAccountDatas();
    
      /* filter Expenses date */
    $scope.setBankAccountDatas = function(formData) {
      BankaccountService.getBankaccountsentry($routeParams.id, formData)
      .success(function(response) {
        $scope.bankaccountentries = response.bankaccountentries;
      });
    }
    
    $scope.bankaccountFormData = {};

    $scope.bankaccountFormData.date = {
        startDate: moment().startOf('day'),
        endDate: moment().endOf('day')
    };
    
    $scope.$watch("bankaccountFormData.date", function(newValue, oldValue) {
        $scope.filterDate();
    });
    
    $scope.setBankAccountDatas($scope.bankaccountFormData);
    
    $scope.filterDate = function() {
      $scope.setBankAccountDatas($scope.bankaccountFormData);
    }
    // reset form data
    $scope.resetData = function() {  
      $scope.bankaccountFormData.date = {
          startDate: moment('19700101 +0000'),
          endDate: moment().endOf('day')
      };
    }

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.7/angular.min.js"></script>
<div class="row">
  <div class="col-xs-12"> 
    <div class="">
      <div class="box-header">
        <h3 class="box-title">Transaction Details</h3>
      </div><!-- /.box-header -->
      
        <form name="dateFilterForm">  
          <div class="clearfix">     
            <div class="col-xs-3">
              <label>Filter by:Date</label>
              <input class="form-control" type="text" ng-model="bankaccountFormData.date" date-range-picker options="dateRangeOptions" ng-change="filterDate()">
            </div>
            <div class="col-xs-3">
              <button class="btn btn-sm" ng-click="resetData()">Reset</button>
            </div>
          </div> 
        </form>    
                  
        <table id="example" datatable="ng" dt-columns="dtColumns" dt-options="dtOptions"  dt-instance="dtInstanceCallback" class="table table-striped">
          <thead>
            <tr>
              <th>Ref. No</th>
              <th>Dr / Cr</th>
              <th>Amount Rs.</th>
              <th>Date</th>
            </tr>
          </thead>
          <tbody>
            <tr ng-repeat="bae in bankaccountentries">
              <td>{{ bae.ref_no }}</td>
              <td>{{ bae.dr_cr }}</td>
              <td>{{ bae.amount }}</td>
              <td>{{ bae.date  | amFromUnix | amDateFormat: 'DD-MM-Y' }}</td>
            </tr>
          </tbody> 
        </table>
    </div>
  </div>
</div>

 datatable="ng" dt-columns="dtColumns" dt-options="dtOptions"  dt-instance="dtInstanceCallback" class="table table-striped">
      <thead>
        <tr>
          <th>Ref. No</th>
          <th>Dr / Cr</th>
          <th>Amount Rs.</th>
          <th>Date</th>
        </tr>
      </thead>
      <tbody>
        <tr ng-repeat="bae in bankaccountentries">
          <td>{{ bae.ref_no }}</td>
          <td>{{ bae.dr_cr }}</td>
          <td>{{ bae.amount }}</td>
          <td>{{ bae.date  | amFromUnix | amDateFormat: 'DD-MM-Y' }}</td>
        </tr>
      </tbody> 
    </table>

Answer 1

use $compile

withOption('drawCallback', function() {
    $scope.$apply($compile(angular.element('#tableId'))($scope))
}