AngularJS Next and Previous Array Values - arrays

Question

What I'm trying to achieve:
Change state when the user clicks previous or next, each state is assigned an id and will need to figure out which id is previous or next before changing previous or next state.
Current Problem:
I have managed to display the current state id '1' and I have managed to group all the other id's within an array but I don't know how to get the next and previous buttons to trigger the right previous or next states on click.
Please find my code below, I've added comments/notes to point things out.
Any help/advice would be helpful! Thank you.
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' -- //
// -- If currentID = '2', The next button should display '4'--//
$scope.nextDress = function() {
$state.go('main.rail', {id: idhere });
};
// -- If currentID = '1', The previous button should display '4' -- //
// -- If currentID = '2', The previous button should display '1' -- //
$scope.previousDress = function() {
$state.go('main.rail', {id: idhere });
};
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>

Answer 1

check that the currentId + 1 is not greater than the length of the array for the next item (if greater, go to the first) and check that the currentId - 1 is not less than 0, if yes, go to the last item (to make it cyclic):
$scope.nextDress = function() {
var next = parseInt(currentId) + 1 > dressArray.length ? 0 : parseInt(currentId) + 1;
$state.go('main.rail', {id: next });
};
$scope.previousDress = function() {
var prev = parseInt(currentId) - 1 < 0 ? dressArray.length - 1 : parseInt(currentId) - 1;
$state.go('main.rail', {id: prev });
};

Answer 2

I would make the data like a closed linked list, run this every time after passing through filter.
var currentItem; // keep a reference of current item
var arrayToLL = function(arr){
for (var i = 0; i < arr.length; i++) {
var item = arr[i];
if (i == 0) item.prev = arr[arr.length - 1];
else item.prev = arr[i - 1];
if (i == arr.length - 1) item.next = arr[0];
else item.next = arr[i + 1];
if (item.id == currentId) { // you may get currentId from $stateParams
currentItem = item;
}
}
}
$scope.nextDress = function() {
$state.go('main.rail', {id: currentItem.next.id });
};
$scope.previousDress = function() {
$state.go('main.rail', {id: currentItem.prev.id });
};