There's a solution to tackle this issue rooted in transclusion scope and template scoping. I came across several insightful articles addressing this matter, such as here, here (an excellent resource), and here
In addition, I found a helpful discussion on SO question and answer at the bottom that deserves much credit. I simply adapted it for your situation.
Your inquiry involves using a child scope, but utilizing an isolated scope (which may be more secure) is also possible, and I'll demonstrate how.
Full disclosure: I'm not an AngularJS expert. My response might not be optimal or the most efficient. Your case is quite unconventional, so consider reviewing your approach (or share more details in your question for improved guidance)
Now onto the demonstration...
For testing purposes, I streamlined your demo array, implemented a controller in the parent directive to define said array, and adjusted how my directives are declared.
HTML:
<body ng-app="soPOC">
<div demo-parent>
<div demo-child-one></div>
<div demo-child-two></div>
</div>
Module file defining root module:
(function () {
'use strict';
angular.module('soPOC', []);
})();
Parent directive JS file defining the parent directive:
(function () {
'use strict';
angular.module('soPOC')
.directive('demoParent', demoParent);
demoParent.$inject = ['$compile'];
function demoParent($compile) {
var transclude;
var template = '<div ng-repeat="item in demos"></div>';
var directive = {
restrict: 'EA',
controller: controller,
compile: compile
};
return directive;
function compile(ele) {
transclude = ele.html();
ele.html('');
return function (scope, elem) {
var tpl = angular.element(template);
tpl.append(transclude);
$compile(tpl)(scope);
elem.append(tpl);
}
}
//deviating from your code
controller.$inject = ['$scope'];
function controller($scope) {
//test array for demo items
$scope.demos = ['test1', 'test2'];
}
}
})();
Child directives JS file defining child directives one and two:
(function () {
'use strict';
angular
.module('soPOC')
.directive('demoChildOne', demoChildOne)
.directive('demoChildTwo', demoChildTwo);
function demoChildOne() {
var directive = {
link: link,
scope: true,
restrict: 'EA',
template: '<div>{{someInfo}}</div>'
};
return directive;
function link(scope, element, attrs) {
scope.someInfo = scope.item;
}
}
function demoChildTwo() {
var directive = {
link: link,
scope: true,
restrict: 'EA',
template: '<div>{{someInfo}}</div>'
};
return directive;
function link(scope, element, attrs) {
scope.someInfo = scope.item;
}
}
})();
If you opt for an isolated scope style, you need to adjust your HTML accordingly by removing link functions from the child directives and making small syntax changes in those directives.
HTML:
<div demo-parent>
<div demo-child-one item="item"></div>
<div demo-child-two item="item"></div>
</div>
Directive:
function demoChildOne() {
var directive = {
scope: {
item: '='
},
restrict: 'EA',
template: '<div>{{item}}</div>'
};
return directive;
}
I recommend diving into the linked articles for deeper insights into why this solution works and gaining a better grasp of the scoping challenges with templates, transclusions, and directives.
Hope this helps!