Using $ compile in the AngularJS Triggers directive endless digest error

Question

Any thoughts on why this directive causes an endless digest error?

http://jsfiddle.net/smithkl42/cwrgLd0L/13/

var App = angular.module('prettifyTest', []);
App.controller('myCtrl', function ($scope) {
    $scope.message = 'Hello, world!';
})

App.directive('prettify', ['$compile', function ($compile) {
    var template;
    return {
        restrict: 'E',
        link: function (scope, element, attrs) {
            if (!template) {
                template = element.html();
            }
            scope.$watch(function () {
                var compiled = $compile(template)(scope);
                element.html('');
                element.append(compiled);
                var html = element.html();
                var prettified = prettyPrintOne(html);
                element.html(prettified);
            });
        }
    };
}]);

This seems to be the very first line in the function scope.$watch()that starts updating the model, because when I delete this line, it does not cause an error.

var compiled = $compile(template)(scope);

I'm a little confused why this line launches another $ digest - it doesn't seem to update anything directly in scope.

Is there a better way to accomplish what I'm trying to do, for example, in some other way to check if the key values ​​in the area have really changed, so I can recompile the template? (And is there a better way to grab a pattern?)

Answer 1

scope.$watch() , , . $compile , , , . .

, , , postLink, , - template. $watch() , , - 'message' HTML.