If you're seeking an answer, allow me to provide some insight. The code is available for review here:
<section ng-controller="BooklistPaginationController" ng-init="init(10)">
....
<div class="row">
<div class="col-xs-12 col-md-12 col-sm-12 col-lg-12">
<div id="filter-panel" class="filter-panel" collapse="searchIsCollapsed">
<div class="panel panel-default">
<div class="panel-body">
<form class="form-inline" role="form">
<div class="form-group">
<label class="filter-col" for="pref-search">Texto:</label>
<input type="text" class="form-control input-sm" id="pref-search" ng-model="text">
</div><!-- form group [search] -->
<div class="form-group">
<label class="filter-col" for="pref-orderby">Orden:</label>
<select id="pref-orderby" class="form-control" ng-model="order">
<option ng-repeat="x in optionsOrder" value="{{x.value}}">{{x.text}}</option>
</select>
</div> <!-- form group [order by] -->
<div class="form-group">
<label class="filter-col" for="pref-perpage">Elementos página:</label>
<select id="pref-perpage" class="form-control" ng-model="itemsPerPage">
<option ng-repeat="x in optionsItemsPage" value="{{x.value}}">{{x.text}}</option>
</select>
</div> <!-- form group [rows] -->
<button ng-click="find()" class="btn btn-danger" style="margin-top: 4px;">
<span class="glyphicon glyphicon-search"></span> Buscar
</button>
</form>
</div>
</div>
</div>
</div>
</div>
Provided above is the interface layout. This includes a form where you can search using text with sorting and pagination options. Additionally, it's essential to incorporate the controller to interact with the server for conducting searches.
angular.module('booklists').controller('BooklistPaginationController', ['$scope', 'Booklists',
function ($scope, Booklists) {
$scope.searchIsCollapsed = true;
$scope.optionsItemsPage = [
{text : "10", value : "10"},
{text : "30", value : "30"},
{text : "50", value : "50"}
];
$scope.optionsOrder = [
{text : "Descendente", value : "asc"},
{text : "Ascendente", value : "desc"}
];
$scope.optionsStatus = [
{text : "Todos", value : ""},
{text : "Borrador", value : "draft"},
{text : "Publicado", value : "public"}
];
$scope.init = function(itemsPerPage){
$scope.pagedItems = [];
$scope.itemsPerPage = itemsPerPage;
$scope.currentPage = 1;
$scope.status = 'public';
$scope.order = 'desc';
$scope.find();
};
$scope.pageChanged = function () {
$scope.find();
};
$scope.find = function () {
var query = { page:$scope.currentPage,
itemsPerPage:$scope.itemsPerPage,
order:$scope.order,
status:$scope.status,
text:$scope.text
};
Booklists.query(query, function (data) {
$scope.pagedItems = data[0].booklists;
$scope.total = data[0].total;
});
};
}
]);