ngDialog Example

<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ng-dialog/1.0.1/css/ngDialog.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ng-dialog/1.0.1/css/ngDialog-theme-default.min.css">
  </head>

  <body ng-app="myapp" ng-controller="myCtrl">
    <h1>{{message}}</h1>
    <button ng-click="normalDialog()">Simple Dialog</button>
    <button ng-click="dialogWithTimeOut()">Time Out Dialog</button>
    <button ng-click="dialogWithOtherProperties()">More Info</button>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/ng-dialog/1.0.1/js/ngDialog.min.js"></script>
    <script src="script.js"></script>
  </body>

</html>

// Code goes here
var app = angular.module("myapp", [
    'ngDialog'
]);
app.controller("myCtrl",['ngDialog', '$scope', function(ngDialog, $scope) {
  $scope.message = "Hello ngDialog";
  $scope.normalMessage = "This is simple ng Dialog"
  $scope.timeOutMessage = "This is time out ng Dialog"
  $scope.normalDialog = function() {
            ngDialog.open({
            template: 'template1.html',
            className: 'ngdialog-theme-default',
            scope: $scope,
        });
  };
  
  $scope.dialogWithTimeOut = function() {
        var dialog =ngDialog.open({
            template: 'template2.html',
            className: 'ngdialog-theme-default',
            scope: $scope,
        });
        setTimeout(function () {
            dialog.close();
        }, 2000);
  };
  
  $scope.dialogWithOtherProperties = function() {
        var dialog =ngDialog.open({
            template: 'template3.html',
            className: 'ngdialog-theme-default'
        });
  };
  
}]);

/* Styles go here */

<div ng-controller="myCtrl">
  {{normalMessage}}
</div>

<div ng-controller="myCtrl">
  {{timeOutMessage}}
</div>

<div>
  <ul>
    <li>You can set controller - 'controller' like 'template'</li>
    <li>You can disable and enable showing close button - set true or false to'showClose'</li>
    <li>For more details <a href="http://likeastore.github.io/ngDialog/" target="_blank">Learn>></a></li>
  </ul>
</div>