How can I create a simple modal Dialog in angular.js?

I recommend you use the module ngDialog because it is simple to use and very powerful in terms of functionalities, which allow you to show a plain text, to show an advanced template with its controller.

The most liked part of this solution, compared to others I've seen, is that it is implemented as a service (a directive is also available) and that the results get with a Promise

In this link you can see a demo

You may have heard of Angular Modal service because it is lightweight and has no dependencies, it is simply a service for Modal boxes. But it is much less popular than ngDialog (~250 Stars vs ~2500 on GitHub) although it has the necessary functions and you also get the results by means of promises.

Here's a demo:

var app = angular.module('app', ['angularModalService']);

app.controller('ctrl', function($scope, ModalService) {

  $scope.mostrarModal = function() {

    // Debes proveer un controlador y una plantilla.
    ModalService.showModal({
      template: '<div class="overlay"/><div class="modal"><input type="text" ng-model="result"><button ng-click="cerrarModal()">Cerrar</button></div>',
      controller: "ContrladorModal"
    }).then(function(modal) {
      modal.close.then(function(result) {
        // Una vez que el modal sea cerrado, la libreria invoca esta función
        // y en result tienes el resultado.
        $scope.resultadoModal = result;
      });
    });

  };

});

app.controller('ContrladorModal', function($scope, close) {
  $scope.result = "Esta es la respuesta";
  $scope.cerrarModal = function() {
    close($scope.result);
  };

});

.modal {
  display: block;
  position: fixed;
  top: 50px; left: 50px; bottom: 50px; right: 50px;
  background: white;
  z-index: 100;
}
.overlay {
  display: block;
  position: fixed;
  top: 0; left: 0; bottom: 0; right: 0;
  background: rgba(0, 0, 0, 0.5);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.1/angular.js"></script>
<script src="https://rawgit.com/dwmkerr/angular-modal-service/master/dst/angular-modal-service.js"></script>

<div ng-app="app" ng-controller="ctrl">

  <button ng-click="mostrarModal()">Ver Modal</button>
  <br>{{ resultadoModal }}
</div>

I create a directive that allows you to open and close the modal, which has the following code:

app.directive("modalShow", function () {
    return {
        restrict: "A",
        scope: {
            modalVisible: "="
        },
        link: function (scope, element, attrs) {
            //Hide or show the modal
            scope.showModal = function (visible) {
                if (visible)
                {
                    element.modal("show");
                }
                else
                {
                    element.modal("hide");
                }
            }
            //Check to see if the modal-visible attribute exists
            if (!attrs.modalVisible)
            {
                //The attribute isn't defined, show the modal by default
                scope.showModal(true);
            }
            else
            {
                //Watch for changes to the modal-visible attribute
                scope.$watch("modalVisible", function (newValue, oldValue) {
                    scope.showModal(newValue);
                });

                //Update the visible value when the dialog is closed through UI actions (Ok, cancel, etc.)
                element.bind("hide.bs.modal", function () {
                    // scope.modalVisible = false;
                    _.defer(function(){scope.$apply(scope.modalVisible = false);});
                });
            }
        }
    };
});

The HTML code would look like this:

<button ng-click='toggleModal()'></button>
       <div modal-show modal-visible="showDialogFavoriteSelect" class='modal fade'>
        <div class="modal-dialog modal-lg">
          <div class="modal-content">
            <div class="modal-header">
              <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
              <h3>My Modal</h3>
            </div>
            <div class="modal-body">
              </div>
            </div>
          </div>
        </div>
       </div>

And to call it from any controller you would just use something like this:

$scope.toggleModal = function() {
  $scope.showDialogFavoriteSelect = true;
};

What happens is that when you step on the button, and the toggleModal function is fired, the value of showDialogFavoriteSelect is changed and the value of modalVisible which has a watch is changed and the modal is shown or hidden.

No need to use a button with just changing the value of showDialogFavoriteSelect will show or hide it.

Note : you need to use bootstrap for this approach.

Plunker demo