using ng-template with directive

demostrate how to use nested ng-template and directive

HTML

<body ng-app="demo">
  <script type="text/ng-template" id="profile-template.html">
    <div>this is profile-template.html</div>
    <help info="this is directive info"></help>
  </script>
  <div ng-controller="MainCtrl as main">
    <h2>just a demo</h2>
    <div>{{main.hello}}, include template from {{main.template}}</div>
    <hr>
    <div ng-include src="main.template"></div>
  </div>

</body>

JavaScript

angular.module('demo', [])
  .controller('MainCtrl', ['$log', function($log) {
    this.hello = 'This is MainCtrl';
    this.template = 'profile-template.html';

    //construct
    $log.debug('DemoCtrl has been loaded');
  }])
  .directive('help', function() {
    return {
      template: '<div>Help!dfd  {{info}}</div>',
      scope: {
        info: '@info'
      }
    };
  });