AngularJs directive template with ng-transclude cannot be compiled

Question

I am trying to create two directives. The first directive adds other predefined angular directives (ng-click and ng-class) to this element, and then compiles them so that they work.

The second directive replaces the element for the template that contains the first directive. I use ng-transclude to transfer the contents of an element to a template.

The problem is that after adding the template from directive 2, the first directive tries to compile and throws shaky:

"TypeError: undefined is not a function"

Directive 1 works fine when ng-transclude is missing from the template. I created Plunk to demonstrate this: http://plnkr.co/edit/RdtjIy5XKOsqvh5VnwMr

Can anyone help and point out where I am going wrong?

Thanks Sam

Answer 1

After further trial and error, I found a fix and, as far as I can tell, there are no side effects.

I just remove the ng-transclude attribute from the second directive. I have an updated Plunk here: http://plnkr.co/edit/9QXkqzzyUy9VvMYC6fO6