AngularJS 1.4.x

var app = angular.module('plunker', ['ui.router']);

app.config(function($stateProvider, $urlRouterProvider) {
  
    $stateProvider    
        // route to show our basic form (/form)
        .state('wsp', {
            url: '/wsp',
            templateUrl: 'wsp.html',
            controller: 'wspYearController'
        })
        .state('first_step', {
            url: '/first_step',
            templateUrl: './wsp_step_first.html',
            controller: 'wspYearController'
        })

        .state('second_step', {
            url: '/second_step',
            templateUrl: './wsp_step_second.html',
            controller: 'wspYearController'
        })
        
    $urlRouterProvider.otherwise('/wsp');
});

app.controller('wspYearController', function($scope, $state) {
  
  $scope.state = $state;
    
   /**
   * Key press binding
   */
  $(document).keydown(function(e) {
  
      switch(e.which) {
          case 37: // left arrow
          case 39: // right arrow
          
          console.log('click');
  
              //clean listener before state change 
              //else it would be listen all the time :)
              $(document).unbind('keydown');
  
              //back and forward all the time to the right place.
              if ($state.current.name === 'first_step') {
                  $state.go('second_step');
              } else {
                  $state.go('first_step');
              }
              break;
  
          default: return; // exit this handler for other keys
      }
  
      // prevent the default action (scroll / move caret)
      e.preventDefault();
  });
});

<!DOCTYPE html>
<html ng-app="plunker">

<head>
  <meta charset="utf-8" />
  <title>AngularJS Plunker</title>
  <script>
    document.write('<base href="' + document.location + '" />');
  </script>
  <link rel="stylesheet" href="style.css" />
  <script data-require="angular.js@1.4.x" src="https://code.angularjs.org/1.4.8/angular.js" data-semver="1.4.8"></script>
  <script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.8/angular-ui-router.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="app.js"></script>
</head>

<body>
    <button ui-sref="first_step"> WSP First</button>
    <button ui-sref="second_step"> WSP Second</button>
    <div ui-view></div>
</body>

</html>

/* Put your css in here */

{{ state.current.name }}

First step

Second step