AngularJS Confirm Dialog answer for SO http://stackoverflow.com/questions/17025321/angularjs-why-and-when-calling-timeout-is-required

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.5/angular.min.js"></script>
<script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.3.0.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<link href="http://twitter.github.io/bootstrap/assets/css/bootstrap.css" rel="stylesheet" type="text/css" />
<link href="http://twitter.github.io/bootstrap/assets/css/bootstrap-responsive.css" rel="stylesheet" type="text/css" />
<script src="http://twitter.github.io/bootstrap/assets/js/bootstrap.js"></script>
<script src="script.js"></script>
<meta charset=utf-8 />

</head>
<body ng-app="myApp" ng-controller="AppCtrl"> 
      <div class="btn-group">
        <button type="button" class="btn" ng-model="useTimeout" btn-radio="true">Timeout</button>
        <button type="button" class="btn" ng-model="useTimeout" btn-radio="false">No Timeout</button>
    </div>
      <button type="button" class="btn" ng-click="reset();">Reset Data</button>
  <ul>
    <li ng-repeat="item in items">
      {{item}}
      <button class="btn btn-mini" confirmation-dialog="{header: 'Delete Item', confirm: deleteItem}">Delete</button>
    </li> 
  </ul>
</body>
</html>

var app;

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

app.controller('AppCtrl', function($scope, $q, $timeout) {
    $scope.useTimeout = false;
    
    $scope.reset = function(){
      $scope.items = ['Item 1', 'Item 2'];
    };
    
    $scope.reset();
    $scope.deleteItem = function(index) {
      var deferred = $q.defer();
      var remove = function(){
        $scope.items.splice(index, 1);
        deferred.resolve();
      }
      if ($scope.useTimeout) {
        $timeout(remove, 1000);
      }
      else {
        remove();
      }

      return deferred.promise;
    };
  }
);

app.directive('confirmationDialog', [
  '$compile', '$q', '$dialog', function($compile, $q, $dialog) {

    return {
      restrict: 'A',
      link: function(scope, element, attrs) {
        var options = scope.$eval(attrs.confirmationDialog);
         
        var dialogController = function($scope, dialog) {
          $scope.header = options.header;
          $scope.onConfirm = function() {
            options.confirm($scope.$index).then(function() {
              dialog.close();
            });
          };
          
          $scope.cancel = function(){
            dialog.close();
          };
        };
        
        var dialogTemplate = "<div> \n  <div class=\"modal-header\">\n    <h4>{{header}}</h4>\n  </div>\n  <div class=\"modal-body\">\n    Are you sure?\n  </div>\n  <div class=\"modal-footer\">\n    <button class=\"btn\" ng-click=\"cancel()\">\n      Cancel\n    </button>\n    <button class=\"btn\" ng-click=\"onConfirm()\">\n      Yes\n    </button>\n  </div>\n</div>";
        var dialog = $dialog.dialog({      
          backdrop: true,
          keyboard: true,
          backdropClick: true,
          template: dialogTemplate,
          controller: dialogController
        });

        $(element).click(function(){
          scope.$apply(function(){
            dialog.open();
          });
        });
      }
    };
  }
]);

/* Styles go here */