Angular: Empty Fiddle

http://angularjs.org/

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
<div ng-controller="MyCtrl">
    <div ng-view></div>
</div>


<script type="text/ng-template" id="template1.html">
    <render-thingy ng-repeat="thingy in thingies" content="thingy"></render-thingy>
</script>

<!-- this template can potentially be more complex,
and point to its own controller, etc -->
<script type="text/ng-template" id="template2.html">
    <div>(we just told you the name)</div>
</script>

<script type="text/ng-template" id="home.html">
    <div>Home!</div>
</script>

JavaScript

var myApp = angular.module('myApp', []);

myApp.config(['$routeProvider', function($routeProvider) {
    $routeProvider.when('/', {templateUrl: 'template1.html', controller: 'MyCtrl'});
    $routeProvider.otherwise({templateUrl: 'home.html', controller: 'HomeCtrl'});
}]);

myApp.controller('MyCtrl', function($scope) {
    $scope.thingies = [
        { name : "foo" },
        { name : "bar" },
        { name : "baz" }
    ];
});

myApp.directive('renderThingy', function($compile){
    var linker = function(scope, element, attrs) {
        element.html('<span>The name is ' + scope.content.name + '!</span><div ng-include src=" \'home.html\'"></div><br>');
        $compile(element.contents())(scope);
    };
    return {
        restrict: "E",
        rep1ace: true,
        link: linker,
        scope: {
            content:'='
        }
    };
});

myApp.controller('HomeCtrl', function($scope) {});