Displaying 1 to 10 of x records in angular js

Question

I want to show two times as Displaying 1 to 10 of x records in a single page with two different DIV's as like below, Eg: I have a page having two div elements like below.

How can I do it by using dirpagination ?

page1:

 <div> 
 Displaying 1 to 2 of 2
    Name  Age 
    xxx    17 
    yyy    18  
 </div>

<div> 
 Displaying 1 to 2 of 2
    Name  Age 
    abc    22 
    pqr    25 
    mmm    20
</div>

dirPagination.js file as like below

function updateRangeValues() {
                debugger;
                if (paginationService.isRegistered(paginationId)) {
                    var currentPage = paginationService.getCurrentPage(paginationId),
                        itemsPerPage = paginationService.getItemsPerPage(paginationId),
                        totalItems = paginationService.getCollectionLength(paginationId);
                    var objPg = paginationService.registerInstance(paginationId);
                    scope.range.lower = (currentPage - 1) * itemsPerPage + 1;
                    scope.range.upper = Math.min(currentPage * itemsPerPage, totalItems);
                    scope.range.total = totalItems;
                    scope.$parent.range = scope.range;
                }
            }

.cshtml page is

Displaying {{ range.lower }} to {{ range.upper }} of {{ range.total }} records



<tr dir-paginate="rec in Recds | itemsPerPage : 10 class="feed-element"> 
3 <td>'s like above
<dir-pagination-controls pagination-id="pg1" max-size="10" direction-links="true" boundary-links="false"> </dir-pagination-controls>
</tr>

<tr dir-paginate="rec in Recds | itemsPerPage : 10 class="feed-element"> 
    3 <td>'s like above
    <dir-pagination-controls pagination-id="pg2" max-size="10" direction-links="true" boundary-links="false"> </dir-pagination-controls>
    </tr>