How to create modal in AngularJS with Bootstrap

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>  
  24.    
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) {  
  25.   
  26. $scope.names = names;  
  27. $scope.selected = {  
  28. name: $scope.names[0]  
  29. };  
  30.   
  31. $scope.ok = function () {  
  32. $modalInstance.close($scope.selected.name);  
  33. };  
  34.   
  35. $scope.cancel = function () {  
  36. $modalInstance.dismiss('cancel');  
  37. };  
  38. });  
Enjoy coding!
 
Thank You 
Next Recommended Reading AngularJS BootStrap Process