How do I get the browser's back button to take me to my previous URL? (angular ui-router)

Question

I am doing my frontend routing with angular ui router, and I am seemingly unable to get my browser's back button to take me to most recent URL.

Let me demonstrate.

Let's say I start here

/#/myapp/

And after some clicks, I have dynamically adjusted my URL to become

 /#/myapp/12345

Let's say I click a datepicker while remaining on the page

/#/myapp/12345?start=2016-01-21&end=2016-01-28

I am able to do this by using $scope'd functions in tandem with $location.url

Awesome. So far, so good.

Let's say I navigate away from this by clicking

<a href="#"> My App </a>

Which, due to the way I have set up my routing

myApp.config([
    '$stateProvider', '$urlRouterProvider',
    function($stateProvider, $urlRouterProvider) {

        $stateProvider.state('myapp',
            url : '/myapp/*id?start&end',
            templateUrl : '<path to my template>',
            controller : '<name of my controller>'
        );

        // more routes

        $urlRouterProvider.otherwise('/myapp/');

    }
]);

will default back to the initial state

/#/myapp

Ok, still so far, so good. However, when I click my browser's back button, I am taken back to

/#/myapp

instead of what I would expect

/#/myapp/12345?start=2016-01-21&end=2016-01-28

I can only guess that the intermediate urls that I have generated while navigating around my page were not captured by my browser's history... which I guess makes sense. How do I get my browser to recognize these intermediate steps so that I can backtrace properly?

Answer 1

Please take a look at the following SO answer there are four steps to take

1. Unique Urls
2. A session service
3. A state history
4. And a location service