Lista de contato que carrega de 10 em 10 elementos OBS: Spring/Angular

[CloseBr 0]

Então to querendo fazer uma lista que carregue de 10 em 10 elementos!

 

Método JAVA:

 

@RequestMapping("listContact")
@ResponseBody
@ResponseView( QstcontactView.class)
public PageImpl<Qstcontact> listContact(@LoggedUser Usraccess loggedUser, @RequestParam(required = true) Boolean viewShared, @PageableDefault Pageable pageable) { 


QQstcontact qqstContact = QQstcontact.qstcontact;
BooleanExpression predicate = null; 


JPQLQuery query = new JPAQuery(this.em).from(qqstContact).distinct();
JPQLQuery queryCount = new JPAQuery(this.em).from(qqstContact).distinct();


if (Boolean.FALSE.equals(viewShared)) {
BooleanExpression be = qqstContact.qstuserseq.eq(loggedUser.getCrmpersonseq());
predicate = checkPredicate(predicate, be);
}else{
BooleanExpression be = qqstContact.qstuserseq.eq(loggedUser.getCrmpersonseq());
predicate = be.or(qqstContact.qstcontactshared.eq(true)); 
}


queryCount.where(predicate);
long count = queryCount.distinct().count();
query.where(predicate);
query.limit(pageable.getPageSize()).offset(pageable.getOffset());


List<Qstcontact> result = query.distinct().orderBy(qqstContact.qstcontactname.asc()).list(qqstContact);
BaseViewPageImpl<Qstcontact> baseViewPageImpl = new BaseViewPageImpl<Qstcontact>(result, pageable, count);
return baseViewPageImpl;
}

No Front tenho algo assim:

<div anim infinite-scroll="loadMoreContact()" infinite-scroll-immediate-check="false" infinite-scroll-distance="0" infinite-scroll-disabled="loadingContacts" extend-height class="container-fluid">
<div class="row" ng-controller="ContactCtrl"> 
<div class="col-lg-6"> 
<div class="contentContatos col-lg-12 col-xs-12 padding-right-0">
<div class="letraDetail col-xs-12 margin-top-20 padding-left-0">Contacts</div>
<ul class="col-lg-12 col-xs-12 listaContato padding-left-0"> 
            <li class="itemContato col-lg-12 col-xs-12" ng-repeat="contact in contacts" ng-click="contactDetail(contact)">
             <span class="col-lg-10 col-xs-6 margin-top-5" ng-bind="contact.qstcontactname"></span>
<div class="col-lg-2 divMiniMenu"> 
<div ng-if="loggedUser.crmpersonseq == contact.qstuserseq" class="control-label text-right"> 
           <input type="checkbox" class="btn btn-shareContact btn-xs" ng-model="contact.qstcontactshared" ng-change="contactShare(contact)">
           <button type="button" class="btn btn-editContact btn-xs control-label" data-toggle="modal" data-target="#modalEditandNew">
               <i class="fa fa-edit"></i>
           </button>
       </div> 
</div>
<div class="col-lg-6">
            <i  ng-class="{'fa fa-envelope-o hidden-xs': (contact.emailsList[0].qstemail.length > null),'containerfalse':   (contact.emailsList[0].qstemail.length == null)}"></i> 
  <span ng-bind="contact.emailsList[0].qstemail" class="hidden-xs"></span>
             </div> 
<div class="col-lg-6 divMiniMenu" ng-if="loggedUser.crmpersonseq == contact.qstuserseq"> 
<script type="text/ng-template" id="templates/deleteConfirmation.html">
<div  class="text-right deleteConfirmation control-label etk-padding-0">
<div ng-hide="isDeleting" >
<button type="button" class="text-right btn btn-danger btn-xs" ng-click="startDelete()"><i class="fa fa-trash-o"></i></button>
</div>
<div ng-show="isDeleting">
<button type="button" class="btn btn-default btn-xs" ng-click="cancel()">Cancel</button>
<button type="button" class="btn btn-danger btn-xs"  ng-click="confirm()"><i class="fa fa-trash-o"></i></button>
</div>
</div>
</script>
   <div confirm-delete on-confirm="contactRemove(contact)">
</div>
</div>
             </li>                                                                 
        </ul>      
</div> 
</div>

Se não entender só me pedi que mando o código mais completo !

Abrss qualquer ajuda eu agradeço !