angularjs - Access to all states of angular-ui-router programmatically -

i have $stateprovider configured this:

angular.module('example', ['ui.router'])    .config(function($stateprovider, $urlrouterprovider) {      $urlrouterprovider.otherwise("/steps");      $stateprovider.state('steps', {          url: '/steps',          templateurl: 'steps.html',          controller: function($scope, $state) {            $scope.$on('$statechangesuccess', function(event, tostate, toparams, fromstate, fromparams) {              $scope.currentstep = tostate.data && tostate.data.stepnumber;            });            if ($state.is('steps')) {              $state.go('.first');            }          }        })        .state('steps.first', {          url: '/first',          template: 'first',          data: {            stepnumber: 0          },        })        .state('steps.second', {          url: '/second',          template: 'second',          data: {            stepnumber: 1          },        })        .state('steps.third', {          url: '/third',          template: 'third',          data: {            stepnumber: 2          },        });    });  angular.element(document).ready(function() {    angular.bootstrap(document, ['example']);  });

ul { list-style: none; }  li { display: inline-block; }

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>  <script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.10/angular-ui-router.min.js"></script>  <script type="text/ng-template" id="steps.html">    <h2>{{ currentstep }}</h2>    <div ui-view></div>    <button ng-if="currentstep !== 0">prev</button>    <button>next</button>  </script>  <div>    <h1>example</h1>    <ul>      <li><a ui-sref="steps.first">goto first</a>      </li>      <li><a ui-sref="steps.second">goto second</a>      </li>      <li><a ui-sref="steps.third">goto third</a>      </li>    </ul>    <div ui-view></div>  </div>

what want now, have buttons automatically point next/prev step, end next button should vanish if last step reached. sadly example seems not working on stack overflow, created jsfiddle version of example

update

for clarification: want dynamic, don't have change code if order of steps changed, steps removed, or new steps added.

it isn't clean can generate state name in function of current step.

link function changestep() take delta in params , this

 $scope.changestep = function (delta) {       var newstep = $scope.currentstep + delta;       var statename = "steps.";        switch (newstep){            case 1:               statename += "first";               break;             etc...        }         $state.go(statename);  } 

so in template steps.html

   <button ng-if="currentstep !== 0" ng-click="changestep(-1)">prev</button>    <button ng-click="changestep(1)" ng-if="currentstep !== 2">next</button>