Ng-repeat does not load data after html compilation

Question

I have a directive that copies the html bit, which includes a controller and ng-repeat. I compile html and paste it into dom. I see that the new html picks up the area of ​​the just-compiled controller, but ng-repeat does not work if the data is loaded async.

I created a http://plnkr.co/edit/jCjW26PCwlmKVTohja0s?p=preview plunker that shows the problem I am having.

index.html

<div class="parent-div">
    <div class="put-compiled-data-in-here" compile-html>
        <!-- copied html goes in here -->
    </div>
    <div ng-controller="CopiedController" class="copy blue">
        <h1>{{name}}</h1>
        <div ng-repeat="p in projects">
            <h1>{{p.name}}</h1>
        </div>
    </div>
</div>

controller

app.controller('CopiedController', function($scope, slowService){
   $scope.projects = slowService.loadSlowData();
   $scope.name = "Inside Copied Controller";
 }); 

A directive that copies and compiles html

app.directive('compileHtml', function ($compile, $rootScope, $parse) {
    return {
        restrict: 'A',
        link: function (scope, ele, attrs) {
            var html = jQuery('.copy').clone().removeClass('.blue').addClass('.pink');
            var el = angular.element(html);
            ele.append(el);
            $compile(ele.contents())(scope);
        }
     };
});

Slow service (aka ajax):

app.service('slowService', function($timeout) {
    this.loadSlowData = function() {
        return $timeout(function() {
          return [{name:"Part 2a"},
                 {name:"Part 2b" } ]
          }, 300);
     };    
});

Any help would be greatly appreciated.

Answer 1

Check

    http://plnkr.co/edit/l7o5EFC3863ZI4cxvuos?p=preview

    <div ng-controller="CopiedController" class="put-compiled-data-in-here" compile-html>




    app.directive('compileHtml', function($compile, $rootScope, $parse) {
        return {
            template: $('.copy').html(),
            restrict: 'A',
            link: function(scope, ele, attrs) {
                // var html = jQuery('.copy').clone().removeClass('.blue').addClass('.pink');
                // var el = angular.element(html);
                // ele.append(el);
                // $compile(ele.contents())(scope);
                ele.removeClass('blue').addClass('pink');
            }
        };
    });

Answer 2

, '.' removeClass addClass

var html = jQuery('.copy').clone().removeClass('blue').addClass('pink');