How to create modal in AngularJS with Bootstrap

Design for modal in AngularJS
  1. <div ng-controller="ModalDemoCtrl" ng-app="demo" id="modal">
  2. <script type="text/ng-template" id="modaldemo.html">
  3. <div class="modal-header">
  4. <h3 class="modal-title" style="background-color:red;">Select Name</h3>
  5. </div>
  6. <div class="modal-body">
  7. <ul>
  8. <li ng-repeat="name in names">
  9. <a ng-click="selected.name = name">{{ name }}</a>
  10. </li>
  11. </ul>
  12. Selected:
  13. <b>{{ selected.name }}</b>
  14. </div>
  15. <div class="modal-footer">
  16. <button class="btn btn-primary" ng-click="ok()">OK</button>
  17. <button class="btn btn-danger" ng-click="cancel()">Cancel</button>
  18. </div>
  19. </script>
  20. <center>
  21. <button id="bt1" class="btn btn-default" ng-click="open()">Modal 1</button>
  22. <br />
  23. <button id="bt2" class="btn btn-default" ng-click="open('lg')">Modal 2</button>
  24. <br />
  25. <button id="bt3" class="btn btn-default" ng-click="open('sm')">Modal 3</button>
  26. <br />
  27. </center>
  28. <hr />
  29. <div ng-show="selected" id="Selected_text">Selected Name is: {{ selected }}</div>
  30. </div>
CSS for design
  1. <style type="text/css">
  2. #modal
  3. {
  4. background-color:#DFBFFF;
  5. }
  6. #Selected_text
  7. {
  8. color:#FF9933;
  9. font-size:x-large;
  10. }
  11. #bt1
  12. {
  13. background-color:#FF9933;
  14. }
  15. #bt2
  16. {
  17. background-color:#FFFFFF;
  18. }
  19. #bt3
  20. {
  21. background-color:#33CC33;
  22. }
  23. </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
  1. ngular.module('demo', ['ui.bootstrap']);
  2. angular.module('demo').controller('ModalDemoCtrl', function ($scope, $modal, $log) {
  3. $scope.names = ['Manish', 'Paresh', 'Sandip'];
  4. $scope.animationsEnabled = true;
  5. $scope.open = function (size) {
  6. var modalInstance = $modal.open({
  7. animation: $scope.animationsEnabled,
  8. templateUrl: 'modaldemo.html',
  9. controller: 'ModalInstanceCtrl',
  10. size: size,
  11. resolve: {
  12. names: function () {
  13. return $scope.names;
  14. }
  15. }
  16. });
  17. modalInstance.result.then(function (selectedname) {
  18. $scope.selected = selectedname;
  19. }, function () {
  20. $log.info('Modal dismissed at: ' + new Date());
  21. });
  22. };
  23. });
  24. angular.module('demo').controller('ModalInstanceCtrl', function ($scope, $modalInstance, names) {
  26. $scope.names = names;
  27. $scope.selected = {
  28. name: $scope.names[0]
  29. };
  31. $scope.ok = function () {
  32. $modalInstance.close($scope.selected.name);
  33. };
  35. $scope.cancel = function () {
  36. $modalInstance.dismiss('cancel');
  37. };
  38. });
Enjoy coding!
Thank You