Multiple directives - Accessing element from scope method - angularjs

Question

I am trying to create two directives: clonable and removable.
These will show a copy and a remove button and if clicked will be copied and/or removed from dom.
The problem I am facing, if copy it is getting wrong element!
If I copy the div, it actually copies the image!
app.directive('removable', function ($compile) {
return {
restrict: 'A',
link: function ($scope, $element, attrs) {
var removeBtn;
$element.on('mouseenter', function (e) {
e.preventDefault();
console.warn("mouseenter-remove");
console.warn($element)
removeBtn = angular.element("<button ng-click='remove($event)'>Delete</button>");
$element.append(removeBtn);
$compile(removeBtn)($scope);
});
$element.on('mouseleave', function (e) {
e.preventDefault();
console.warn("mouseleave-remove");
console.warn($element)
removeBtn.hide();
});
$scope.remove = function ($event) {
console.warn("remove");
console.warn($element)
$element.hide();
removeBtn.remove();
}
}
};
});
app.directive('clonable', function ($compile) {
return {
restrict: 'A',
link: function ($scope, $element, attrs) {
var copyBtn;
var copyTimeout;
$element.on('mouseenter', function (e) {
console.warn('mouseenter- copy');
console.warn($element);
e.preventDefault();
copyBtn = angular.element("<button ng-click='copy($event)'>Copy</div>");
$element.after(copyBtn);
$compile(copyBtn)($scope);
});
$element.on('mouseleave', function (e) {
console.warn('mouseleave- copy');
console.warn($element);
e.preventDefault();
copyBtn.fadeOut("slow");
});
$scope.copy = function ($event) {
console.warn('copy');
console.warn($element);
$element.after($element.clone());
copyBtn.remove();
}
}
};
});
Here is the jsfiddle. If copy "TEST TEST" it will actually copy the image