title: Retaining changed data on table pagination - AngularJS
body: <p>I have a requirement to submit changes made in my angularjs table. This table is populated asynchronously and so the pagination is dynamic.</p>
  
  <p>Whenever I make a change in a page(<em>eg: page 1</em>) and move on to any other page(<em>eg: page 2</em>), the data changed in the page 1 is getting reset on accessing the again. The changed data is not maintained as such.</p>
  
  <p>Worked on to see that, there could be few ways to avoid this.</p>
  
  <ol>
  <li>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)</li>
  <li>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.</li>
  </ol>
  
  <p>Is there a possible way to do this in angularjs?</p>
  
  <p><strong>My table</strong>:</p>
  
  <pre><code>&lt;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"&gt;
     &lt;thead class="thead-dark"&gt;
        &lt;tr&gt;
           &lt;th style="white-space: nowrap"&gt;CASE NO&lt;/th&gt;
           &lt;th st-sort="code"&gt;MATCH CODE&lt;/th&gt;
           &lt;th st-sort="decision"&gt;RULE&lt;/th&gt;
           &lt;th st-sort="email"&gt;EMAIL&lt;/th&gt;
        &lt;/tr&gt;
     &lt;/thead&gt;
     &lt;tbody&gt;
        &lt;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}}"&gt;
           &lt;td&gt;{{$index + 1}}&lt;/td&gt;
           &lt;td align="left" ng-bind="row.code"&gt;&lt;/td&gt;
           &lt;td&gt;
              &lt;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"&gt;
                 &lt;option value="" hidden="hidden" readonly="" ng-hide="true"&gt;&lt;/option&gt;
              &lt;/select&gt;
           &lt;/td&gt;
           &lt;td ng-bind="row.email"&gt;&lt;/td&gt;
        &lt;/tr&gt;
     &lt;/tbody&gt;
     &lt;tfoot&gt;
        &lt;tr style="font-size:0.8rem !important;"&gt;
           &lt;td colspan="22" class="text-center"&gt;
              &lt;div st-pagination="" st-items-by-page="itemsByPage" st-displayed-pages="5"&gt;&lt;/div&gt;
           &lt;/td&gt;
        &lt;/tr&gt;
     &lt;/tfoot&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p><strong>My js</strong>:</p>
  
  <pre><code>$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 =&gt; item[prop]))];
          }
  
          $window.scrollTo(0, 0);
      })
  };
  </code></pre>