title: Angular JS App persist state on browser refresh
body: <p>I have angular Js App with nested views, the issue i am facing is when i click on F5 in nested view it gets redirected to default state, i want to persist the current state.<br>
  I can understand on reload it goes to parent ui-view to load the dependencies and after that it redirects to default view i have mapped but how can i redirect it to initial view instead of default view.</p>
  
  <p>routes.js</p>
  
  <pre><code>$urlRouterProvider.otherwise('/dashboard');
   .state('dashboard', {
                  url: '/dashboard',
  
                  },
                  views: {
                      // the main template will be placed here (relatively named)
                      '': {
                          templateUrl: 'views/dashboard.html',
                          controller: 'dashboardIndexController'
                      },
                      'headbar@dashboard': {
                          templateUrl: 'views/headbar.html',
                          controller: 'headbarController'
                      }
                  }
              })
              .state('dashboard.home', {
                  url: '/home',
                  templateUrl: 'views/dashboard.home.html',
                  controller: 'dashboardController',
              })
          .state('dashboard.campaigns', {
              url: '/campaigns',
              templateUrl: 'views/campaigns.html',
              controller: 'showCampaign',
  
          })
  </code></pre>
  
  <p>dashboard controller</p>
  
  <pre><code>$state.go('dashboard.home');
  </code></pre>
  
  <p>when i click refresh on campaigns state it redirects back to dashboard.home, which it should be as per code but how can i persist the campaigns or other nested states after reload.</p>