如何通过单击angularjs项目中的卡片图像打开bootstrap modalbox

<div class="card">
  <img src="card-image.jpg" ng-click="openModal()" />
  <div class="card-body">
    <!-- 卡片内容 -->
  </div>
</div>

app.controller('MyController', function($scope) {
  $scope.openModal = function() {
    // 打开Modal Box的逻辑
  };
});

app.controller('MyController', function($scope, $uibModal) {
  $scope.openModal = function() {
    var modalInstance = $uibModal.open({
      templateUrl: 'modal-template.html', // Modal Box的模板文件路径
      controller: 'ModalController', // Modal Box的控制器
      size: 'lg' // Modal Box的尺寸，例如：'lg'表示大尺寸
    });
  };
});

<div class="modal-header">
  <h3 class="modal-title">Modal Box标题</h3>
</div>
<div class="modal-body">
  <!-- Modal Box的内容 -->
</div>
<div class="modal-footer">
  <button class="btn btn-primary" ng-click="ok()">确定</button>
  <button class="btn btn-default" ng-click="cancel()">取消</button>
</div>

app.controller('ModalController', function($scope, $uibModalInstance) {
  $scope.ok = function() {
    // 确定按钮的逻辑
    $uibModalInstance.close(); // 关闭Modal Box
  };

  $scope.cancel = function() {
    // 取消按钮的逻辑
    $uibModalInstance.dismiss('cancel'); // 关闭Modal Box
  };
});