dynamically adding angularjs directives

I'm trying to write a directive that dynamically adds directives of another type to the DOM and compile them. It seems to work when using a string template, but fails when using templateUrl. Here's a jsfiddle of the working template string:

app.directive('clicker', function($compile) {
    'use strict';

    return {
        compile: function(tElement, tAttrs) {
            var t = '<div data-pop>Pop</div>';

            return function(scope, iElement) {
                iElement.click(function() {
                    $('body').append($compile(t)(scope));
                });
            };
        }
    }
});

app.directive('pop', function() {
    'use strict';

    return {
        template: '<div>Testing template</div>'
        //templateUrl: 'partials/pop.html'
    };
});

http://jsfiddle.net/89AYX/

But if swapped to templateUrl (with an html file containing exactly what's in the template string) it will only work once. It does add an element to the DOM but it does not contain the templateUrl contents nor does it call the linking function in the dynamically added directive ...

Trying to add two of them will make the DOM look something like:

<div data-pop><!-- content of pop.html --></div>
<div data-pop></div>
<div data-pop></div>