title: How to use defined text/ng-template in AngularJS directive
body: <p>I try to write a very flexible directive. For doing so i want the user to define a template used in part of my return (as seen in the <a href="http://angular-ui.github.io/bootstrap/#/typeahead" rel="noreferrer">ui-bootstrap typeahead directive</a>).</p>
  
  <p>So i define my template like this:</p>
  
  <pre><code>&lt;script type="text/ng-template" id="myDirectivesCustomTemplate.html"&gt;
    &lt;ul&gt;
      &lt;li ng-repeat="value in values"&gt;
        &lt;a ng-click="doSomething(value.id)"&gt;
          {{value.name}}
        &lt;/a&gt;
      &lt;/li&gt;
    &lt;/ul&gt;
  &lt;/script&gt;
  </code></pre>
  
  <p>I set this template in my directive</p>
  
  <pre><code>&lt;div 
    my-directive 
    my-directive-custom-template="myDirectivesCustomTemplate.html" 
    my-directive-data="someScopeData"&gt;
  </code></pre>
  
  <p>Now in my directive, how can i render the custom template and use it with the passed data? When i try to use it to return in template directly it throws a <code>ReferenceError: $scope is not defined</code> Error. If i call it without scope, it says <code>ReferenceError: myDirectiveCustomTemplate is not defined</code> Error.</p>
  
  <p>Where and how can i use my template if i do not just want to use it as a return directly?</p>
  
  <p><strong>EDIT: let's say, this is my directive:</strong></p>
  
  <pre><code>(function() {
   'use strict';
   var Combobox = function() {
  
    var displayInputField     = elem.find('input.dropdown');
  
    scope.$watch(scope.nsdComboboxModel,function(newVal){
      /* search for newVal in given data object */
      scope.setDisplayInputValue(newVal);
    });
  
    scope.setDisplayInputValue = function(value)
    {
      displayInputField.val(value);
    };
  
    scope.elementSelected = function (item, model, label) {
      scope.ComboboxCallback(item);
      scope.setDisplayInputValue(label);
    };
   }
  
  
   return {
     restrict: 'A',
     transclude: true,
     scope: {
       Combobox:                  '@', /* used as HTML/CSS-id/name/path */
       ComboboxModel:             '=', /* the actual AngularJS model (ng-model) */
       ComboboxAutocompleteData:  '=', /* the data used for autoComplete (must be array of objects having id and value) */
       ComboboxDropdownData:      '=', /* data used by the dropdown template */
       ComboboxCallback:          '=', /* a callback function called with selected autocomplete data item on select */
       ComboboxLabel:             '@', /* label for the input field */
       ComboboxDropdownTemplate:  '@'  /* label for the input field */
   },
  
   template:
  
    '&lt;section class="-combobox-directive container-fluid"&gt;' +
      '&lt;label for="{{Combobox}}" ng-if="ComboboxTranslation" translate="{{ComboboxLabel}}"&gt;&lt;/label&gt;' +
      '&lt;div class="combobox input-group"&gt;' +
        '&lt;input type="text" ' +
          'id="{{Combobox}}" ' +
          'autocomplete="off" ' +
          'ng-model="ComboboxDestinationDisplay" ' +
          'data-toggle="dropdown" ' +
          'typeahead="value as location.value for location in ComboboxAutocompleteData | filter:$viewValue" ' +
          'typeahead-editable="false" ' +
          'typeahead-on-select="elementSelected($item, $model, $label)" ' +
          'class="form-control dropdown"&gt;' + // dropdown-toggle
  
          '&lt;span data-toggle="dropdown" class="input-group-addon dropdown-toggle"&gt;' +
            '&lt;span class="glyphicon glyphicon-globe"&gt;&lt;/span&gt;' +
          '&lt;/span&gt;' +
  
          //$compile(ComboboxDropdownTemplate) +
  
      '&lt;/div&gt;' +
    '&lt;/section&gt;',
  
    link: link
   };
  };
  
  angular.module('vibe.directives').directive('nsdCombobox', [NsdCombobox]);
  })();
  </code></pre>