Embedding a custom angular directive in a cell/td

[Martin Sher]

I want to embed a custom directive in a cell to effectively change the behaviour of the cell.

I have tried 

   function htmlRenderer(instance, td, row, col, prop, value, cellProperties) {

            Handsontable.renderers.HtmlRenderer.apply(this, arguments);

      

    }

   Handsontable.renderers.registerRenderer('htmlRenderer', htmlRenderer);

where value = "<my-directive></my-directive>"

and the html for myDirective is 

<div>hi</div>

The directive code has 

 replace: true,

When I inspect the element I have td.innerHtml = "<my-directive></my-directive>" and not <div>hi</div>

How can I change a table td element to use a custom directive.

Thanks

Martin