AngularJs Directive Template with ng-transclude cannot be compiled

Question

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

The second directive replaces an element for a template which contains the first directive. I use ng-transclude to carry the element's contents over to the template.

The problem is that once the template from directive 2 is added the first directive tries to compile and throws a wobbly:

"TypeError: undefined is not a function"

Directive 1 works fine when ng-transclude is not present in the template. I have created a Plunk to demonstrate this: http://plnkr.co/edit/RdtjIy5XKOsqvh5VnwMr

Is anyone able to help out and point out where I am going wrong?

Thanks, Sam

Answer 1

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

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