ionic 下の要素までイベントが発生してしまう場合

ionicで開発をしていると、時々発生してほしくないイベントが発生してしまうことが有ります。

例えば、

こんなリスト表示は、ionicで開発しているとよく使う場面でしょう。
リスト本体をタップしたときのイベントと、右端のボタンをタップしたときで処理を分けたい時、リスト本体は問題無いのですが、ボタンをタップすると、ボタンの下のリストもタップした事になり、イベントが２つ発生してしまいます。
HTMLのコード

<ion-view view-title="一覧">
  <ion-content>
    <div class="list">
        <a class="item item-button-right" href="#" ng-repeat="roll in data" ng-click="viewDitail(roll.id)">
          <h2>{{roll.name}}</h2>
          <p>{{roll.datep}}提出</p>
          <button class="button button-balanced" ng-click="editRepo(roll.id)"><i>修正</i></button>
        </a>
    </div>
  </ion-content>
</ion-view>

リスト本体をクリックすると、viewDitai(roll.id)が実行されます
右端のボタンをクリックすると、editRepo(roll.id)が実行されます

javaScript

    $scope.viewDitail = function(repoId){
      $log.info("詳細を表示する ID:"+repoId);
    }
    $scope.editRepo = function(repoId){
      $log.info("作成した内容を編集する ID:"+repoId);
    }

それぞれ次のように関数を書きました。
実際にボタンをクリックすると

このように、子要素（ボタン）のイベントが、親（リスト）にまで伝わってしまい、意図しない結果になってしまう。

解決策は、e.preventDefault()を使う方法も有りますが、ionicの場合はもっと簡単です。
子要素に、ion-stop-event=”click”を付けるだけです。

<ion-view view-title="一覧">
  <ion-content>
    <div class="list">
        <a class="item item-button-right" href="#" ng-repeat="roll in data" ng-click="viewDitail(roll.id)">
          <h2>{{roll.name}}</h2>
          <p>{{roll.datep}}提出</p>
          <button ion-stop-event="click" class="button button-balanced" ng-click="editRepo(roll.id)" ><i>修正</i></button>
        </a>
    </div>
  </ion-content>
</ion-view>

これで、子のイベントが親に伝わらなくなります