title: Angular UI-Router - Page refresh loses $stateParams
body: <p>I've used $state.go to pass in an 'employee' object as a parameter to a page where the id is also used as a parameter in the url, but when the page is refreshed, all $stateParams are cleared from the state.</p>
  
  <p>How can I prevent this from happening, and somehow store the data for the employee (as I said, employee id is used in url), so that when the page is refreshed, $stateParams is still populated with this employee's data based upon the id in the url?</p>
  
  <p><strong>State definition:</strong></p>
  
  <pre><code> .state('employees/employeeDetails', {
          url: '/employees/employeeDetails/:id',
          templateUrl: 'views/employees/employeeDetails/employeeDetails.html',
          params: {
              employee: null,
              id: null
          },
          controller: 'employeeDetailsMainController',
          controllerAs: 'employeeDetailsMain',
          resolve: {
              lazyLoad: function($ocLazyLoad) {
                  return $ocLazyLoad.load('js/controllers/employees/employeeDetails/employeeDetailsMainController.js');
              }
          }
      })
  </code></pre>
  
  <p><strong>Directive with <code>$state.go:</code></strong></p>
  
  <pre><code>app.directive('viewEmployee', function() {
  
  var directive = {
      restrict: 'A',
      scope: {
          employee: '=',
          state: '@state'
      },
      controller: function($scope, $state, $stateParams) {
          $scope.goToEmployee = function() {
              $state.go('employees/employeeDetails', { employee: $scope.employee, id: $scope.employee.id });
          }
      },
      bindToController: {
          employee: '='
      },
      link: function(scope, element, attrs) {
          element.find('button').bind('click', function(index, employee) {
              scope.goToEmployee();
          })
      }
  }
  return directive;
  })
  </code></pre>