From the details you've provided, I can suggest a few approaches to tackle this situation.

You could explore using LocalStorage, which is widely supported in most browsers. Alternatively, there are polyfills available if needed. This method involves storing data as name/value pairs.

For instance, consider this basic example:

var searchParams = {
  filters: [
    'recent'
  ],
  searchString: 'bacon'
}

// Save the data
localStorage.setItem('searchParams', JSON.stringify(searchParams));

// Retrieve the data
searchParams = JSON.parse(localStorage.getItem('searchParams'));

// Remove the data
localStorage.removeItem('searchParams');

Depending on your application flow, utilizing the browser history stack could be beneficial. For example, after a search for bacon, redirecting users with ?query=bacon appended to the URL can help manage history and simplify navigation using the back button. Ultimately, the best approach depends on how your app is structured. There are also other methods to achieve this based on specific requirements - such as implementing a server-side component for cross-device synchronization of data.

In order to address this issue within our current project, we implemented a directive that monitors the model and binds its value to a variable in a data service. Additionally, upon rendering, the directive verifies if the correct value is already stored in the data service. If it is, the model is then updated with this value.

Addressing the comments, here is an overview of my DataStorageService:

'use strict';

/**
 * Utility for managing session or local storage operations
 */
app.factory('DataStorageService', function(
        $rootScope,
        $http,
        $location) {

    /**
     * Retrieve an item from storage
     *
     * @param item - string - identifier of the item
     * @return - mixed -
     */
    var retrieve = function(item) {
        return JSON.parse(sessionStorage.getItem(item) || localStorage.getItem(item));
    };

    /**
     * Store an item in storage
     *
     * @param item - string - identifier of the item
     * @param value - mixed - value to be saved
     * @param persistent - boolean flag for session or local storage
     * @return void
     */
    var save = function(item, value, persistent) {
        var obj = {
            value: value,
            ts: new Date().getTime()
        };
        window[persistent ? 'localStorage' : 'sessionStorage'][value === null ? 'removeItem' : 'setItem'](item, JSON.stringify(obj));
    };

    /**
     * Remove an item from storage
     *
     * @param item - string - identifier of the item
     * @return void
     */
    var erase = function(item) {
        save(item, null, true);
        save(item, null);
    };

    /**
     * Clear all session and local storage
     *
     * @return void
     */
    var clearAll = function() {
        sessionStorage.clear();
        localStorage.clear();
    };

    /**
     * Check if an item has expired
     *
     * @return boolean
     */
    var checkExpiry = function(str, minutes) {
        var currentTime = new Date(),
            currentTimestamp = currentTime.getTime(),
            storedItem = retrieve(str);
        if(storedItem && typeof storedItem.ts != 'undefined' && (new Date(currentTimestamp) - new Date(storedItem.ts) < minutes * 60 * 1000)) {
            return true;
        } else {
            erase(str);
            return false;
        }
    };

    return {
        retrieve: retrieve,
        save: save,
        erase: erase,
        clearAll: clearAll,
        checkExpiry: checkExpiry
    };
}

);

In the past, I've successfully preserved view state by utilizing a service to store it in an object.

Instead of storing references to specific fields (such as sort columns in a table or values in certain fields) in the controller/scope, I would save them in the view state object of the service.

Upon initialization, the controller would determine if it was a new search by checking the 'source' or 'type' of page transfer through a URL parameter or state (e.g. #/search?type=new). If it was indeed a new search, the values would be reset; otherwise, the previously used values would be displayed and utilized.

Whenever the application reloaded, the data in the Service would be cleared, creating a fresh form.

The method mentioned above is straightforward because Angular takes care of the saving process for you. Services being singletons means that by directly binding to the service's fields, they will persist through route changes automatically.

In your view:

<input ng-model="criteria.firstName">    

During controller initialization:

$scope.criteria = ViewStateService.criteria;

If you prefer to save view state only at specific points, you can set up an event handler on page change/route change events to copy the data at those junctures.

$scope.$on('$locationChangeStart', function(next, current) {
    //code to copy/save desired fields to the Service.
});

how to watch for a route change in angularjs

With various methods available, I found two to be particularly reliable. Ultimately, I opted for the first approach for my application because I needed my search parameters to carry over to other controllers.

Saving Parameters in Cookies

Utilizing $cookies in Angular.js allows for easy management of browser parameters. This serves as a dependable source for search parameters.

For instance:

search.service.js

angular
    .module('app')
    .service('SearchService', SearchService);


    SearchService.$inject = [
        '$cookies'
    ];

    function SearchService(
        $cookies
    ) {

    var searchCookieKey = 'searchHistoryCookieKey';
    var searchCookieMaxSize = 10;

    return {
        search: search,
        getSearchHistory: getSearchHistory
    };

    function search(arg1, arg2) {
        storeSearchHistory({arg1: arg1, arg2: arg2});

        // perform search operation here
        // remember to cache your search results 
        // to avoid additional network requests with 'most recent' parameters
    }

    // Save search params in cookies
    function storeSearchHistory(params) {
        var history = getSearchHistory();
        history.unshift(params); 
        if(history.length > searchCookieMaxSize) {
            history.pop();
        }
        $cookies.putObject(searchCookieKey, history);
    }

    // Retrieve recent history from cookies
    function getSearchHistory() {
        return $cookies.getObject(searchCookieKey) || [];
    }

}

app.states.js

   .state('search', {
        url: "/search",
        templateUrl: "/dashboard/search/templates/index.html",
        controller: 'SearchController',
        resolve: {
            searchResults: ['SearchService', '$stateParams', function(SearchService, $stateParams) {
                if(!$stateParams.arg1 || !$stateParams.arg2) {
                    var history = SearchService.getSearchHistory();
                    var mostRecent = history.length ? history[0] : null;
                    if(mostRecent) {
                        return SearchService.search(mostRecent.arg1, mostRecent.arg2);
                    }
                }
                return SearchService.search($stateParams.arg1, $stateParams.arg2);
            }]
        }
    })

If you do not cache these search network calls, your app will experience delays while waiting for the request to complete.

Passing Parameters through States

By creating a parent controller that retains $stateParams, child controllers can inherit these parameters without overrides when navigating back and forth or within child states. However, when moving between states with specific parameters, ensure to explicitly define the parent's $stateParams.