<!DOCTYPE html>
<html ng-app="app">

  <head>
    <script data-require="angular.js@1.4.9" data-semver="1.4.9" src="https://code.angularjs.org/1.4.9/angular.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="//cdn.jsdelivr.net/alertifyjs/1.6.1/alertify.min.js"></script>
    <script src="script.js"></script>
  </head>

  <body>
    <button cancel-item="1">Open Prompt</button>
  </body>

</html>
// Code goes here


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

app
.directive('cancelItem', ['$rootScope', '$compile',
function ($rootScope, $compile) {
  return {
    restrict: 'A',
    link: function (scope, element, attrs) {
      
      var item_id = attrs.cancelItem;
      var templateElement = '<p>Are you sure you wish to CANCEL the item ' + item_id + '?</p>' +
        '<select class="ajs-input" ng-model="reason">' + 
        '<option ng-value="Reason 1">Option one</option>' + 
        '<option ng-value="Reason 2">Option two</option>' + 
        '<option ng-value="Reason 3">Option three</option>' + 
        '</select>' + 
        '<input class="ajs-input" type="text" ng-bind="reason">';
        
      scope.reason = '';
      
      element.bind('click', function (event) {
        event.stopPropagation();

        alertify.prompt(
          function (e, reason) {
            if (reason === '') { 
              e.cancel = true;
            } else {
              alertify.message('Done!');
            }
          },
          function () {
            return;
          }
        )
        .setContent(
          '<div id="alertify"><p>Are you sure you wish to CANCEL the item ' + item_id + '?</p>' +
          '<select class="ajs-input" ng-model="reason">' + 
          '<option ng-value="Reason 1">Option one</option>' + 
          '<option ng-value="Reason 2">Option two</option>' + 
          '<option ng-value="Reason 3">Option three</option>' + 
          '</select>' + 
          '<input class="ajs-input" type="text" ng-bind="reason"></div>'
        );
      });

      $compile(angular.element(".alertify").html())(scope);

      scope.$on('$destroy', function() {
        element.unbind();
      });
    }
  };
}]);


/* Styles go here */