<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-2.5.0.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<script src="script.js"></script>
</head>
<body>
<div ng-app="app" ng-controller="mainController">
<h4>Open a modal popup in AngularJS</h4>
Click to open the modal : <button id="btn1" ng-click = "openModal()" class="btn-primary">Open Modal</button>
</div>
</body>
</html>
// Code goes here
var app = angular.module('app',[ 'ui.bootstrap'])
.controller('mainController', function mainController( $scope,$uibModal ){
$scope.openModal = function(){
$uibModal.open({
templateUrl : 'modalTemplate.html',
controller : 'modalController'
});
}
})
.controller('modalController', function modalController( $scope , $uibModalInstance ){
$scope.ok = function(){
$uibModalInstance.close()
}
$scope.cancel = function(){
$uibModalInstance.close()
}
})
/* Styles go here */
<div class="modal-header">
<h3 class="modal-title" id="modal-title">Modal Title</h3>
</div>
<div class="modal-body" id="modal-body">
Modal Content here..!
</div>
<div class="modal-footer">
<button class="btn btn-primary" type="button" ng-click="ok()">OK</button>
<button class="btn btn-warning" type="button" ng-click="cancel()">Cancel</button>
</div>