angularjs - プログラムでディレクティブを挿入する

Question

したがって、基本的には、イベントをトリガーしてから、ディレクティブをコンパイルして、その自己を DOM 内の位置に挿入できるようにしたいと考えています。現在、私はこのようなものを持っています

//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');
      }
    };
  });

オブジェクト「el」には必要なものがすべて表示されていますが、それを DOM に挿入することはできません... 手がかりはありますか?