Angular.js $compile returns array of html but not actual html

Question

I have the following code:

app.directive('mySample', function($compile) {
    return {
        //template:"<input type='text' ng=model='sampleData'/> {{sampleData}} <br/>"
        link: function(scope, element, atts, controller) {
            var markup = "<input type='text' ng=model='sampleData'/> {{sampleData}} <br/>";  
            angular.element(element).html($compile(markup)(scope));
            console.log($compile(markup)(scope));
        }
    };
});

And I would expect it to generate an input, some span that's coupled via the scope and a break. However I get this output:

[[object HTMLInputElement], [object HTMLSpanElement], [object HTMLBRElement]]

I also tried the template, in comment here, separately and then commenting out the link part. That generates the input and break elements but not the span that shows the coupled model input sampleData.

I have a non-working sample at http://jsfiddle.net/KvdM/nwbsT/ that demonstrates it.

Answer 1

Try this:

element.html(markup);
$compile(element.contents())(scope);

Answer 2

Running the function returned by the $compile service gives you DOM elements rather than html. So you need to insert them into your page using append (or equivalent):

angular.element(element).append($compile(markup)(scope));