Question: I'm trying to prettify some text that is generated dynamically. 

```
<div ng-app="Knob" ng-controller="myCtrl">
    <pre class="prettyprint">{{text}}</pre>
</div>

var App = angular.module('Knob', []);
App.controller('myCtrl', function($scope) {
   $scope.text = "hello world";
})

App.directive('prettyprint', function() {
    return {
        restrict: 'C',
        link: function postLink(scope, element, attrs) {
              prettyPrint();
        }
    };
});

```

The output:

```
hello worldtext}}

```

Any ideas why?

<http://jsfiddle.net/yAv4f/62/>

Answer: 
this is a late reply and im sure that you have solved the problem. However there may be some other people stumbling upon this thread with the same problem. I solved this using and adapted version of google-code prettify, which can be found here: <https://github.com/angular/code.angularjs.org/tree/master/1.3.0-beta.3/docs/components/google-code-prettify-1.0.1>
Simply follow the instructions on that page.

Now, prettifyPrint() can be called globally.

```
(function(){
    $('pre').addClass('prettyprint');
    prettyPrint();
})();

```

I placed this at the bottom of my dynamic template
I don't know why, but I find out if you delay 300ms to execute the `prettyprint` function, it works well. see below:

```
var App = angular.module('Knob', []);
App.controller('myCtrl', function($scope) {
   $scope.text = "hello world";
})

App.directive('prettyprint', function() {
    return {
        restrict: 'C',
        link: function postLink(scope, element, attrs) {
              setTimeout(prettyPrint,300);
        }
    };
});

```