An approach to use jQuery Plugins with AngularJS

http://amitgharat.wordpress.com/2013/02/03/an-approach-to-use-jquery-plugins-with-angularjs/

HTML

<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.6/angular.js"></script>
<script src="https://google-code-prettify.googlecode.com/svn/loader/prettify.js"></script>
<script src="https://google-code-prettify.googlecode.com/svn/loader/run_prettify.js"></script>
<div ng-app="prettifyTest" ng-controller="myCtrl">
    <div>       
        <input type="text" ng-model="organization.message" />
    </div>
    <prettify target="organization"><pre><code class="prettyprint">console.log('{{target.message}}');
            </code>
        </pre>
    </prettify>
</div>

JavaScript

var App = angular.module('prettifyTest', []);
App.controller('myCtrl', function ($scope) {
    $scope.organization = {
        message: '<a>d</a>'
    };
});

App.directive('prettify', ['$compile', '$timeout', function ($compile, $timeout) {
    return {
        restrict: 'E',
        scope: {
            target: '='
        },
        link: function (scope, element, attrs) {
            var template = element.html();
            var templateFn = $compile(template);
            var update = function(){
                $timeout(function () {
                    var compiled = templateFn(scope).html();
                    var prettified = prettyPrintOne(compiled);
                    element.html(prettified);
                }, 0);
            }
            scope.$watch('target', function () {
                update();
            }, true);
            update();
        }
    };
}]);