javascript - Angular directive inside ng-template with modal -

i curious way angular works preloading directives since have problem directive resides in <script> tag , ng-template.

when pause execution in chrome dev-tools, during initial document load, can see code inside directive's controller not called if directive lies in arbitrary template. here example code, when e.g. mydirective included in index.html part of mymodule.js module, included both in index , in main app module:

this other directive's html containing problematic mydirective

<script type="text/ng-template" id="callthis">   <mydirective></mydirective> </script>` 

and call on click ngdialog

ngdialog.open({   template: 'callthis',   scope: $scope });  

and can't run directive since doesn't have html work (thats error, html element missing).

finally here code module holds mydirective

angular.module('mymodule', ['mydirectivetemplates', 'mydirectivedirective']) angular.module('mydirectivetemplates', []).run(["$templatecache", function($templatecache) {$templatecache.put("mydirectivetemplate.html","<h1></h1>");}]); angular.module('mydirectivedirective', []).directive('mydirective', function ($window, $templatecache) {   return {     restrict: 'e',      template: $templatecache.get('mydirectivetemplate.html'),     controller: function($scope) {       //some arbitrary code     }   }; }) 

interestingly if put <my-directive></my-directive> right in index.html file works ok, , code inside controller gets loaded on startup. i'm unsure how solve this.

from understand of problem need use $compile service. there tutorial here might : $compile

the reason given in tutorial is:

"the newly minted template has not been endued angularjs powers yet. use $compile service..."

and quoted angular docs:

compiles piece of html string or dom template , produces template function, can used link scope , template together.

here brief code example per tutorial :

app.directive('contentitem', function ($compile) {     /* edited brevity */      var linker = function(scope, element, attrs) {         scope.rootdirectory = 'images/';          element.html(gettemplate(scope.content.content_type)).show();          $compile(element.contents())(scope);     }      /* edited brevity */ });