angular with symfony - angular-datatables n.hide is not a function

Question

I am building an application that has the client-side(frontend), with angularJS and angular-datatables (included in modal), separately from the server-side(backend) that uses symfony framework.

Unfortunately I have a similar error related to datatable :

TypeError: n.hide is not a function
at Object.n [as showLoading] (http://....dev/server/assets/client/dist/vendor.min.js:33:6014)
at http://....dev/server/assets/client/dist/vendor.min.js:33:433
at http://....dev/server/assets/client/dist/vendor.min.js:2:580
at m (http://....dev/server/assets/client/dist/vendor.min.js:1:27139)
at s (http://....dev/server/assets/client/dist/vendor.min.js:1:23018)
at m (http://....dev/server/assets/client/dist/vendor.min.js:1:27084)
at s (http://....dev/server/assets/client/dist/vendor.min.js:1:23018)
at s (http://....dev/server/assets/client/dist/vendor.min.js:1:23035)
at http://....dev/server/assets/client/dist/vendor.min.js:1:22641
at T.r (http://....dev/server/assets/client/dist/vendor.min.js:1:23490) <table datatable="" dt-options="mad.dtOptions" dt-columns="mad.dtColumns" dt-instance="mad.dtInstance" class="table table-striped table-bordered dataTable ng-isolate-scope">

Template:

<div ng-controller="modalAndDatatable as mad">
    <table datatable dt-options="mad.dtOptions" dt-columns="mad.dtColumns" dt-instance="mad.dtInstance"
           class="table table-striped table-bordered dataTable">
    </table>
</div>

Controller:

reporting.controller('modalAndDatatable', function($scope, moduleConfig, DTOptionsBuilder, DTColumnBuilder) {

var baseUrl = moduleConfig[ENV].apiBaseUrl + "/portal";
$scope.imageUrl = moduleConfig[ENV].imageUrl;

var vm = this;

vm.dtInstance = {};

var getColumnForReport = function (reportId, subReportId) {
    /*
     * Columns for Report
     * reportId = 1
     */
    if (reportId == 1) {
        /*
         * Columns for SD Report
         * subReportId = 3
         */
        if (subReportId == 3) {
            vm.dtColumns = [
                DTColumnBuilder.newColumn('10W').withTitle('10W'),
                DTColumnBuilder.newColumn('10S').withTitle('10S'),
                DTColumnBuilder.newColumn('10F').withTitle('10F')
            ];
        }
    }
};

var extraParam = "";
$scope.loadingDOM = '<div class="loading-spiner-reports">' +
    '<div class="loading-spiner"><img src="' + $scope.imageUrl + 'images/loader.gif"  width="100"/></div></div>';

if ($scope.selectedSubItem)
    extraParam = '/' + $scope.selectedSubItem;

vm.dtOptions = DTOptionsBuilder.newOptions()
    .withOption('ajax', {
        url: baseUrl + '/ag-report/' + $scope.selectedItem + extraParam,
        type: 'POST'
    })
    .withDataProp('aaData')
    .withOption('processing', true)
    .withOption('language', {
        'sLoadingRecords': $scope.loadingDOM,
        'sProcessing': $scope.loadingDOM
    })
    .withOption('serverSide', true)
    .withPaginationType('full_numbers')
    .withOption('scrollY', '275px')
    .withOption('scrollX', '100%')
    .withOption('scrollCollapse', true)
    .withOption('initComplete', function () {
        $('<button>').text('search').attr('id', 'new-search').attr('class', 'btn btn-default btn-sm').appendTo('.dataTables_filter');
        $('.dataTables_filter input').unbind();
        $('#new-search').on('click', function () {
            $scope.mad.dtInstance.DataTable.search($('.dataTables_filter input').val()).draw();
        });
    });

getColumnForReport($scope.selectedItem, $scope.selectedSubItem);});

Also the needed javascript files are in the requested order (jquery.min.js, jquery.dataTables.min.js, angular.min.js, angular-datatables.min.js).

I have to mention that everything works as expected when using the client separately from server, but when the client is deployed on server-side with the help o ruby (rake) and gulp , and all the scripts are minified, the error occurs.

Any ideas of what may be wrong?

Thanks.