title: How to persist optional state parameter on browser back in ui-router?
body: <p>I'm having one parent state that has two children's state inside that I'm going to show one state based on the <code>URL</code>.</p>
  
  <p>Out of those two <code>states</code> one is having to parameters like <code>param1</code> and <code>param2</code>, I have use <code>params</code> option of ui-router inside state definition.</p>
  
  <p><strong>State</strong></p>
  
  <pre><code>$stateProvider.state('tabs.account', {
      url: '/account',
      views: {
          'content@tabs': {
              templateUrl: 'account.html',
              controller: function($scope, $stateParams) {
                  //This params are internally used to make ajax and show some data.
                  $scope.param1 = $stateParams.param1;
                  $scope.param2 = $stateParams.param2;
              },
          }
      },
      params: {
          param1: { value: null }, //this are optional param
          param2: { value: null } //because they are not used in url
      }
  });
  </code></pre>
  
  <p>If you look at my route the params option is not really introduced inside the <code>URL</code>, that's why I'm considering then as optional. </p>
  
  <h2>Problem</h2>
  
  <p>Look at plunkr, I've shown two tabs <strong>Account</strong> &amp; <strong>Survey</strong>, </p>
  
  <ol>
  <li>Click on Survey tab, then add some data in the <code>textarea</code> which are shown. </li>
  <li><p>Click on <strong>Go to Account</strong> that will pass those <code>textarea</code> values to
  the other <strong>Account</strong> tab by doing <code>ui-sref="tabs.account({param1: thing1, param2: thing2})"</code> on the anchor</p></li>
  <li><p>Now you will see the <code>param1</code> &amp; <code>param2</code> values on html which has been assigned to scope from <code>$stateParams</code></p></li>
  <li>Now again Click on <strong>Survey</strong> tab, you will land on the survey page.</li>
  <li>Just click browser back, you will notice that <code>param</code> value is not getting <code>null</code>.</li>
  </ol>
  
  <p><a href="http://plnkr.co/edit/NF0W2apwlz7ufGSu2OCR?p=preview" rel="noreferrer"><strong>Problem Plunkr</strong></a></p>
  
  <p>I believe you got what I wanted to ask, why the optional parameter value has not been store? as they have been a part of state.</p>
  
  <p>I know I can solve this issue by below two solutions.</p>
  
  <ul>
  <li>By creating one service that will share data between two views.</li>
  <li>By adding parameter inside the state URL. like <code>url: '/account/:param1/:param2',</code> (But i wouldn't prefer this)</li>
  </ul>
  
  <p>I already tried angular-ui-routers <a href="http://christopherthielen.github.io/ui-router-extras/#/sticky" rel="noreferrer"><strong><code>sticky states</code></strong></a> but that doesn't seems to work for me. What is the better way to this?</p>
  
  <p>Is there any way by which I can make my use case working, Any ideas would appreciate.</p>
  
  <p>Github <a href="https://github.com/angular-ui/ui-router/issues/2115" rel="noreferrer"><strong>Issue Link Here</strong></a></p>