Direktive programmatisch eckig einfügen

Ich möchte also grundsätzlich in der Lage sein, ein Ereignis auszulösen und dann eine Direktive kompilieren zu lassen und sie selbst an einer Position im DOM einzufügen. Derzeit habe ich so etwas

//controller
  angular.module('app').controller('MainCtrl', function ($scope, $compile) {

    $scope.$on('insertItem',function(ev,attrs){
      var el = $compile( "<chart></chart>" )( $scope );
      $scope.insertHere = el;
    });

  });


// directive
 angular.module('app')
  .directive('chart', function () {
    return {
      template: '<div>My chart</div>',
      restrict: 'E',
      link: function postLink(scope, element, attrs) {
        element.text('this is a chart');
      }
    };
  });

Ich kann das Objekt "el" mit allem, was ich brauche, sehen, aber ich kann es nicht in das DOM einfügen ... irgendwelche Hinweise?

Antworten auf die Frage(1)

Ihre Antwort auf die Frage