title: How to make this JS to show next card instead of random cards?
body: <p>I'm working on a Swipe card project using HTML, CSS and JS. </p>
  
  <p>I took this JS code from codepen and I implemented it but the problem is the cards are randomizing. How to make it to be in sequence (not repeating)?    </p>
  
  <pre class="lang-js prettyprint-override"><code>angular.module('starter', ['ionic', 'ionic.contrib.ui.cards'])
    .directive('noScroll', function($document) {
      return {
        restrict: 'A',
        link: function($scope, $element, $attr) {
          $document.on('touchmove', function(e) {
            e.preventDefault();
          });
        }
      }
    })
  
    .controller('CardsCtrl', function($scope, $ionicSwipeCardDelegate) {
      var cardTypes = [
        {title: '1'},
        {title: '2'},
        {title: '3'},
        {title: '4'},
        {title: '5'}
      ];
  
      $scope.cards = Array.prototype.slice.call(cardTypes, 0, 0);
  
      $scope.cardSwiped = function(index) {
        $scope.addCard();
      };
  
      $scope.cardDestroyed = function(index) {
        $scope.cards.splice(index, 1);
      };
  
      $scope.addCard = function() {
        var newCard = cardTypes[
          Math.floor(Math.random() * cardTypes.length)
        ];
        newCard.id = Math.random();
        $scope.cards.push(angular.extend({}, newCard));
      }
    })
  
    .controller('CardCtrl', function($scope, $ionicSwipeCardDelegate) {
      $scope.goAway = function() {
        var card = $ionicSwipeCardDelegate.getSwipeableCard($scope);
        card.swipe();
      };
    });
  </code></pre>