AngularJS routing. Save and restore state on back button

For the back button to go back to the same state where the page was in your search screen save the state of search parameters, pagination etc in the URL:

 $location.search({"searchTerm": "jaws", "genre": "fishy", page: 3});

This will add ?searchTerm=jaws&genre=fishy&page=3 to you URL and reload controller. At the start of controller set variables from URL thus:

 var searchTerm = $location.search().searchTerm;
 var genre = $location.search().genre;
 var page =  $location.search().page;
 SearchService.search(searchTerm, genre, page, function(data){
    $scope.results = data;
 });

Now when they click off to the result the back button will work as normal and reload the controller and with the parameters.

If you don't want the browser history to have every action taken in the search screen and only want the last state recorded in the history use replace:

 $location.search({"searchTerm": "jaws", "genre": "fishy", page: 3}).replace();

Now the history will have just a single entry for the search screen regardless of the history of options chosen.

ui-router provides functionality to implement this easily. Here is complete post about this:

http://www.codelord.net/2015/06/20/simple-pagination-and-url-params-with-ui-router/

So, the important things are:

• Configure the state in your router to receive the page parameter

$stateProvider.state('list', {
  url: '/list?page',
  controller: 'ListCtrl',
  controllerAs: 'list',
  templateUrl: 'list.html',
  params: {
    page: {
      value: '1',
      squash: true
    }
  }
});

• Handle the page parameter when the controller is initializing and update the state on every change of page:

angular
  .module('your.module')
  .controller('ListCtrl', function ($state, $stateParams) {
    var vm = this;
    vm.page = parseInt($stateParams.page || '1'); // page param is a String
    loadStuffForList(); //Load elements for list

    vm.onPageChange = function () {
      $state.go('.', {'page': '' + vm.page});
      // or
      // $state.go('.', {'page': '' + vm.page}, {'notify': false}); // notify: false -> in case you need it, it will prevent the controller from reloading
      // loadStuffForList();
    };
    function loadStuffForList () {...};
  });