Angularstrap modal directive for bootstrap 3

angular-strap-modal.coffee

"use strict"
angular.module("$strap.directives").factory("$modal", ["$rootScope", "$compile", "$http", "$timeout", "$q", "$templateCache", "$strapConfig", ($rootScope, $compile, $http, $timeout, $q, $templateCache, $strapConfig) ->
  ModalFactory = ModalFactory = (config) ->
    Modal = (config) ->
      options = angular.extend(
        show: true
      , $strapConfig.modal, config)
      scope = (if options.scope then options.scope else $rootScope.$new())
      templateUrl = options.template
      $q.when($templateCache.get(templateUrl) or $http.get(templateUrl,
        cache: true
      ).then((res) ->
        res.data
      )).then onSuccess = (template) ->
        id = templateUrl.replace(".html", "").replace(/[\/|\.|:]/g, "-") + "-" + scope.$id
        $modal = $("<div class=\"modal\" tabindex=\"-1\"></div>").attr("id", id).addClass("fade").html(template)
        $modal.addClass options.modalClass  if options.modalClass
        $("body").append $modal
        $timeout ->
          $compile($modal) scope

        scope.$modal = (name) ->
          $modal.modal name

        angular.forEach ["show", "hide"], (name) ->
          scope[name] = ->
            $modal.modal name

        scope.dismiss = scope.hide
        angular.forEach ["show", "shown", "hide", "hidden"], (name) ->
          $modal.on name, (ev) ->
            scope.$emit "modal-" + name, ev


        $modal.on "shown", (ev) ->
          $("input[autofocus]", $modal).first().trigger "focus"

        $modal.on "hidden", (ev) ->
          scope.$destroy()  unless options.persist

        scope.$on "$destroy", ->
          $modal.remove()

        $modal.modal options
        $modal

    new Modal(config)

  ModalFactory
]).directive "bsModal", ["$q", "$modal", ($q, $modal) ->
  restrict: "A"
  scope: true
  link: postLink = (scope, iElement, iAttrs, controller) ->
    options =
      template: scope.$eval(iAttrs.bsModal)
      persist: true
      show: false
      scope: scope

    angular.forEach ["modalClass", "backdrop", "keyboard"], (key) ->
      options[key] = iAttrs[key]  if angular.isDefined(iAttrs[key])

    $q.when($modal(options)).then onSuccess = (modal) ->
      iElement.attr("data-target", "#" + modal.attr("id")).attr "data-toggle", "modal"

]

modal-content.html

 <!-- Button trigger modal -->
  <a data-toggle="modal" href="#myModal" class="btn btn-primary btn-lg">Launch demo modal</a>

  <!-- Modal -->
  <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
          <h4 class="modal-title">Modal title</h4>
        </div>
        <div class="modal-body">
          ...
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
          <button type="button" class="btn btn-primary">Save changes</button>
        </div>
      </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
  </div><!-- /.modal -->