javascript - AngularJS : ngRepeat in Directive with transcluded content -

i trying pass array of objects directive, use ngrepeat inside of directive output passed items in transcluded html. same issue discussed here.

i tried different ways, using compile , link function guess can't wrap mind around scoping. suggested solution petebacondarwin - here work, need (want) pass array directive.

here current version - plunker

directive

(function() {   "use strict";    function mydirective() {     return {       restrict: "e",       scope: {         items: "="       },       link: function link(scope, element, attrs) {         var children = element.children();          var template = angular.element('<div class="item" ng-repeat="item in items"></div>');         template.append(children);          var wrapper = angular.element('<div class="list"></div>');         wrapper.append(template);          element.html('');         element.append(wrapper);       }     };   }    angular     .module("app.mydirective", [])     .directive("mydirective", [mydirective]);  }()); 

html

<my-directive items="main.items">   <h1>{{item.title}}</h1>   <p>{{item.content}}</p> </my-directive> 

thanks

the code inside directive not compilated , not "visible" angular. caused fact code not transcluded, it's removed , replaced in directive.

in order "make visible" angular, should add line of code @ end of link:

$compile(wrapper)(scope); 

this take new code wrapper, compiles , link scope

updated plunkr:

http://plnkr.co/edit/9w7m4m4uo0bshokz9urr?p=preview