angularjs ajax datatable,Cannot reinitialise DataTable - AngularJS with datatable

When I combine AngularJS (1.6.x) with jQuery data-tables, I get alert error:

Cannot reinitialise DataTable

First I use AngularJS to bind and fill data-tables,

then I try to add Individual column searching (text inputs) feature.

AngularJS initialize data-tables, but does not give me a handle.

Here is my code:

var app1=angular.module('formvalid', ['ui.bootstrap','ui.utils']);

app1.controller('validationCtrl',function($scope){

angular.element(document).ready(function () {

// Setup - add a text input to each footer cell

$('#example tfoot th').each( function () {

var title = $(this).text();

$(this).html( '' );

} );

console.log(' document ready function, add search by column feature ');

var table = $('#example').DataTable();

// Apply the search

table.columns().every( function () {

var that = this;

$( 'input', this.footer() ).on( 'keyup change', function () {

if ( that.search() !== this.value ) {

that

.search( this.value )

.draw();

}

} );

} );

});// document ready

$scope.data=[[

"Tiger Nixon",

"System Architect",

"Edinburgh",

"5421",

"2011\/04\/25",

"$320,800"

]];

$scope.dataTableOpt = {

//custom datatable options

// or load data through ajax call also

// "data": $scope.data00, // this is not real binding, the real binding is ui-jq="dataTable" ui-options="dataTableOpt", fill $scope.data

"aLengthMenu": [[10, 50, 100,-1], [10, 50, 100,'All']],

};

});