If you don't mind not using ng-click, it works OK. You can just rename it to something else and still read the attribute, while avoiding the click handler being triggered twice problem there is at the moment.

http://plnkr.co/edit/YWr6o2?p=preview

I think the problem is terminal instructs other directives not to run. Data-binding with {{ }} is just an alias for the ng-bind directive, which is presumably cancelled by terminal.

A clean directive approach.

Update: Old Answer (2014)

It basically intercepts the ng-click event, displays the message contained in the ng-confirm-click="message" directive and asks the user to confirm. If confirm is clicked the normal ng-click executes, if not the script terminates and ng-click is not run.

<!-- index.html --><button ng-click="publish()" ng-confirm-click="You are about to overwrite your PUBLISHED content!! Are you SURE you want to publish?">  Publish</button>

// /app/directives/ng-confirm-click.jsDirectives.directive('ngConfirmClick', [  function(){    return {      priority: -1,      restrict: 'A',      link: function(scope, element, attrs){        element.bind('click', function(e){          var message = attrs.ngConfirmClick;          // confirm() requires jQuery          if(message && !confirm(message)){            e.stopImmediatePropagation();            e.preventDefault();          }        });      }    }  }]);

Code credit to Zach Snow: http://zachsnow.com/#!/blog/2013/confirming-ng-click/

Update: New Answer (2016)

1) Changed prefix from 'ng' to 'mw' as the former ('ng') is reserved for native angular directives.

2) Modified directive to pass a function and message instead of intercepting ng-click event.

3) Added default "Are you sure?" message in the case that a custom message is not provided to mw-confirm-click-message="".

<!-- index.html --><button mw-confirm-click="publish()" mw-confirm-click-message="You are about to overwrite your PUBLISHED content!! Are you SURE you want to publish?">  Publish</button>

// /app/directives/mw-confirm-click.js"use strict";var module = angular.module( "myApp" );module.directive( "mwConfirmClick", [  function( ) {    return {      priority: -1,      restrict: 'A',      scope: { confirmFunction: "&mwConfirmClick" },      link: function( scope, element, attrs ){        element.bind( 'click', function( e ){          // message defaults to "Are you sure?"          var message = attrs.mwConfirmClickMessage ? attrs.mwConfirmClickMessage : "Are you sure?";          // confirm() requires jQuery          if( confirm( message ) ) {            scope.confirmFunction();          }        });      }    }  }]);

For me, https://www.w3schools.com/js/js_popup.asp, the default confirmation dialog box of the browser worked a great deal. just tried out this:

$scope.delete = function() {    if (confirm("sure to delete")) {        // todo code for deletion    }};

Simple.. :)
But I think you can't customize it. It will appear with "Cancel" or "Ok" button.

EDIT:

In case you are using ionic framework, you need to use the ionicPopup dialog as in:

// A confirm dialog$scope.showConfirm = function() {   var confirmPopup = $ionicPopup.confirm({     title: 'Delete',     template: 'Are you sure you want to delete this item?'   });   confirmPopup.then(function(res) {     if(res) {       // Code to be executed on pressing ok or positive response       // Something like remove item from list     } else {       // Code to be executed on pressing cancel or negative response     }   }); };

For more details, refer: $ionicPopup