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: 
It can be achieved by a small directive. Find the answer here [AngularJs how to call prettyprint?](https://stackoverflow.com/questions/18942607/angularjs-how-to-call-prettyprint/22513369#22513369)

I would like to make a small addition to the directive by @carlosmantilla

You can achieve the same thing without creating the scope variable. I have added this correction on github

This should work properly I assume.

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

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

function replaceText(str)
{
    var str1 = String(str);
    return str1.replace(/\n/g,"<br/>");
}

app.directive('prettyprint', function() {
    return {
        restrict: 'C',
        link: function postLink(scope, element, attrs) {
              element.html(prettyPrintOne(replaceText(element.html()),'',true));
        }
    };
});

```
Hard to say, what does prettyPrint() should return ?

It seems quite strange that you don't give any arguments to prettyPrint...

By the way, I think an angular filter would be a better fit for your need instead of a directive.

[EDIT]

This one is working "dynamically" using filter :

**html :**

```
<div ng-app="Knob" ng-controller="myCtrl">
    <!--<input ng-model="text" type="text"/>-->
    <pre ng-bind-html-unsafe="text|pretty"></pre>
</div>

```

**js :**

```
var App = angular.module('Knob', []);
App.controller('myCtrl', function($scope) {
    setTimeout(function() {
        $scope.text = "class Voila {};";
        $scope.$apply();
    }, 0);
});

App.filter('pretty', function(){
    return function(text) {
        return prettyPrintOne(text);
    }
})

```

You can see it at 

<http://jsfiddle.net/cSXpV/1/>

*You can uncomment the input to change directly the text that will be prettyfied*

**Note that this version is for Angular 1.1.1 (the version you choosed in your initial jsfiddle), for Angular 1.2.\*, you have to use ng-bind-html and the ngSanitize module**

Last point : now that it is dynamically prettyfied, the setTimeOut and $scope.$apply can be removed (info for readers)

[/EDIT]