Ionic lists, using animation removing an item and ui-sref causes that both are triggered on a delete action

I have three cases:

1.- If I use item-remove-animate (it animates the delete action) and ui-sref (it makes the item clickable to send the user to another view), when I delete an item, it gets deleted but also, the ui-sref redirect is triggered.

2.- If I remove the animation class 'item-remove-animate", it works as I expect, the item is deleted and I’m still on the same view. The problem is that the items are deleted instantly, I would like to conserve the animation.

3.- If I remove the ui-sref, the animation works as expected but I lose the redirect.

Here it is the complete view I’m using, in the first case:


<ion-view title="Bimbo Keepers">
  <ion-nav-buttons side="left"><a ng-click="onShowDeleteIcons()" ng-if="reportes.length" class="button button-icon icon ion-minus-circled"></a></ion-nav-buttons>
  <ion-content padding="true" class="has-bottom-icons">
    <div class="row">
    <ion-list show-delete="data.showDelete">
      <ion-item ng-repeat="reporte in reportes.slice().reverse()" type="item-text-wrap" ui-sref="tab.detail-enviados({id:})" class="item-thumbnail-left item-icon-right item-remove-animate item item-complex item-left-editable item-right-editable">
        <ion-delete-button ng-click="onReporteDelete(reporte)" class="ion-minus-circled"></ion-delete-button>
        <img ng-src="{{ reporte.imagen1_base64 }}"/>
        <h2>Reporte No: {{}}</h2>
        <p>Envíado el {{reporte.fecha}}</p><i class="icon ion-chevron-right icon-accessory"></i>
    <div ng-if="!reportes.length" class="container">
      <p>No has enviado reportes. Desde la pantalla de Reportes Guardados, utiliza el botón sincronizar.</p>


angular.module('mysteryshoppers.controllers').controller('ReportesEnviadosController', function($scope, ReportesEnviados) {
  $ = {
    showDelete: false
  $scope.$on('$ionicView.beforeEnter', function() {
    return $scope.reportes = ReportesEnviados.all();
  $scope.onShowDeleteIcons = function() {
    return $ = !$;
  $scope.onReporteDelete = function(reporte) {
    $scope.reportes.splice($scope.reportes.indexOf(reporte), 1);
  $scope.onDestruir = function() {
    $scope.reportes = [];



.factory('ReportesEnviados', ($filter) ->
  reportes = angular.fromJson(localStorage.getItem('reportes-enviados')) or []
    count: ->
    all: ->
    get: (reporteId) ->
      ...get an item...
    save: (reporte) -> an item...
    delete: (reporteId) ->
      ...delete an item...
    destroy: ->
      ...delete all...

Any help will be appreciated to conserve the animation.

Could you provide a codepen example of this?

Of course, here it is:

Try to delete an item, you can activate the delete icons with the top left button.

Here it is a workaround:

Prevent the propagation of the $event on delete.

Hmm, alright, seeing this too. It seems that if you use ng-href instead, it appears to work though. Would you mind opening an issue for this and pinging me on it? I’m @mhartington on github too.