Filtering and Sorting in Angular JS with List JS

Question

I have an array of objects of below structure, where CustList is an array of Customer records. I created 4 more variables to populate a filter dropdown.

//<app.js code>
$scope.CustList = [];
$scope.Customer = {
       "DataCenter":"", 
       "Geo":"",    
       "CustomerName":"",   
       "ESX":"",    
       "TenantKey":"",  
       "Env":"",    
       "Version":""
}
$scope.SaESX = _.uniq(response.data,'ESX').map(a => a.ESX);
$scope.SaEnv = _.uniq(response.data,'Env').map(a => a.Env);
$scope.SaGeo = _.uniq(response.data,'Geo').map(a => a.Geo);
$scope.SaDC = _.uniq(response.data,'DataCenter').map(a => a.DataCenter);
$scope.SaVersion = _.uniq(response.data,'Version').map(a => a.Version);

My HTML Code looks like this.

<div id='custByType' class='cardBody' scroll="auto">
    <b>Filters</b>
    <div class='filterBar'>
        <B>Geo:</B>
        <select class='selList' ng-model="Customer.Geo" ng-change='updateList()'>
            <option value="? string:?" selected></option>
            <option ng-repeat="geo in SaGeo" value="{{geo}}">{{geo}}</option>
        </select>
        &nbsp;&nbsp;
        <b>ESX:</b>
        <select class='selList' ng-model="Customer.ESX">
                <option value="? string:?" selected></option>
                <option ng-repeat="ESX in SaESX" value="{{ESX}}">{{ESX}}</option>
        </select>
        &nbsp;&nbsp;
        <b>DataCenter:</b>
        <select class='selList' ng-model="Customer.DataCenter">
                <option value="? string:?" selected></option>
                <option ng-repeat="dc in SaDC" value="{{dc}}">{{dc}}</option>
        </select>
        &nbsp;&nbsp;
        <B>Version:</B>
        <select class='selList' ng-model="Customer.Version">
                <option value="? string:?" selected></option>
                <option ng-repeat="v in SaVersion" value="{{v}}">{{v}}</option>
        </select>
        <button class='btn btn-small btn-primary' ng-click='resetFilter()'>Reset</button>
    </div>
        <div class='searchBar'>
            <span class='alignleft'>
                <button class='btn btn-small btn-primary' onClick='ShowAdd()'>Add All</button>
                <button class='btn btn-small btn-primary'>Add Selected</button>
            </span>
            <span class='alignright'>
                <input class='ALLsearch inpField' style='width:100px;' id='searchSaaS' placeholder="Search"/>
                <button class='btn btn-small btn-primary' onClick='setPagination(custTypeList,10)'>10</button>
                <button class='btn btn-small btn-primary' onClick='setPagination(custTypeList,20)'>20</button>
                <button class='btn btn-small btn-primary' onClick='setPagination(custTypeList,50)'>50</button>
                <button class='btn btn-small btn-primary' onClick='setPagination(custTypeList,99999)'>All</button>
            </span>
        </div>
        <table class="newListTable">
        <thead><tr>
            <th></th>
            <th>Tenant Key</th>
            <th>Name</th>
            <th>Geo</th>
            <th>DC</th>
            <th>Env</th>
            <th>Version</th>
            <th></th>
        </tr></thead>
        <tbody class="list" >
            <TR  ng-repeat="cust in CustList | filter:Customer | unique: 'TenantKey'"> <!--  -->
                <td><input type='checkbox'></td>
                <td class="tenantkey" ng-bind='cust.TenantKey'></TD>
                <td class="account" ng-bind='cust.CustomerName'></TD>
                <TD class="geo" ng-bind='cust.Geo'></TD>
                <TD class="env" ng-bind='cust.Env'></TD><td></td>
                <TD class="version" ng-bind='cust.Version'></TD><td></td>
            </TR>
        </tbody>
    </table>
    <ul class='pagination'></ul>
</div>

Im getting a beautiful out put where the table data is very nicely filtered using the vales from the drop-down. Now if I add List.js into this, thats when the problem starts. Two reasons why Im using List.js : (1) Gives me hassle free pagination. (2) Gives me hassle free search capability in the list!

var optionsSAAS = {
    valueNames:['tenantKey','account','geo','env','version'], 
    searchClass:'ALLsearch', 
    page: 10, 
    pagination:true
};
var custTypeList;

function loadList()
{
    custTypeList = new List('custByType', optionsSAAS);
    custTypeList.show(1,5);
}

Problem : When I use the dropdown to filter, the list is getting filtered but its not rendering. In the below screen I filtered using a version, which has 3 records

As you can see, the records are not rendered and the pagination is off as well. Im guessing Im missing something here, not sure what. If I click on Page 1 or anything, it resets the entire filtering and shows all records!

I have tried searching List.js with Angular Filtering but came up with custom Angular pagination/search, which is a lot of hassle in coding IMHO. Any thoughts?