angularjs maintain the scope variable across routes

Question

How do I maintain the model across routes. for eg I have a list of profiles loaded onto the home page. The home page also contains a "load more" action to load more profiles, basically pushing data to the model. On clicking of a specific profile, the detail-view for that profile is activated via routes. The detail view has a back button which redirects the user back to the home page. On routing back to the home page data(profiles) loaded by the "load more" action is lost. I need to maintain the model with the "load more" prepended data

Below is the code used

/* Controllers */
var profileControllers = angular.module('profileControllers', ['profileServices'])


profileControllers.controller('profileListCtrl', ['$scope','$location', 'Profile','$http',
  function($scope,$location, Profile,$http) {
    $scope.Profiles = Profile.query(function(){

        if($scope.Profiles.length < 3) {
                    $('#load_more_main_page').hide();
                }
        });
    $scope.orderProp = 'popular';
    $scope.response=[];

    //LOADMORE
    $scope.loadmore=function()
    {

        $http.get('profiles/profiles.php?profile_index='+$('#item-list .sub-item').length).success(function(response){
            if(response) {
                var reponseLength = response.length;
                if(reponseLength > 1) {
                    $.each(response,function(index,item) {


                         $scope.Profiles.push({
                                            UID: response[index].UID,
                                            id: response[index].id,
                                            popular: response[index].popular,
                                            imageUrl: response[index].imageUrl,
                                            name: response[index].name,
                                            tags: response[index].tags,
                                            category: response[index].category
                                        });

                        });
                }
                if(reponseLength < 3) {
                    $('#load_more_main_page').hide();
                }
            }

        });


    }

  }]);





  /* App Module */

var profileApp = angular.module('profileApp', [
  'ngRoute',
  'profileControllers',
  'profileServices',
]);



profileApp.config(['$routeProvider',
  function($routeProvider) {
    $routeProvider.
      when('/profiles', {
        templateUrl: 'partials/profile-list.html',
        controller: 'profileListCtrl',
        resolve: {
            deps: function ($q, $rootScope) {
                var deferred = $q.defer();
                var dependencies = ['js/sort.js'];
                $script(dependencies, function () {
                    $rootScope.$apply(function () {
                        deferred.resolve();
                    });
                });
                return deferred.promise;
            }
        }
      }).
      when('/profiles/:profileId', {
        templateUrl: 'partials/profile-detail.html',
        controller: 'profileDetailCtrl',

      }).
      when('/profiles/cat/:category', {
        templateUrl: 'partials/profile-list-category.html',
        controller: 'profileCategoryListCtrl',

      }).
      when('/create/', {
        templateUrl: 'partials/profile-create.html',
        controller: 'profileCreateCtrl',
        css: ['css/createprofile.css','css/jquery-ui-1.10.4.custom.min.css','css/spectrum.css'],

      }).
      otherwise({
        redirectTo: '/profiles'
      });
  }]);

Answer 1

A service is generally the accepted way to share data between views. Because it's a singleton and isn't regenerated on route change, you can "cache" data there and retrieve it from any controller that the service is injected into.

The second answer of this question explains it with code:

Same data in multiple views using AngularJS

Answer 2

Create an Angular service and pass it around the different routes.

Detailed answer here - https://stackoverflow.com/a/16559855/907388

Answer 3

You can use an AngularJS service to do that. Services are singletons and can store data across route changes.

myModule.factory('serviceId', function() {
  var shinyNewServiceInstance = {
    // your data here
  };
  return shinyNewServiceInstance;
});

And use it in your controller:

controller('MyController', function($scope, serviceId) {
  // use serviceId here
});

Answer 4

You're loosing the $scope variables because in Angular a controller is not a singleton. There will be a new instance of it generated when you navigate back.

If you want to store any kind of variables between route-changes, you can create a service to do it.