Ниже приведен пример:
index.html
<body ng-app="plunker">
<div ng-controller="ModalCtrl">
<button class="btn btn-info" ng-click="open()" style="margin: 15px;">Open Modal</button>
<h2 style="color: red;">{{result}}</h2>
</div>
</body>
script.js
app.controller('ModalCtrl', function($scope, $uibModal) {
$scope.open = function() {
var modalInstance = $uibModal.open({
templateUrl: "modalContent.html",
controller: "ModalContentCtrl",
size: '',
});
modalInstance.result.then(function(response){
$scope.result = `${response} button hitted`;
});
};
})
app.controller('ModalContentCtrl', function($scope, $uibModalInstance) {
$scope.ok = function(){
$uibModalInstance.close("Ok");
$http.post('/ServerRequest/PostDataResponse', data, config)
.success(function (data, status, headers, config) {
$scope.PostDataResponse = data;
})
.error(function (data, status, header, config) {
$scope.ResponseDetails = "Data: " + data +
"<hr />status: " + status +
"<hr />headers: " + header +
"<hr />config: " + config;
});
}
$scope.cancel = function(){
$uibModalInstance.dismiss();
}
});
modalContent.html
<div class="modal-header">
<h3>Modal header</h3>
</div>
<div class="modal-body">
<h4>Just something random here</h4>
</div>
<div class="modal-footer">
<button class="btn btn-primary" ng-click="ok()">OK</button>
<button class="btn btn-warning" ng-click="cancel()">Cancel</button>
</div>