How to create modal in AngularJS with Bootstrap

Loading

How to create modal in AngularJS with Bootstrap

How to create modal in AngularJS with Bootstrap

Design for modal in AngularJS

<div ng-controller="ModalDemoCtrl" ng-app="demo" id="modal">
<script type="text/ng-template" id="modaldemo.html">
<div class="modal-header">
<h3 class="modal-title" style="background-color:red;">Select Name</h3>
</div>
<div class="modal-body">
<ul>
<li ng-repeat="name in names">
<a ng-click="selected.name = name">{{ name }}</a>
</li>
</ul>
Selected:
<b>{{ selected.name }}</b>
</div>
<div class="modal-footer">
<button class="btn btn-primary" ng-click="ok()">OK</button>
<button class="btn btn-danger" ng-click="cancel()">Cancel</button>
</div>
</script>
<center>
<button id="bt1" class="btn btn-default" ng-click="open()">Modal 1</button>
<br />
<button id="bt2" class="btn btn-default" ng-click="open('lg')">Modal 2</button>
<br />
<button id="bt3" class="btn btn-default" ng-click="open('sm')">Modal 3</button>
<br />
</center>
<hr />
<div ng-show="selected" id="Selected_text">Selected Name is: {{ selected }}</div>
</div>

CSS for design

<style type="text/css">
#modal
{
background-color:#DFBFFF;
}
#Selected_text
{
color:#FF9933;
font-size:x-large;
}
#bt1
{
background-color:#FF9933;
}
#bt2
{
background-color:#FFFFFF;
}
#bt3
{
background-color:#33CC33;
}
</style>

There are 3 design examples shown here.

Normal
Large
Small

Normal

Large

Small

Let say I have selected any one name from the preceding design. Here, it will be shown in div tag.

This design is responsive.

AngularJS Code for Modal

ngular.module('demo', ['ui.bootstrap']);
angular.module('demo').controller('ModalDemoCtrl', function ($scope, $modal, $log) {
$scope.names = ['Manish', 'Paresh', 'Sandip'];
$scope.animationsEnabled = true;
$scope.open = function (size) {
var modalInstance = $modal.open({
animation: $scope.animationsEnabled,
templateUrl: 'modaldemo.html',
controller: 'ModalInstanceCtrl',
size: size,
resolve: {
names: function () {
return $scope.names;
}
}
});
modalInstance.result.then(function (selectedname) {
$scope.selected = selectedname;
}, function () {
$log.info('Modal dismissed at: ' + new Date());
});
};
});
angular.module('demo').controller('ModalInstanceCtrl', function ($scope, $modalInstance, names) {
$scope.names = names;
$scope.selected = {
name: $scope.names[0]
};
$scope.ok = function () {
$modalInstance.close($scope.selected.name);
};
$scope.cancel = function () {
$modalInstance.dismiss('cancel');
};
});

Enjoy coding!

Thank You