How to preserve my data while clicking the back button?

Trigger an API call on browser back button click when reloadOnSearch is set to false

Since I have set reloadOnSearch equal to false, I'm using $routeUpdate to identify browser back button clicks. Currently, when this gets triggered, I reload the page. But this reload results in a loss of all the API call response data that I'm storing. Is there a way to prevent this loss of data?

I'm displaying a list of data with pagination on my site. Each time the user changes the page, a function is triggered which checks if the data has already been fetched. If not, an API call is made to fetch it. Since I have set reloadOnSearch equal to false, clicking on the browser back button is only changing the URL and not the view. I'm using $routeUpdate in this case. When the $routeUpdate gets triggered, I first check if this was due to pagination click or the back button click. In case of pagination click, the normal API call gets executed. But if it was due to the back button, I reload the page. But this leads to a loss of all the previously fetched response data, which I would like to avoid. An obvious solution would be to call the API call function in the $routeUpdate callback. But the problem with this is that my site has multiple lists of data and I'm looking to avoid writing multiple conditionals and function calls in the app.run(). Is there any way that I can preserve my data while clicking the back button?

This part of the code is in the app.run()

$rootScope.$on('$routeUpdate', function(event, next){
    console.log("route update fired");
    // This gives me the parameters in the URL (eg.page number)
    let params = JSON.stringify(next.params);
    console.log(params); // Eg. {listTransactionsPage: 2}
    // Now I will compare this with the $rootScope value which is saved in the controller (See the code below for more details).
    if(params !== JSON.stringify($rootScope.listCurrentParams))){
            console.log("back/forward button clicked.");
            $route.reload();
        }
        else{
            console.log("route changed via pagination");
        }
    }
});

This part of the code is in the app.controller()

app.controller('listTransCtrl', ['$scope', '$location', '$window', '$rootScope', function($scope, $location, $window, $rootScope){
    console.log("Inside listTransCtrl.");
    $rootScope.listCurrentParams = {};
    // the function that gets called upon pagination button click..
    $scope.listTransPageChanged = function(pageNum){
        console.log(pageNum);
        $location.search('listTransactionsPage', pageNum);
        $rootScope.listCurrentParams = $location.search();
        console.log($rootScope.listCurrentParams);
        // the API call gets fired
        $scope.getAllTransFunc();
    }

}]);

Thanks to @georgeawg for suggesting this solution. Previously, I was storing all my API call response data in $scope in the controller. But by storing this data in a service, I was able to prevent its loss during $route.reload().

If you would like to see how to store data in a service, follow this link:

Angularjs Best Practice for Data Store