Angular: Empty Fiddle

http://angularjs.org/

HTML

<script src="http://code.angularjs.org/angular-1.0.1.js"></script>
<div ng-controller="MyCtrl">
  Hello
    <div ng-test></div>
</div>

JavaScript

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

//myApp.directive('myDirective', function() {});
//myApp.factory('myService', function() {});

function MyCtrl($scope) {
    $scope.name = 'Superhero';
}

myApp.directive("ngTest", ["$compile", function($compile){
    return{
        scope:{}
        , template: "<p ng-if='!!testValue'>test value: <span id='value'>{{testValue|uppercase}}</span><button type='button' ng-click='generateVirtualy()'>test</button></p>"
        , compile: function($element, $attrs){
            var htmlTemplate = $element.html();
            return function($scope, $element, $attrs){
                $scope.testValue="abcd";
                
                // attempt to virtual compile
                $scope.generateVirtualy = function(){
                    var tempScope = $scope.$new(true);
                    tempScope.testValue = "dbca";
                     var elementTemp = $compile(htmlTemplate)(tempScope)
                     alert(elementTemp.html());
                    console.debug(elementTemp.html());
                }
            };
        }
    };
}]);