How to reload browser and and keep current state in AngularJS UI-Router?
<p>I built a small web app where I use UI-Router to navigate its pages. Everything works fine apart of the browser refresh or accessing the specific page using the state link. I tried several solutions posted here on the same topic but non of them helped maybe due to lack of additional information. </p>

<p>When I click the ui-sref link below, I get 'mysite/content' and page displays normally, but once I refresh it or try to access by just pasting the link it doesn't find the page.</p>

<p>Could you please help to me to make it work as expected. Thanks in advance.</p>

<p>HTML</p>

<pre><code>&lt;p ui-sref="content"&gt;Link To Content&lt;/p&gt;
</code></pre>

<p>AngularJS</p>

<pre><code>var app = angular.module('myApp',['ui.router']);

app.config(['$stateProvider', '$urlRouterProvider', '$locationProvider', function($stateProvider, $urlRouteProvider, $locationProvider){


    $urlRouteProvider.otherwise('/');


    $stateProvider

        .state('home', {
            url: '/',
            views: {
                '': { templateUrl: '/app/templates/wrapper.html'},
                'nav@home': { templateUrl: '/app/templates/nav.html'},
                'header@home': { templateUrl: '/app/templates/header.html'},
                'footer@home': { templateUrl: '/app/templates/footer.html'}
            }
        })

        .state('content', {
            url: '/content',
            views: {
                '': { templateUrl: '/app/templates/content.html'},
                'nav@content': { templateUrl: '/app/templates/nav.html'},
                'header@content': { templateUrl: '/app/templates/header.html'},
                'footer@content': { templateUrl: '/app/templates/footer.html'}

            }
        });

    $locationProvider.html5Mode(true);


}])
</code></pre>