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" id="asdf">
        <div compile-before-insert>
            <button  ng-click="clickButton1()">Compile before insert</button>
        </div>
        <div compile-after-insert>
            <button  ng-click="clickButton2()">Compile after insert</button>
        </div>
    <div id="container"></div>
</div>


<script type="text/ng-template" id="template1.html">
    <div>This is template 1!</div>
    <div id="test">Hello {{name}}</div>
</script>

JavaScript

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

myApp.controller('MyCtrl', function($scope) {
    $scope.name = 'Superhero';
    $scope.template = {url:'template1.html'};
    $scope.clickButton1 = function(){
      $scope.$emit('buttonClicked1');  
    };
    $scope.clickButton2 = function(){
      $scope.$emit('buttonClicked2');  
    };
});

myApp.directive('compileBeforeInsert', function($compile, $timeout){
    return function(scope, element, attrs){
        scope.$on('buttonClicked1',function(ev){
            var container = $('#container');
            container.html('<div ng-include src="template.url" id="template">test1</div>');
            $compile(container)(scope);
            console.log('before');
            console.log($('#template').children().text());
            $timeout(function(){
                console.log('before, in timeout:');
            console.log($('#template').children().text());
            },0)
        });
            
    }
});

myApp.directive('compileAfterInsert', function($compile, $timeout){
    return function(scope, element, attrs){
        scope.$on('buttonClicked2',function(ev){
            var container = $('#container');
            container.html($compile('<div ng-include src="template.url" id="template">test2</div>')(scope));
            console.log('after');
            console.log($('#template').children().text());
            $timeout(function(){
                console.log('after, in timeout:');
            console.log($('#template').children().text());
            },0)
        });
            
           
    }
});