Angular Js: How to avoid loss of data of $http call on page refresh?

Question

Premise:

i know that there are similar questions on StackOverflow, if i am asking this is because that solutions are not working in my case (or i am not able to apply them properly).

Situation:

I have an Angular js app with a map and a series of markers, which data and location are retrieved from a database. The app is working fine. I am using Angular-gm module: https://github.com/dylanfprice/angular-gm and i like it very much. When i click on the nav link i am redirected to the proper page with the map and i am seeing all the markers on the map.

The problem is that when i refresh the page, i loose all the markers, because that markers are retrieved with an $http call.

The code:

   // Initialising the markers array.
  $scope.markers= [];

  // Getting the list of markers through $http call.
  $http({
    url: 'main/json_get_markers',
    method: "POST",
   }).success(function (data) {
        $scope.markers = data;
     });

Possible solutions:

Searching in StackOverflow and google i have found some possible solutions:

1. Using $route.reload();

   If it is the right solution, then the question is: How can I exactly apply $route.reload(); in this case? Because i don't understand where exactly i have to put it. If i put it in the controller it generate an infinite loop, in the meaning that the page is continuosly refreshing.. So where have to be putted exactly?

2. Using ngStorage module: http://ngmodules.org/modules/ngStorag I see that is working fine in the demo, but i have tried to apply it in my case and was not able to obtain any result. So if this is the proper solution, then the question would be: How can i rewrite the $http call in order to save the results into the $localStorage?

Answer 1

Ok, I think this if you make these changes it should fix the remaining issues when it wont always load the data.

myApp.factory('markersRepository', function($http){ 
    var markersRepository = {
       getAllMarkers: function(){
           var url = "main/json_get_markers";
           var promise = $http.get(url).then(function(response){
               return response.data;
           });
           return promise;
       }
    };
    return markersRepository;
});  

function MapController ($scope, markersRepository){
    markersRepository.getAllMarkers().then(function(markerData){
        $scope.markers= markerData
    });
});

I hope this helps --- Cheers!

Answer 2

Ok, following the suggestion of @jaredReeves i have come out with this solution:

I have declared a service:

myApp.factory('markersRepository', function($http) 
{
  return 
  {
    getAllMarkers: function() 
    {
        var url = "main/json_get_markers";
        return $http.get(url);
    }
  };
});

And inject it into the Controller:

function MapController ($scope, markersRepository) 
{
  markersRepository.getAllMarkers().success(function(markers) {$scope.markers= markers});
}

It is working. When i refresh the page the markers are still there!

To be honest it is working the 95% of the times, sometimes i refresh and there are no markers. In this case i have to let pass some seconds and refresh again. The markers will then appear (but i don't know why..)

Anyway the problem i had is basically resolved. I don't know if this is the best solution. If you have better solutions i will mark your answer as correct.