Example for stackoverflow. Angular-strap $alert.

useFormError is a angularjs directive, which is designed to create custom checks

by Stepan Kasyanenko

HTML

<script src="https://cdn.rawgit.com/Stepan-Kasyanenko/use-form-error/master/src/use-form-error.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular-messages.min.js"></script>
<script src="https://rawgit.com/mgcrea/angular-strap/master/dist/angular-strap.min.js"></script>
<script src="https://rawgit.com/mgcrea/angular-strap/master/dist/modules/modal.min.js"></script>
<script src="https://rawgit.com/mgcrea/angular-strap/master/dist/modules/modal.tpl.min.js"></script>
<script src="https://rawgit.com/mgcrea/angular-strap/master/dist/angular-strap.tpl.min.js"></script>
<link rel="stylesheet" href="https://rawgit.com/twbs/bootstrap/master/dist/css/bootstrap.css">
<body ng-app="ExampleApp">
  <div ng-controller="ExampleController">
    <h3>
      ExampleController
    </h3>
    <form name="ExampleForm" id="ExampleForm">
      <div id="divForAlert">

      </div>
    </form>
  </div>
</body>

CSS

.errors {
  color: maroon
}

JavaScript

angular.module('ExampleApp', ['use', 'ngMessages', 'mgcrea.ngStrap', 'mgcrea.ngStrap.modal'])
  .controller('ExampleController', function($scope, $alert) {
    $scope.alert = $alert({
      title: ' Critical Alert Detected!',
      content: 'its Alert!',
      container: '#divForAlert',
      type: 'danger',
      dismissable: true,
      duration: '5',
      show: false,
      prefixEvent:"mymodal",
      animation :'am-fade',
    });
    $scope.alert.$promise.then(function() {
      $scope.alert.show();
    });
    $scope.$root.$on('mymodal.hide.before', function(event) {
      console.log('hide before',event);
    });
     $scope.$root.$on('mymodal.hide', function(alert) {
      console.log('hide',alert);
    });
  })
  angular.module('ngAnimate', [])
  .factory('$$animateReflow', ['$window', '$timeout', function($window, $timeout) {
    var requestAnimationFrame = $window.requestAnimationFrame       ||
                                $window.webkitRequestAnimationFrame ||
                                function(fn) {
                                  return $timeout(fn, 10, false);
                                };

    var cancelAnimationFrame = $window.cancelAnimationFrame       ||
                               $window.webkitCancelAnimationFrame ||
                               function(timer) {
                                 return $timeout.cancel(timer);
                               };
    return function(fn) {
      var id = requestAnimationFrame(fn);
      return function() {
        cancelAnimationFrame(id);
      };
    };
  }]);