How to repeat and render array of custom directive in another custom directive?

Question

I have three custom directive child1, child2, child3 and I want to repeat from contoller in ng-repeat using another custom directive.

Answer 1

Take array in the controller and create a parent custom directive and pass each array element to parent directive and then in parent directive just compile with $compile and append to DOM.

Controller:

$scope.directiveArray=['child1','child2','child3'];

Parent directive:

angular.module('myApp').directive('parentDirective',function($compile){
   return {
            restrict:'AE',
            replace:true,
            link:function(scope,element,attribute){<br>
            var html=$compile("<"+attribute.childelem+"></"+attribute.childelem+">")(scope);
            element.append(html);
         }
       }
    });

Other Three directives:

angular.module('myApp').directive('child1',function(){
  return {
           restrict:'AE',
           template:'<h1>this is Child 1'
         }
    });

angular.module('myApp').directive('child2',function(){
  return {
           restrict:'AE',
           template:'<h1>this is Child 2'
         }
    });
angular.module('myApp').directive('child3',function(){
  return {
           restrict:'AE',
           template:'<h1>this is Child 3'
         }
       });

HTML:

<div ng-repeat="elem in directiveArray">
    <parent-directive childelem="{{elem}}"><parent-directive>
</div>