I am creating a custom directive as follows:

<directive-a attribute-a="customData" attribute-b="customKey"> <!--Transcluded Content--> </directive-a>

The scenario is as follows:

The directive-a is within the scope of a controllerA . The directive receives the customData(Array of Objects) from controllerA and groups the data in customData based on a particular key provided(customKey) It inserts an ng-repeat dynamically using javascript and transcludes the Transcluded-Content within the ng-repeat using the transcludeFunction and then finally compiles the parent of ng-repeat to display the list.

The Transcluded-Content would act as a template(passed by the user) in which the data would be passed by the directive-a .

The problem being faced is that, when the Transcluded-Content is static, it works properly, but when the Transcluded-Content is a custom-user created directive, then an angular reports the following error

Cannot read property 'X' of undefined.

The reason of this error(I think) is that angular looks for the data of the user passed custom directive in the scope of controllerA and is unable to find it thereby causing the error.

How do I go about this to solve the my issue?

Angular Version : 1.5.8

JSFiddle Snippet