custom column filter in datatable with angularjs

I have implemented server-side processing datatable with angularjs refering this link. It works great. Now I want to add custom filter in the datatable like this. I have implemented custom search. But outside the table. See . But I want it just below the header of the table with close icon on each field as shown in first link. I have try this link too. But I was getting error of jquery.datatable (e[i] is undefined.). I can set PHP side function to get filtered data. So it's not worried task for me. I'm getting problem in setting those text/select boxes in the position as shown in first link with close icon. If anyone can help me, it will be appreciated. Here is my code for HTML and JS.

HTML

<div class="row" ng-app="tagApp" ng-controller="tagCtrl as tagapp">
    <div class="panel-body">
        <div class="row" style="margin-bottom: 15px;">
            <div class="form-group">
                <div id="searchForm" class="col-md-10">
                    <div class="col-md-6">
                        <input type="text" placeholder="Search Tag" name="tag" class="form-control">
                    </div>
                    <div class="col-md-6">
                        <input type="text" placeholder="Search Description" name="description" class="form-control">
                    </div>
                </div>
                <div class="col-md-2">
                    <button id="searchData" class="btn btn-submit" ng-click="tagapp.dataSearch()">Search</button>
                    <button id="clearSearch" class="btn btn-submit" ng-click="tagapp.clearSearch()">Clear</button>
                </div>  
            </div>
        </div>
        <div id="datatable" class="dataTables_wrapper no-footer">
            <div class="row">
                <div class="col-sm-12 ">
                    <table id="" datatable="" dt-options="tagapp.dtOptions" dt-columns="tagapp.dtColumns" dt-instance="tagapp.dtInstance" class="table table-striped table-bordered dt-responsive nowrap dataTable no-footer dtr-inline collapsed row-border hover">
                    </table>
                </div>
            </div>
        </div>    
    </div>
</div>

JS

angular.module('tagApp', ['datatables'])
    .controller('tagCtrl', ['DTOptionsBuilder', 'DTColumnBuilder', '$scope', '$http', '$compile', tagCtrl]);


function tagCtrl(DTOptionsBuilder, DTColumnBuilder, $scope, $http, $compile) {
    var vm = this;

    vm.API_URL = base_path + 'api/v1/';
    vm.dataSearch = dataSearch;
    vm.clearSearch = clearSearch;
    vm.dtInstance = {};
    vm.tags = {};

    var headers = {'Content-Type': 'application/x-www-form-urlencoded'};
    })

    vm.dtOptions = DTOptionsBuilder.newOptions()
        .withOption('ajax', {
            // Either you specify the AjaxDataProp here
            dataSrc: 'data',
            url: vm.API_URL + 'tags',
            type: 'GET',
            headers: headers
        })
        // or here
        .withDataProp('data')
        .withOption('processing', true)
        .withOption('serverSide', true)
        .withOption('lengthMenu', [[5, 10, 50, 100, -1], [5, 10, 50, 100, "All"]])
        .withPaginationType('full_numbers')
        .withOption('createdRow', createdRow);

    vm.dtColumns = [DTColumnBuilder.newColumn('in_tag_id').withTitle('ID').notVisible(),
    DTColumnBuilder.newColumn('st_name').withTitle('Tag'),
    DTColumnBuilder.newColumn('st_description').withTitle('Description').notSortable(),
    DTColumnBuilder.newColumn(null).withTitle('Action').notSortable().renderWith(actionHtml)
];

function createdRow(row, data, dataIndex) {
    // Recompiling so we can bind Angular directive to the DT
    $compile(angular.element(row).contents())($scope);
}

function actionHtml(data, type, full, meta) {
    vm.tags[data.in_tag_id] = data;

    var prmsn = '';
    if (data.action == 1)
    {
        prmsn = '<button class="btn btn-default btn-rounded btn-sm" id="editTag" data-toggle="modal" data-target="#tagModal" ng-click="tagapp.toggle(\'edit\', ' + data.in_tag_id + ')"><span class="fa fa-pencil"></span></button>';
    }
    else
    {
        prmsn = 'NP';
    }
    return prmsn;
}

function dataSearch()
{
    var qrystrng = '?';
    $('#searchForm input').each(function () {
        qrystrng += $(this).attr('name') + '=' + $(this).val() + '&';
    });
    $('#searchForm select').each(function () {
        qrystrng += $(this).attr('name') + '=' + $(this).val() + '&';
    });
    qrystrng = qrystrng.slice(0, -1);
    var link = vm.API_URL + 'tags' + qrystrng;
    vm.dtInstance.changeData(link);
}

function clearSearch()
{
    $('#searchForm input').each(function () {
        $(this).val('');
    });
    $('#searchForm select').each(function () {
        $(this).prop('selectedIndex', 0);
    });
    vm.dataSearch();
}
}

NOTE: I have used these libraries only.

• jquery.dataTables.min.js
• dataTables.bootstrap.min.js
• angular-datatables.min.js