javascript - How can I develop a popup that open on a button click (Angularjs) -

any 1 can refer me link or demo of code developing popup using angularjs.

i have tried following code it's not working.

var myapp = angular.module('myapp', ['ngroute', 'ngmap', 'ui.bootstrap']);  myapp.config(function($routeprovider, $locationprovider) {     $locationprovider.hashprefix('');     $routeprovider         .when("/", {             templateurl: "views/home.php",             controller: 'popupdemocont'         })         .when("/profile.php", {             templateurl: "views/profile.php"          })         .otherwise({             redirectto: "/"         }); });  myapp.controller("imagecontroller", ["$scope", function($scope) {      $scope.logoimage = "images/logo.png";     $scope.bgtextimage = "images/bgtextimage.png";  }]);  myapp.controller("popupdemocont", ["$scope", "$modal", function($scope, $modal) {     $scope.open = function() {         console.log('opening pop up');         var modalinstance = $modal.open({             templateurl: 'views/popup.php',             controller: 'popupcont'         });     }; }]);  myapp.controller("popupcont", ["$scope", "$modalinstance", function($scope, $modalinstance) {     $scope.close = function() {         $modalinstance.dismiss('cancel');     }; }]); 

in bellow html, set ng-controller isn't working.

<div class="book_div">     <div class="book_content">         <p id="book-text">facing immigration             <br> problems?         </p>         <p>helpful guid navigate case</p>         <div class="hidden-sm hidden-xs"><img ng-src="{}" class="center-block img-responsive">         </div>         <a class="submit-button  book_btn" ng-click="open()">free download</a>     </div> </div> 

it giving error:

[$injector:unpr].

you can use uibmodalinstance.

on button click call function open.

code open function:

$scope.open = function(uuid,name){ var instance = $uibmodal.open({                         animation: $scope.animationsenabled,                         templateurl: 'common/common/partials/delete-                                       confirm.tpl.html',                         controller: function ($uibmodalinstance,                                                  $scope) {                             $scope.name = name;                             $scope.icon = "fa-cogs";                             $scope.description = "yo have opened uib                                popup"                              $scope.delete = function () {                                                             $uibmodalinstance.close($scope.deletevalue);                             };                              $scope.cancel = function () {                                 $uibmodalinstance.dismiss('cancel');                             };                         }                     }); } 

i have used code deleting record. can use in way, if want take response of popup can use:

instance.result.then(function (option) { // code here                                 }, function () {                         console.log('modal dismissed at: ' + new date());                     }); 

html template like:

<div class="modal-header gray_background">             <h4><b>permanently delete - <i class="fa {{icon}} foldericon" aria-hidden="true"></i> {{name}} </b></h4>         </div>         <div class="modal-body">             <span data-ng-bind-html="description"></span>              <center style="margin-top: 10px;">                 <div>type "delete" confirm                     <input type="text" class="input" ng-model="deletevalue" required />                 </div>             </center>         </div>         <div class="modal-footer gray_background">             <button class="btn btn-default" type="button" ng-click="cancel()">cancel</button>             <button class="btn btn-danger" type="button" ng-click="delete()">delete</button>         </div> 

hope helpful, if have further query can ask. thanks!