How do I maintain my index number across pages in a table on JS while resetting it each time I sort using a different filter?

Question

I'm sorry if this is a basic question but I'm new to coding and really uncertain of how to proceed.

I'm currently using smart table and angularJS. I have a table with 10 rows per page and multiple pages, and I'd like for my index to 1. Reset each time I sort by a different filter (column). 2. Continue across pages within the same table.

I've tried using {{item.id}} and {{tableData.indexOf(item)}}, and they succeed in ensuring continuity (Eg; page 1 is index 1-10, page 2 11-20 and so on), but when I sort by a different filter (using st-sort), the index does not reset, and I'm stuck with my first row on page one with an id of 912, for example.

I have also explored {{$index}}, but it starts afresh on each page, and does not have continuity across pages.

I've considered trying to do a {{index + currentPage *10}}, but my currentPage is blank and I am uncertain/unaware of how to get it. The only scope that gets pushed through from my controller to my view is my tableData.

<!--View-->
<table class="table st-table" st-table="tableName"  st-safe-src="tableData">
<thead>
    <tr class="sortable ">
        <th class="table-id" st-sort="id" st-sort-default="true">#</th>
        <th st-sort="colA">colA</th>
        <th st-sort="colB">colB</th>
        <th st-sort="colC">colC</th>
        <th st-sort=""></th>
    </tr>
    <tr class="st-filters">
        <th></th>
        <th><input st-search="colA" placeholder="Search colA" class="input-sm form-control search-input" type="search"/></th>
        <th><input st-search="colB" placeholder="Search colB" class="input-sm form-control search-input" type="search"/></th>
        <th><input st-search="colC" placeholder="Search colC" class="input-sm form-control search-input" type="search"/></th>
    </tr>
    <tr ng-repeat="item in tableName">
        <td class="table-id">{{$index}}</td>
        <td>{{item.colA}}</td>
        <td>{{item.colB}}</td>
        <td>{{item.colC}}</td>
    </tr>
    <tr>
        <td colspan="6" class="text-center">
            <div st-pagination="" st-items-by-page="10" st-displayed-pages="5"></div>
        </td>
    </tr>
</table>