angular smart table - pagination doesn't work on refreshing data object - angularjs

Question

I'm using angular-smart-table, where I'm able to display my data correctly with pagination.
And I do add new records/ update existing records on the same page. Here's the screenshot for reference -
But here, I'm facing problems with pagination after adding a new record/ updating existing one. That is on refreshing an object, it doesn't consider pagination and shows all records on same page at once.
Here is my controller code -
$scope.smartTablePageSize = 10;
$scope.rowsPerPage = [5, 10, 15, 20, 25];
// my function to add a new record
vm.insertAccount = function() {
if(vm.validateAll())
$http({
method: 'POST',
url: addAccountUrl,
data: vm.accountInfo,
headers: { 'Content-Type': 'application/json' }
}).then(function(success) {
vm.getAllAccountsData(); // refreshing data object
}, function(error) {
});
}
// function to refresh data object
vm.getAllAccountsData = function() {
$http.get(accountListUrl)
.then(function(success) {
if (success.data) {
vm.allAccountsData = success.data; // updating data here
}
}, function(error) {
})
}
And the respective HTML -
<div class="col-xlg-12 col-lg-12 col-md-12 col-sm-12 col-xs-12">
<div class="col-xs-12 form-inline form-group mt-20">
<label for="rows">Rows on page</label>
<select class="form-control show-tick" id="rows" title="Rows on page" selectpicker ng-model="smartTablePageSize" ng-options="i for i in rowsPerPage">
</select>
</div>
<table class="table mt-20 mb-20" ng-if="vm.allAccountsData.length > 0" st-table="vm.allAccountsData">
<thead class="sortable">
<tr>
<th class="table-id" st-sort="id" st-sort-default="true">#</th>
<th st-sort="accounttype">Account Type</th>
<th st-sort="vendor">Vendor</th>
<th st-sort="accountnumber">Account No.</th>
<th st-sort="paymentmode">Payment Mode</th>
<th st-sort="ponumber">PO No.</th>
<th st-sort="vendorcode">Vendor Code</th>
<th st-sort="costcenter">Cost Center</th>
<th st-sort="glcode">GL Code</th>
<th>Action</th>
</tr>
<tr>
<th></th>
<th>
<input st-search="accounttype" placeholder="Search Account Type" class="input-sm form-control search-input" type="search" />
</th>
<th>
<input st-search="vendor" placeholder="Search Vendor" class="input-sm form-control search-input" type="search" />
</th>
<th>
<input st-search="accountnumber" placeholder="Search Account No." class="input-sm form-control search-input" type="search" />
</th>
<th>
<input st-search="paymentmode" placeholder="Search Payment Mode" class="input-sm form-control search-input" type="search" />
</th>
<th>
<input st-search="ponumber" placeholder="Search PO No." class="input-sm form-control search-input" type="search" />
</th>
<th>
<input st-search="vendorcode" placeholder="Search Vendor Code" class="input-sm form-control search-input" type="search" />
</th>
<th>
<input st-search="costcenter" placeholder="Search Cost Center" class="input-sm form-control search-input" type="search" />
</th>
<th>
<input st-search="glcode" placeholder="Search GL Code" class="input-sm form-control search-input" type="search" />
</th>
<th></th>
</tr>
</thead>
<tbody>
<tr ng-repeat="item in vm.allAccountsData">
<td class="table-id">{{item.index + 1}}</td>
<td>{{item.accounttype}}</td>
<td>{{item.vendor}}</td>
<td>{{item.accountnumber}}</td>
<td>{{item.paymentmode}}</td>
<td>{{item.ponumber}}</td>
<td>{{item.vendorcode}}</td>
<td>{{item.costcenter}}</td>
<td>{{item.glcode}}</td>
<td>
<button class="btn btn-info editable-table-button btn-xs" ng-click="vm.editAccount(item);">View/Edit</button>
<button class="btn btn-danger editable-table-button btn-xs" ng-click="vm.confirmDeleteAccountModal('app/pages/utilities/pdfNormalizer/confirm-delete-account.html', 'sm', item)">Delete</button>
</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="10" class="text-center">
<div st-pagination="" st-items-by-page="smartTablePageSize" st-displayed-pages="10"></div>
</td>
</tr>
</tfoot>
</table>
</div>
So, on refreshing object, What I expect is the similar table with pagination as shown above. And What I'm getting is the table with all records without considering pagination -

Answer 1

I struggled a bit and found an answer! We can use st-safe-src directive on angular-smart-table.
I used it as -
<table class="table mt-20 mb-20" st-table="allAccountsData" st-safe-src="vm.allAccountsData">
Where, allAccountsData is a temporary data object & vm.allAccountsData is an actual one.
Then, I iterated over allAccountsData as -
<tr ng-repeat="item in allAccountsData">
That's it! No any changes in controller code!