Retaining changed data on table pagination - AngularJS - angularjs

Question

I have a requirement to submit changes made in my angularjs table. This table is populated asynchronously and so the pagination is dynamic.
Whenever I make a change in a page(eg: page 1) and move on to any other page(eg: page 2), the data changed in the page 1 is getting reset on accessing the again. The changed data is not maintained as such.
Worked on to see that, there could be few ways to avoid this.
Restricting the use of st-safe-src in table definition. (But this
option was possible only to synchronous table loading. The table is
not getting populated if I remove the safe source)
Use a variable to store/retrieve state of dynamic form controls like
this example, which had an ajax call and populated the entire input
tags based on ajax validations, which too didn't work since the
default value of my select option is be based on the DB input.
Is there a possible way to do this in angularjs?
My table:
<table id="recordTable" st-table="display_record_returns" st-safe-src="recordReturns" ng-show="recordReturns"
class="table table-bordered table-striped shadow p-3 mb-5 bg-white rounded" ng-controller="BotRulesController">
<thead class="thead-dark">
<tr>
<th style="white-space: nowrap">CASE NO</th>
<th st-sort="code">MATCH CODE</th>
<th st-sort="decision">RULE</th>
<th st-sort="email">EMAIL</th>
</tr>
</thead>
<tbody>
<tr id="row.code" valign="middle" st-select-row="row"
st-select-mode="multiple"
ng-repeat="row in display_record_returns track by row.code"
ng-attr-id="{{::row.code}}">
<td>{{$index + 1}}</td>
<td align="left" ng-bind="row.code"></td>
<td>
<select id="ruleChangeSelect_{{row.code}}" ng-change="ruleChanged(row.code, row.decision, selectionModel[row.code])" class="custom-select"
style="margin-left: 0px"
ng-model="selectionModel[row.code]"
ng-options="choice.name for choice in possibleOptions track by choice.id">
<option value="" hidden="hidden" readonly="" ng-hide="true"></option>
</select>
</td>
<td ng-bind="row.email"></td>
</tr>
</tbody>
<tfoot>
<tr style="font-size:0.8rem !important;">
<td colspan="22" class="text-center">
<div st-pagination="" st-items-by-page="itemsByPage" st-displayed-pages="5"></div>
</td>
</tr>
</tfoot>
</table>
My js:
$scope.getRules = function () {
$http({
'url': '/getRules',
'method': 'POST',
'headers': {
'Content-Type': 'application/json'
}
}).then(function (response) {
$scope.recordReturns = response.data;
$scope.ruleOptions = [{
decision: "A"
}, {
decision: "B"
}, {
decision: "C"
}];
$scope.possibleOptions = getUniqueValues($scope.ruleOptions, 'decision')
.map(function (id) {
return {
id: id,
name: id
}
});
$scope.selectionModel = {};
angular.forEach($scope.recordReturns, function (input) {
$scope.selectionModel[input.code] = $scope.possibleOptions.filter(function (opt) {
return opt.id === input.decision;
})[0];
});
function getUniqueValues(array, prop) {
return [...new Set(array.map(item => item[prop]))];
}
$window.scrollTo(0, 0);
})
};