Datatables not reloading in angularjs

Question

I have a requirement where i have to add particular products to the datatables and rebind the datatable so its count is updated. I am using MVC and angularjs 1.6.2

I am creating the datatable as follows:

<table id="dtProducts" ng-if="AllProducts"
       class="table manage-user-table offer-mgt-table market-selection-tab"
       datatable="ng" dt-options="dataTableOpt">
    <thead>
        <tr>
            <th><input type='checkbox' class="selectAllMarket" 
                       value='SelectAll' ng-model="selectAll" >
            </th>
            <th>Product Name</th>
            <th>Product Type</th>
        </tr>
    </thead>
    <tbody>
        <tr dt-rows ng-repeat="product in AllProducts">
            <td><input type="checkbox" class="selectMarket"
                       ng-model="product.selected"
                       data-offerid="{{product.ID}}"
                       ng-click="toggleSelect(product.selected, $index)">
            </td>
            <td>{{product.Name}}</td>
            <td>{{product.VerticalType.VerticalTypeDisplayName}}</td>

        </tr>
    </tbody>
</table>

There a section on a view that contains a text box to take product name and a dropdown to take product type.It also contains an Add button on clicking the button a post is hit on the server to save that product and on the success of that post on front end i call function to reload the AllProducts. As soon as that function is called i get the error

TypeError: o.ngDestroy is not a function in angularjs dataTables.

Reloading of the datatable is done through the following code after saving of products in the table

var getAllProducts = function () {
    var urlgetAllProducts = apiURL + "/AllProducts?providerId=" + providerID;
    $http({
        url: urlgetAllProducts,
        method: 'GET', //$scope.customization,
    }).then(function successcallback(response) {

        $scope.AllProducts = response.data.ResponseData;


        $scope.$parent.AllProducts = $scope.AllProducts;
        if ($scope.offer.ProductList != undefined) {

            MakeSelected();
            $scope.selectProducts();

        }

    },
    function errorcallback(response) {
    }).then(function () {
    });
}

Can anyone help me in this regard? I am using angulardatatables 0.6.2. I can provider more details if needed. Thanks

Krute

Please provide the code where you're reloading the data. Also share how the dataTableOpt is created. – Pilocarpine

It would be wiser to use ng-change instead of ng-click. What is the data-offerid attribute about? Is it a custom directive? Or is the jQuery using it to manipulate the checkbox? (Not a good idea.) – Hernardo

The ng-if creates a child scope. That could cause a data hiding problem with the selectAll checkbox. – Hernardo

@Hernardo I have handled it through code – Krute

@naturmaN Please see my edit. – Krute

I have noted one thing no matter whatever i push any object in $scope.AllProducts i get this error – Krute

Answer 1

I found solution to it. I was lazily binding the library due to which it was causing issues. By putting the loading part in the setTimeout it worked like a charm

Krute