不用angular-ui也可以实现同样的效果，这可以通过使用Angular 指令来实现。
首先将指令添加到模态。

<div class="modal fade" my-modal ....>...</div>

创建新的Angular 方向：

app.directive('myModal', function() {
   return {
     restrict: 'A',
     link: function(scope, element, attr) {
       scope.dismiss = function() {
           element.modal('hide');
       };
     }
   } 
});

现在从控制器调用dismiss（）方法。

app.controller('MyCtrl', function($scope, $http) {
    // You can call dismiss() here
    $scope.dismiss();
});

我还在使用angular js的早期阶段。我知道我们不应该在控制器内部操作DOM。所以我在指令中使用了DOM操作。我不确定这是否同样糟糕。如果我有更好的选择，我会在这里发布。
需要注意的是，我们不能简单地在视图中使用ng-hide或ng-show来隐藏或显示模态，这只是隐藏了模态而不是模态背景，我们必须调用modal（）示例方法来完全删除模态。

你可以这样做：

angular.element('#modal').modal('hide');

你看过angular-ui bootstrap吗？有一个Dialog（ui. bootstrap. dialog）指令工作得很好。你可以在回调过程中关闭对话框（根据示例）：

$scope.close = function(result){
  dialog.close(result);
};

更新：
该指令后来被重命名为Modal。

下面是一个可重用的Angular指令，它将隐藏和显示Bootstrap模态。

app.directive("modalShow", function () {
    return {
        restrict: "A",
        scope: {
            modalVisible: "="
        },
        link: function (scope, element, attrs) {

            //Hide or show the modal
            scope.showModal = function (visible) {
                if (visible)
                {
                    element.modal("show");
                }
                else
                {
                    element.modal("hide");
                }
            }

            //Check to see if the modal-visible attribute exists
            if (!attrs.modalVisible)
            {

                //The attribute isn't defined, show the modal by default
                scope.showModal(true);

            }
            else
            {

                //Watch for changes to the modal-visible attribute
                scope.$watch("modalVisible", function (newValue, oldValue) {
                    scope.showModal(newValue);
                });

                //Update the visible value when the dialog is closed through UI actions (Ok, cancel, etc.)
                element.bind("hide.bs.modal", function () {
                    scope.modalVisible = false;
                    if (!scope.$$phase && !scope.$root.$$phase)
                        scope.$apply();
                });

            }

        }
    };

});

用法示例#1 -假设您要显示模态-您可以添加ng-if作为条件

<div modal-show class="modal fade"> ...bootstrap modal... </div>

用法示例#2 -在modal-visible属性中使用Angular 表达式

<div modal-show modal-visible="showDialog" class="modal fade"> ...bootstrap modal... </div>

另一个例子-为了演示控制器交互，你可以添加这样的东西到你的控制器，它会显示模态后2秒，然后隐藏它5秒后。

$scope.showDialog = false;
$timeout(function () { $scope.showDialog = true; }, 2000)
$timeout(function () { $scope.showDialog = false; }, 5000)

我来不及回答这个问题了--为这里的另一个问题创建了这个指令。
希望这个有用。

您可以将data-dismiss=“modal”添加到调用angularjs函数的按钮属性中。
如：

<button type="button" class="btn btn-default" data-dismiss="modal">Send Form</button>

我已经将the answer by @isubuz和this answer by @Umur Kontacı on attribute directives重新混合到一个版本中，在这个版本中，控制器不调用类似DOM的操作（如"dismiss"），而是尝试更像MVVM风格，设置一个布尔属性isInEditMode。视图反过来将这一点信息链接到打开/关闭引导模式的属性指令。

var app = angular.module('myApp', []);

app.directive('myModal', function() {
   return {
     restrict: 'A',
     scope: { myModalIsOpen: '=' },
     link: function(scope, element, attr) {
       scope.$watch(
         function() { return scope.myModalIsOpen; },
         function() { element.modal(scope.myModalIsOpen ? 'show' : 'hide'); }
       );
     }
   } 
});

app.controller('MyCtrl', function($scope) {
  $scope.isInEditMode = false;
  $scope.toggleEditMode = function() { 
    $scope.isInEditMode = !$scope.isInEditMode;
  };
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/js/bootstrap.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.css" rel="stylesheet"/>

<div ng-app="myApp" ng-controller="MyCtrl as vm">

<div class="modal fade" my-modal my-modal-is-open="isInEditMode">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-body">
        Modal body! IsInEditMode == {{isInEditMode}}
      </div>
      <div class="modal-footer">
        <button class="btn" ng-click="toggleEditMode()">Close</button>
      </div>
    </div>
  </div>
</div>

<p><button class="btn" ng-click="toggleEditMode()">Toggle Edit Mode</button></p> 
<pre>isInEditMode == {{isInEditMode}}</pre>
  
</div>

**just fire bootstrap modal close button click event**
var app = angular.module('myApp', []);
app.controller('myCtrl',function($scope,$http){
  $('#btnClose').click();// this is bootstrap modal close button id that fire click event
})

--------------------------------------------------------------------------------

<div class="modal fade" id="myModal" role="dialog">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
        </div>
        <div class="modal-body">
          <p>Some text in the modal.</p>
        </div>
        <div class="modal-footer">
          <button type="button" id="btnClose" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
      </div>
    </div>
  </div>

只需像我设置btnClose那样设置模态“关闭按钮”id，为了在Angular 模式下关闭模态，您必须像我一样触发关闭按钮click事件$（“#btnClose”）.click（）

你可以用一个简单的jquery代码来完成。

$('#Mymodal').modal('hide');