Directive with ng-bind-html-unsafe

<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" href="style.css">
    <script data-require="angular.js@1.0.x" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js" data-semver="1.0.7"></script>
    <script src="script.js"></script>
  </head>

    
<body ng-app="sandbox" ng-controller="Ctrl">


<div mydir1></div>

<div mydir2></div>



</html>

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

app.controller("Ctrl", function ($scope, $compile){
        /* UPDATE 
        removed $scope.myTemplate = ... 
        and added the $compile function first.
        Now I'm just getting the object description in the view!
        */
//        $scope.myTemplate = "<button ng-click='sayhello()'>Directive with ng-bind-html-unsafe</button>";

        var tmpl = "<button ng-click='sayhello()'>Directive with ng-bind-html-unsafe</button>";

        $scope.myTemplate = $compile(tmpl)($scope);

        $scope.sayhello = function (){
        alert("Hello World!");
    };
}) ;


app.directive('mydir1', function () {
    var template = "<button ng-click='sayhello()'>Directive with normal template</button>";
    return {
        template: template
    };
});


app.directive('mydir2', function () {
    var template = "<div ng-bind-html-unsafe='myTemplate'></div>";
    return {
        scope: true,
        template: template,
        replace: true
    };
});

/* Styles go here */