Store Status Between Forms In AngularJS?

I am going to try to be as specific as I can. This is what I am trying to accomplish: I want to be able to show a User, which kind of shoes fit its needs. The user will be shown 4

Solution 1:

Since the app is a angular SPA, you can use a angular service to store the state of the selection made by user. This state would persist until user explicitly refreshes the browser (F5).

Create a service like

angular.factory('shoeSelectionState',function() {
   var states=[{selection:{}},{selection:{}},{selection:{}},{selection:{}}];
   return states;
});

In your controller inject this service,

angular.controller('MyController', function(shoeSelectionState) {
   $scope.states=shoeSelectionState;
});

and bind the states array to each form elements, something like

<input type='text' ng-model='states[0].selection.size' name='size'>

If you want to persist the data on page refresh try using sessionStorage instead of localStorage as it gets automatically cleared when user closes the tab. The service mentioned above can do the persistence of the content to storage.

Solution 2:

You could use localStorage as @sumain-bogati suggested, but you could just as easily do this without any page reloads. What you will need is a container with a controller that will store the user's choices (i.e. the model) and then use ngShow or ngRoute to display each page. Here is some example code:

Plnkr example of three pages and a model

Instead of calling the fourth page, you would call a function which would initiate an $http call to your backend API to submit the model values.