Custom Directive Element Not Parsed

I have a custom directive that I have created. I have also bound that custom directive to a click event and also applied some css to the html template. However I am parsing it with a filter that uses sce.trustAsHTML.

The problem is it does not parse it as the element but as a string and the click event is not registered as well as the styles not being applied. Anyone faced this before?

could you open a codepan with your code .