Angular ui modal "are you sure"

angular.module('plunker', ['ui.bootstrap']);

var ModalDemoCtrl = function($scope, $modal) {

  $scope.items = ['item1', 'item2', 'item3'];

  $scope.askDelete = function(item) {
    var message = "Are you sure ?";

    var modalHtml = '<div class="modal-body">' + message + '</div>';
    modalHtml += '<div class="modal-footer"><button class="btn btn-primary" ng-click="ok()">OK</button><button class="btn btn-warning" ng-click="cancel()">Cancel</button></div>';

    var modalInstance = $modal.open({
      template: modalHtml,
      controller: ModalInstanceCtrl
    });

    modalInstance.result.then(function() {
      reallyDelete(item);
    });
  };

  var reallyDelete = function(item) {
    $scope.items = window._.remove($scope.items, function(elem) {
      return elem != item;
    });
  };
};

var ModalInstanceCtrl = function($scope, $modalInstance) {
  $scope.ok = function() {
    $modalInstance.close();
  };

  $scope.cancel = function() {
    $modalInstance.dismiss('cancel');
  };
};

<!doctype html>
<html ng-app="plunker">
  <head>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.8/angular.js"></script>
    <script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.10.0.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.min.js"></script>
    <script src="app.js"></script>
    <link href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
  </head>
  <body>

<div ng-controller="ModalDemoCtrl">
            <ul>
                <li ng-repeat="item in items">
                    {{ item }} <a ng-click="askDelete(item)">Delete</a>
                </li>
            </ul>
</div>
  </body>
</html>

/* Put your css in here */