Drag'n'drop dataTransfer.getData empty

I'm trying to get drag'n'drop to work, but I seem to be completely missing how the getData/setData works.

I'm using this code (http://ift.tt/1vol80e)

var el = angular.element(document.getElementById('drag'));
el.attr("draggable", "true");
el.bind("dragstart", function(e) {
    e.dataTransfer.setData('text', 'Where have you gone?!?!')         
});

var target = angular.element(document.getElementById('drop'));
target.bind("dragover", function(e) {
    if (e.preventDefault) {
        e.preventDefault(); // Necessary. Allows us to drop.
    }
    return false;
});

target.bind("dragenter", function(e) {
    console.debug(e.dataTransfer.types);
    console.debug(e.dataTransfer.getData('text'));
});

I'm using AngularJS here because this is a snippet of a much larger piece of code.

For some reason when dragging the top square on the bottom square, the value of getData('text') is always empty, but I have no idea why...

Any ideas?

Thanks in advance.