Utility modal windows in AngularJS with Angular-UI Bootstrap

var app = angular.module('testApp', [ 'ngSanitize', 'ui.bootstrap' ]);

app.controller('testCtrl', ['$scope', 'myModalService', function ($scope, myModalService) {
  $scope.alert = function () {
    console.log('Alert clicked');
    $scope.alertOpen = true;
    myModalService.Alert('This is a message.', 'Alert alert alert!')
      .then(function () { $scope.alertOpen = false; });
  };
  
  $scope.confirm = function () {
    console.log('Confirm clicked');
    myModalService.Confirm('Confirm this message?', 'Confirm?')
      .then(function (result) { $scope.confirmResult = result; });
  };
  
  $scope.customResult = 'undefined';
  $scope.custom = function () {
    myModalService.Options('Custom modal', 'Custom title',
      ['Option 1', 'Option 2', 'And opt 3'], null, ['btn-danger', 'btn-primary'], 2)
      .then(function (result) {
        $scope.customResult = result;
      });
  };
}]);

<!DOCTYPE html>
<html ng-app="testApp">

  <head>
    <link data-require="bootstrap-css@3.0.3" data-semver="3.0.3" rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" />
    <script data-require="angular.js@1.2.14" data-semver="1.2.14" src="http://code.angularjs.org/1.2.14/angular.js"></script>
    <script data-require="angular-ui-bootstrap@0.10.0" data-semver="0.10.0" src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.10.0.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.0-beta.3/angular-sanitize.js"></script>
    <script src="app.js"></script>
    <script src="modalService.js"></script>
  </head>

  <body ng-controller="testCtrl">
    <div>
      <button ng-click="alert()">Alert</button>
      {{alertOpen ? 'Alert is open' : (alertOpen === false ? 'Alert is closed' : 'Alert never opened')}}
    </div>
    <div>
      <button ng-click="confirm()">Confirm</button>
      {{confirmResult ? 'true' : (confirmResult === false ? 'false' : 'undefined')}}
    </div>
    <div>
      <button ng-click="custom()">Custom</button>
      {{customResult}}
    </div>
  </body>

</html>

// The service you'll be calling
app.factory('myModalService', ['$q', '$modal', function ($q, $modal) {
  
  var modalService = {
    Options: function (text, title,
      options, optionValues, optionClasses, defaultOption) {
      
      if (typeof title !== 'string') title = 'Options';
      
      // Default values is the index of buttons
      if (!optionValues) {
        optionValues = options.map(function (value, index) { return index; });
      }
      
      var defered = $q.defer();
      
      var ctrl = function ($scope, $modalInstance) {
        $scope.text = text;
        $scope.title = title;
        $scope.options = options;
        $scope.optionClasses = optionClasses;
        $scope.doOption = function (index) {
          $modalInstance.close(index);
        };
      };
      ctrl.$inject = ['$scope', '$modalInstance'];
      
      $modal.open({
        controller: ctrl,
        templateUrl: 'modalTmpl.html',
        windowClass: 'my-modal-window'
      }).result.then(function (index) { defered.resolve(optionValues[index]) },
        function (message) {
          if (message !== 'backdrop click'
            && message !== void 0) defered.reject('Unknown dismissal of modal.');
          if (typeof defaultOption !== 'number'
            || defaultOption < 0 || defaultOption >= optionValues.length) {
            defered.reject('default');
          }
          defered.resolve(optionValues[defaultOption]);
        });
      
      return defered.promise;
    },
    Confirm: function (text, title) {
      if (typeof title !== 'string') title = 'Confirm';
      return modalService.Options(text, title,
        ['Yes', 'No'], [true, false], ['btn-danger', 'btn-primary'], 1);
    },
    Alert: function (text, title) {
      if (typeof title !== 'string') title = 'Alert';
      return modalService.Options(text, title,
        ['OK'], null, ['btn-primary'], 0).then(angular.noop);
    }
  };
  return modalService;
  
}]);

<div class="modal-header">
  <h3 ng-bind-html="title"></h3>
</div>
<div class="modal-body" ng-bind-html="text"></div>
<div class="modal-footer">
  <button ng-repeat="option in options"
    class="btn"
    ng-class="optionClasses[$index]"
    ng-bind-html="option"
    ng-click="doOption($index)">
  </button>
</div>

Contains a simple service with examples to show Alert, Confirm and simple custom modal windows.  
This uses AngularJS and AngularUI Bootstrap.

The syntax is simple:

    modalService.Options(text, title, options, optionValues, optionClasses, defaultOption)
      text: The text that will be in the modal window (set through ng-bind-html).
      title: The header text that will be in the modal window (set through ng-bind-html).
      options: An array of strings with the content of all buttons (set through ng-bind-html).
      optionValues: The values that each button resolves the promise with.
      optionClasses: The CSS classes each button has (passed to ng-class).
      defaultOption: Index of the default option (0 based).
    
    modalService.Alert(text, title)
      Shortcut for a modal with just an OK button.
    
    modalService.Confirm(text, title)
      Shortcut for a modal with a Yes and No button.
      Default button is No, and will resolve to true or false.

Because the tooltip uses `ng-bind-html` (the template can be modified to just show text
through by changing `ng-bind-html` to `ng-bind`) it requires ngSanitize to sanitize the input.

You can use [`$sce.trustAsHtml('<p>Html here</p>')`][1] to insert any HTML into the tooltip.

 [1]: http://docs.angularjs.org/api/ng/service/$sce