Angular + Bootstrap堆叠可点击区域

Question

在我的角度应用程序中，我从REST API获取的对象是我在网格中的列中创建的，有点像图库类型的东西。

示例：

意图是整个灰色区域可点击，这将打开详细信息视图模式。然后当您点击“删除”按钮时，它会打开“删除项目”模式。两个模态都通过角度的ng-click打开。

但是，由于它们都在同一个容器中（灰色，可点击的容器），每当我单击“删除”按钮时，它会打开两个模态，而不仅仅是“删除项目”。

有没有办法解决这个问题，ala强制按钮位于“前面”，这样单击它只会打开正确的模态？

谢谢！

编辑：html看起来像这样 -

<div class="row">
  <div ng-repeat="item in items" class="col-lg-3 col-md-6 col-xs-12">
   <div class="item-container" ng-click="openDetailModal(item)">
     <!--stuff-->
     <button class="btn btn-danger pull-right" ng-click="openDeleteItemModal(item) />
    </div>
  </div>
</div>