NgRepeat in compiled $ compiler does not work

Question

I need to dynamically compile html and pass it from a function as text. So, I have this code (simplified version for debugging purpose):

angular.module('app', [])
  .run(function($rootScope, $compile){
    var data = ["1","2"];
    var html  =
        '<div>' +
        '<ul>' +
        '<li ng-repeat="score in data">{{score}}</li>' +
        '</ul>'+
        '</div>';

    var el = angular.element(html);

    $rootScope.data = data;

    var result = $compile(el)($rootScope);

    console.log(result.html());
  })

Result:

<ul><!-- ngRepeat: score in data --></ul> 

So it seems that ngRepeat is not "repeating" the "li" element.

Why?

JsFiddle: http://jsfiddle.net/yoorek/K4Cmk/

(I know that DOM manipulation should be in a directive, etc., and I know how to do it the other way, but I need to understand why this does not work)

Answer 1

If you look at the angular source code, ngRepeat will manipulate the DOM and “repeat” the elements in the $ watchCollection handler:

NgRepeat Link Function

, $watch , $digest . $digest, $watch .

$digest (render), $timeout:

  $timeout(function() {
       console.log(el.html());
      alert(el.html());
  });

-

Answer 2

, $scope. $evalAsync() $timeout. , :
1. http://www.bennadel.com/blog/2605-scope-evalasync-vs-timeout-in-angularjs.htm
2. AngularJS: $evalAsync vs $timeout