angular directive doesnt render the template, after adding html dynamically in controller

问题

My problem is that my directive doesnt show the template. I added a html tag with specific name in my controller to the dom via "$sce.trustAsHtml(taskDirective)" and "$compile(taskDirective)($scope)". The controller-function inside the directive is called. But the template is not showing up.

Im using the $stateProvider, which calls the "TaskDetailCtrl" with the certain HTML.

Anybody can help?

Thank you!+

Controller:

app.controller("TaskDetailCtrl", function ($scope, $state, $stateParams, $sce, $compile) {

    cur_task = $stateParams.newTask;
    $scope.title = cur_task.title;
    var taskDirective = "<" + cur_task.type + "taskdirective" + "></" + cur_task.type + "taskdirective" + ">";
    $scope.showTask = $sce.trustAsHtml(taskDirective);
    $compile(taskDirective)($scope);

});

Directive:

app.directive('clicktaskdirective', function () {
    return {
        restrict: 'E',
        template: '<ion-content style="padding: 20px;" class="text-center"><br><br><h1>{{taskTitle}}</h1><br><br><h4>{{taskText}}</h4><br><br><button class="button button-block button-stable" ng-click="start()">Stimmt!</button></ion-content>', 
        controller: function ($scope, $state, $stateParams) {

            console.log("This is showing up!")
        }
    }
});

HTML: