ngRepeat in compiled by $compile does not work
angularjs
Solution
If you look at the angular source code, ngRepeat will manipulate the DOM and "repeat" the elements within the $watchCollection handler:
ngRepeat Link Function
When you manually compile and link the element from the run block, the $watch handlers for your element have been set up but the $digest phase has not happened yet. It is the $digest phase where the scope examines all of the $watch expressions and executes their corresponding watch handlers.
If you want to inspect the element after the $digest (render) phase you can use $timeout:
$timeout(function() {
console.log(el.html());
alert(el.html());
});
Demo Fiddle
Problem
I need to dynamically compile html and pass it from 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()); }) ``` The result is only: ``` <ul><!-- ngRepeat: score in data --></ul> ``` So, it looks like ngRepeat does not "repeat" "li" element. Why? JsFiddle: http://jsfiddle.net/yoorek/K4Cmk/ (I know DOM manipulation should be in directive etc. and I know how to do it other way but I need to understand why this does not work)