app = angular.module('app', ['ui.bootstrap'])

​

app.controller 'AppCtrl', ['$scope', '$q', '$timeout', ($scope, $q, $timeout) ->

  $scope.items = ['Item 1', 'Item 2'] 

  $scope.deleteItem = (index) ->                         

    defer = $q.defer()

    $timeout ->

      $scope.items.splice(index, 1)

      defer.resolve()

    , 1000

    defer.promise

]

​

app.directive 'confirmationDialogHeader', ['$compile', '$q', '$dialog', ($compile, $q, $dialog) ->

  restrict: 'A'

  scope:

    confirmationDialogAction: '@'

  link: (scope, element, attrs) ->       

    dialogTemplate = """

      <div> 

        <div class="modal-header">

          <h4>{{header}}</h4>

        </div>

        <div class="modal-body">

          Are you sure?

        </div>

        <div class="modal-footer">

          <button class="btn" ng-click="closeDialog()">

            Cancel

          </button>

          <button class="btn" ng-click="onConfirm()">

            Yes

          </button>

        </div>

      </div>

    """

    dialogController = ($scope, dialog) ->

      $scope.header = attrs.confirmationDialogHeader

      $scope.onConfirm = ->

        scope.$parent.$eval(scope.confirmationDialogAction).then ->

          dialog.close()

      $scope.closeDialog = ->

        dialog.close()

    dialog = $dialog.dialog

      keyboard: no

      backdropClick: no

      template: dialogTemplate

      controller: dialogController

​

    element.bind 'click', ->

      scope.$apply ->

        dialog.open()

]