View previous page data without load in AngularJS

Question

Routes :

app.config(['$routeProvider', function ($routeProvider) {
          $routeProvider

            .when("/home/:page", {templateUrl: "templates/home.html", controller: "HomeController"})

            .otherwise("/404", {templateUrl: "partials/404.html", controller: "PageCtrl"});
        }]);

Controller :


     App.controller('HomeController', function ( $scope, $location, $http,defaultVal,$routeParams ,basic,State) {
    $scope.allList = State.formData;
    start = $routeParams.page == undefined ? 1 : $routeParams.page;
    var trip_data = {
        start:(Number(start)-1) * (Number(defaultVal.perPage)),
        perpage:defaultVal.perPage
    }
    basic.hitAPI(defaultVal.sitePath+"search",{reqObject:JSON.stringify(trip_data)}).success(function(response){
        if(response.type == "success"){
            p = Number(start)- Number(1) < 0 ? false : Number(start)-Number(1);
            result = Math.ceil(response.total / defaultVal.perPage);
            n = Number(start) + Number(1) > result ? false : Number(start) + Number(1);
            response.page = {
                next : n,
                prev: p
            };
            $scope.allList = response;
            State.formData = $scope.allList;
        } else if(response.type == "error"){
            basic.messages.showErrorMessage(response.message);
        }else{
            basic.messages.generalError();
        }
    });
});

Template :

<div class="trips" >
    <div class="tripBox" ng-repeat="Home in allList.data" 
         ng-swipe-left="swipeLeft('/home/{{allList.page.next}}')"
         ng-swipe-right="swipeRight('/home/{{allList.page.prev}}')">
        <a ng-href="#/trip/{{Home.id}}">
        <h3>{{ Home.FromAddress }}  <i class="fa fa-long-arrow-right"></i> {{ Home.ToAddress }}</h3>
        <div class="poolPrice">${{ Home.charges }}</div>
        <p><span>Posted By :</span> {{ Home.UserName }}, 24 yrs, {{ Home.UserGender | capitalize }}</p>

    </div>
</div>

Problem is that after paginate when I go back then it again send request to server for data. I want when I go back then it show previous data without send request to server.

Answer 1

Ok, when you go back some view (which were before current) is have to be rendered (no mater what page we are talking about home or rtip) if controller of this page calling service unconditionally then it of course will be requested again (i thing angular make browser to not cache its pages). Looks like you use some state storage ($scope.allList = State.formData;) isn't you? Then you can store data needed for page and in controller check its existance first and if it not then call API, but in this case your page may become inactual with time.