AngularJS Next and Previous Array Values

Question

What I'm trying to achieve:
Change state id when the user clicks next or previous buttons. Each state is assigned an id which is within an array, when clicking next or previous the state id needs to know which is the next or previous id within the array.

Current Problem:
After spending many hours yesterday, I managed to get the next and previous buttons working but instead of picking up the state id from the array it was getting the array index number.

The test below show this array ["1", "2", "4"], so if I was on state '2' the next page would be '4' and the previous would be '1', instead of '0','1','2'!

I would really appreciate some help on this, I don't mind having to rewrite all my code to figure this out!

Thank you in advance for all the support!

Controller JS

  // -- Current Page ID, '1'-- //
  var currentID = $stateParams.id;
  // -- Body Type, 'triangle' -- //
  var bodyType = $scope.$storage.userData.bodyType.bodyType;
  // --  Dress Array, [{"id": "1", "bodyType": "triangle"},{"id": "2", "bodyType": "triangle"},{"id": "3", "bodyType": "round"},{"id": "4", "bodyType": "triangle"}] --//
  var dressArray = $scope.$storage.appData.dresses;
  // -- Remove anything that doesn't match the current body Type e.g Remove 'round' -- //
  var removeRound = $filter('filter')(dressArray, function(value, index) {return value.bodyType == bodyType;});
  // -- Dress Array -- //
  $scope.dressArray = [];
  // -- Push each filter value to Array, ["1", "2", "4"] -- //
  angular.forEach(removeRound, function(value, key) {
    $scope.dressArray.push(value.id);
  });
  // -- Console Test, ["1", "2", "4"] -- //
  console.log($scope.dressArray);
  // -- If currentID = '1', The next button should display '2' -- //
  $scope.nextDress = function() {
    var next = parseInt(currentID) + 1 > dressArray.length ? 0 : parseInt(currentID) + 1;
    $state.go('main.rail', {id: next });
  };
  // -- If currentID = '2', The next button should display '4'--//
  $scope.previousDress = function() {
    var prev = parseInt(currentID) - 1 < 0 ? dressArray.length - 1 : parseInt(currentID) - 1;
    $state.go('main.rail', {id: prev });
  };

HTML

<li class="next"><md-button ng-click="nextDress()">Next</md-button></li>
<li class="previous"><md-button ng-click="previousDress()">Previous</md-button></li>

Final Update (Answer) @SarjanDesai

  var currentID = $stateParams.id;
  var bodyType = $scope.$storage.userData.bodyType.bodyType;
  var dressArray = $scope.$storage.appData.dresses;
  var removeRound = $filter('filter')(dressArray, function(value, index) {return value.bodyType == bodyType;});
  var newDressArray = [];
  angular.forEach(removeRound, function(value, key) {
    newDressArray.push(value.id);
  });
  var currentIndex = newDressArray.indexOf(currentID.toString());
  var next = (currentIndex + 1) > newDressArray.length ? newDressArray[newDressArray.length - 1] : newDressArray[currentIndex + 1];
  var prev = (currentIndex - 1) < 0 ? 0 : newDressArray[currentIndex - 1];
  if(prev === 0 || prev === undefined || prev === null){
    $scope.hidePrevButton = {
      active: true
    };
  }
  if(next === 0 || next === undefined || next === null){
    $scope.hideNextButton = {
      active: true
    };
  }
  $scope.nextDress = function() {
    $state.go('main.rail', {'id': next});
  };
  $scope.previousDress = function() {
    $state.go('main.rail', {'id': prev});
  };
  //console.log(newDressArray);
  //console.log('Next: ' + next);
  //console.log('Current: ' + currentID);
  //console.log('Previous: ' + prev);

Answer 1

What below code does is get current index of currentID and check the avaibility of next or previous value for previous button and for next button. If next value not available, it set to last value and for previous button if previous value is not available, then set it to first value of array.

$scope.nextDress = function() {
  var currentIndex = $scope.dressArray.indexOf(currentID.toString());
  var next = (currentIndex + 1) > $scope.dressArray.length ? $scope.dressArray[dressArray.length - 1] : $scope.dressArray[currentIndex + 1];
  $state.go('main.rail', next);
};
// -- If currentID = '2', The next button should display '4'--//
$scope.previousDress = function() {
  var currentIndex = $scope.dressArray.indexOf(currentID.toString());
  var prev = (currentIndex - 1) < 0 ? $scope.dressArray[0] : $scope.dressArray[currentIndex - 1];
  $state.go('main.rail', prev);
};

Look for demo Example:

angular.module('myApp', []).controller('myCtrl', ['$filter', '$scope',
  function($filter, $scope) {
    $scope.myclick = function() {

      var currentID = 1;
      console.log('current state : ' + currentID);

      var bodyType = 'triangle';

      var dressArray = [{
        "id": "1",
        "bodyType": "triangle"
      }, {
        "id": "2",
        "bodyType": "triangle"
      }, {
        "id": "3",
        "bodyType": "round"
      }, {
        "id": "4",
        "bodyType": "triangle"
      }];

      var removeRound = $filter('filter')(dressArray, function(value, index) {
        return value.bodyType == bodyType;
      });

      var dressArray = [];

      angular.forEach(removeRound, function(value, key) {
        dressArray.push(value.id);
      });

      console.log(dressArray);

      nextDress = function() {
        var currentIndex = dressArray.indexOf(currentID.toString());
        var next = (currentIndex + 1) > dressArray.length ? dressArray[dressArray.length - 1] : dressArray[currentIndex + 1];
        console.log('next dress : ' + next);
      };
      // -- If currentID = '2', The next button should display '4'--//
      previousDress = function() {
        var currentIndex = dressArray.indexOf(currentID.toString());
        var prev = (currentIndex - 1) < 0 ? dressArray[0] : dressArray[currentIndex - 1];
        console.log('prev dress : ' + prev);
      };
      previousDress();
      nextDress();
    }
  }
]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
  <button ng-click="myclick()">Button</button>
</div>

Answer 2

Seeing the HTML that generates your button would be helpful. But as far as I can see something like <button>{{dressArray[currentId].id}} </buuton> should show the array value at index currentId