ng-repeat doesn't render (unless any scope variable changes)

Question

I'm running into a very frustrating problem that I can't figure out and I don't know enough to debug it myself.

Basically, I have an extremely simple directive that prints "1,2,3" using an ng-repeat:

myApp.directive('foo', ['$compile', function($compile) {
    return {
        restrict: 'A',
        link: function (scope, element, attrs) {
              var template = '<ul><li ng-repeat="node in [1,2,3]">{{node}}</li></ul>';

              //Render template
              angular.element(document).ready(function() {
                element.html('').append($compile(template)(scope));
              });
         }
    }
}]);

This directive works in almost every situation, except when refreshing the page into a ui-router state. It works if I transition to a state containing the directive from another state, but not if I simply load the page into that state.

Here's the curious thing. It will magically start working if I just modify any scope variable (doesn't matter which one). Here is a fiddle I created that demonstrates the problem.

http://jsfiddle.net/789Ks/247/

Is this a ui-router bug? Am I just not understanding something?

Answer 1

Try running scope.$apply after appending the template:

angular.element(document).ready(function() {
    element.html('').append($compile(template)(scope));
    scope.$apply();
});