Google Now-style ionic-swipeable-cards with collection-repeat

I’ve seen the Tinder-style swipe cards described here

But I’m looking for a simplified version (swipe left/right) that works with collection-repeat I put together a simple codepen based on the ionic-swipeable-cards project, and it works fine with ng-repeat. But the collection-repeat and swipe-card directives clash.

Any ideas on an easy fix?

I got it to work by making the swipeCards directive restrict: 'EA' which allowed me to use it together with collection-repeat.

.directive('swipeCards', ['$rootScope', function($rootScope) {
return {
  restrict: 'EA',
  template: '<div class="swipe-cards" ng-transclude></div>',
  replace: true,
  transclude: true,
  scope: {},
  controller: function($scope, $element) {
    var swipeController = new SwipeableCardController({
    $rootScope.$on('swipeCard.pop', function(isAnimated) {

    return swipeController;

Here is the codepen for swipeable cards with collection-repeat. But an someone please explain why I cannot just use the ionic on-swipe directives to do the same thing?