Compiling directive during runtime

[Calvin Park]

I have a UI widget in a directive and it works fine when I instantiate it directly in HTML.

<comp-comments username="Barry Bonds" timestamp="5/24/2016 5:42:05 PM" jscommand="javascript:void(0);" comment="Hello"></comp-comments><br/>

But, when I try to attach them dynamically in runtime, I'm not getting them to display properly.  I have it being created in a DevExpress UI widget and thought that's where the disparity was, but, when I try to append it to a DIV using ID, nothing happens.  

var compComment = angular.element(document.createElement('comp-comment'));

compComment.attr('username', userName);

compComment.attr('timestamp', timeStamp);

compComment.attr('jscommand', jsCommand);

compComment.attr('comment', comment);

$('#commentsScrollViewID').append($compile(compComment)($scope));

Luckily, correct tag gets appended to the DIV, but, it doesn't compile to the proper template - I tried it using compile and link options as well with proper changes in the directive i.e. appending to element instead of returning the markup etc..

app.directive('compComments', function ($compile) {

    return {

        restrict: 'AE',

        replace: true,

        link: function (scope, element, attrs) {

            var compCommentWidget = $('<div>').addClass('compCommentWidget');

            var headerBlock = $('<div>').appendTo(compCommentWidget).addClass('compCommentHeader');

            $('<div>').appendTo(headerBlock).text(attrs.username).addClass('compCommentUserName');

            $('<a>').appendTo(headerBlock).text('[Delete]').attr('href', attrs.jscommand).addClass('compCommentDelete');

            $('<div>').appendTo(headerBlock).text(attrs.timestamp).addClass('compCommentTimeStamp');

            $('<div>').appendTo(compCommentWidget).addClass('compComment').dxTextArea({ readOnly: true, value: attrs.comment }).dxTextArea('instance');

            compCommentWidget = $compile(compCommentWidget)(scope);

            element.after(compCommentWidget);

        }

    };

});

Can someone shed some light on this issue please?  Much appreciated...

[Calvin Park]

I figured it out - ended up using a template and there was a misspelling in the directive's name (forgot the 's'). :