How to create a <<hold to confirm >> button - angularjs

Question

How would someone go about making a hold to confirm button similar to what designmodo uses?
I have a working version using jQuery but am at a loss how to incorporate this into Angular. Is this something possible with ngAnimate?
jsfiddle css:
path {
stroke-dasharray: 119;
stroke-dashoffset: 119;
}
.draw {
-webkit-animation: dash 3s ease forwards;
}
#-webkit-keyframes dash {
to {
stroke-dashoffset: 0;
}
}
jsfiddle js:
$('.delete-icon').mousedown(function() {
$('path').attr('class', 'draw');
});
$('.delete-icon').mouseup(function() {
$('path').attr('class', 'progress');
});
$("path").bind("animationend webkitAnimationEnd oAnimationEnd MSAnimationEnd", function(){
console.log('callback');
$('.delete-icon').hide();
});

Answer 1

So figured out how to do this thought I'd leave an answer in case anyone else comes across this.
Big thing was figuring out how to use jQuery to make the callback when the animation completes. There might be a way to do this with Angular but the only callbacks I could find are when the class was added/removed which is not what I needed.
http://plnkr.co/edit/Lafds0KA04mcrolR9mHg?p=preview
var app = angular.module("app", ["ngAnimate"]);
app.controller("AppCtrl", function() {
this.isHidden = false;
this.deleteIt = function() {
this.isHidden = !this.isHidden;
}
app.hidden = false;
});
app.directive("hideMe", function($animate) {
return function(scope, element, attrs) {
scope.$watch(attrs.hideMe, function(newVal) {
if(newVal) {
$animate.addClass(element, "draw");
} else {
$animate.removeClass(element, "draw");
}
});
}
});
app.animation(".draw", function() {
return {
addClass: function(element, className, done) {
//
jQuery(element).animate({
"stroke-dashoffset": 0
}, 3000, "easeOutCubic", function() {
console.log(app.hidden);
});
return function(cancel) {
if(cancel) {
jQuery(element).stop();
}
}
},
removeClass: function(element, className, done) {
//
jQuery(element).animate({
"stroke-dashoffset": 119
}, 350, "linear", function() {
console.log('canceled');
});
return function(cancel) {
jQuery(element).stop();
}
}
}
});

Answer 2

Ok I have a refined answer for this. View here
I dropped using animation and jQuery for two reasons:
I could not figure out how to get jQuery done to callback to
scope.
The jQuery done callback only executed on mouseup after
the animation had completed.
There are probably ways to bypass these but I couldn't figure it out.
Instead I used the angular specific animation classes that will trigger a promise on animation completion. Specifically:
.line.draw {
-webkit-animation: dash 3s ease forwards;
}
.line.draw-add {
}
.line.draw-add-active {
}
#-webkit-keyframes dash {
to {
stroke-dashoffset: 0;
}
}
I didn't need to use .line but kept it in there because lazy.
I also used isolating scope to reference the scope in the controller:
scope: {
'myAnimate': '=',
'deleteTodo': '&'
},
I think that is all the tricky parts to this solution. If anyone has any questions feel free to ask.