JSFiddle - React, Tailwind, and code Playground

HTML

<div ng:app="test">
 <div ng-controller="Ctrl2">
     <my-directive></my-directive>
 </div>
</div>
<span style="color: red" id="output">Out</span>

CSS

</style><script src="http://docs-next.angularjs.org/angular-1.4.8.min.js"></script>
<style>

JavaScript

function Ctrl2($scope) {
    $scope.resources = [{
        name: 'alice'},
    {
        name: 'bob'},
    {
        name: 'charlie'}];
}
angular.module('test', []).directive("myDirective", function($q) {
    return {
        restrict: 'E',
        replace: true,
        scope: true,
        template: '<ul><li ng-repeat="res in resources">{{res.name}}</li></ul>',

        link: function(scope, element, attr, conts) {
            $q.defer(function() {
                var o = $(element).html();
                $('#output').html(o.replace(/</, "&lt;").replace(/>/, "&gt;"));
            });
        }
    };
});