title: AngularJS Directive template not displaying HTML
body: <p>I have a fiddle at <a href="http://jsfiddle.net/skwidgets/w2X9m/3/" rel="nofollow">http://jsfiddle.net/skwidgets/w2X9m/3/</a> to build out a group of check boxes.  It works just as desired in the prototype and I can even include more then one group and they run independently.  As I was satisfied I add the code to the app that I am building and the html in the template: '&lt;>' of the directive does not appear.  the model data that is in the handle bars in the template does how ever.  I cannot seam to figure out why as there are not errors.</p>
  
  <p>I also have this plunker that shows the code working
  <a href="http://plnkr.co/edit/JE5dRDU4VyGd0UAbCtNu?p=preview" rel="nofollow">http://plnkr.co/edit/JE5dRDU4VyGd0UAbCtNu?p=preview</a></p>
  
  <pre><code>&lt;div class="sqs" &gt;
          &lt;pre&gt;
              {{survey | json}}
          &lt;/pre&gt;
  
          &lt;suvey-checkbox ng-model="Q1" ng-init="surveyQuestions = [
                  { 'value':'value1', 'name': 'The unit' }, 
                  { 'value': 'value2', 'name': 'Patient Threw Up'}, 
                  { 'value':'value3', 'name': 'Unsafe for children' }, 
                  { 'value':'value4', 'name': 'Actively dying, reached life goal'}]"&gt;
          &lt;/suvey-checkbox&gt;
  
          &lt;suvey-checkbox ng-model="Q2" ng-init="surveyQuestions = [
                  { 'value':'value1', 'name': 'The unit' }, 
                  { 'value': 'value2', 'name': 'Patient Threw Up'}, 
                  { 'value':'value3', 'name': 'Unsafe for children' }, 
                  { 'value':'value4', 'name': 'Actively dying, reached life goal'}]"&gt;
          &lt;/suvey-checkbox&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>And</p>
  
  <pre><code>var app = angular.module("app", []);
  app.run(function($rootScope){
  $rootScope.survey = [];
  });
  
  app.directive('suveyCheckbox', function ($rootScope) {
  return {
      restrict: 'E',
      require: '^ngModel',
      scope: {
          ngModel: '@'
      },
      template: '{{ngModel}}&lt;br /&gt;&lt;label ng-repeat="surveyQuestion in      surveyQuestions" class="checkbox"&gt;' +
                  '&lt;input data-role="none" type="checkbox" name="selectedExclusion[]" value="{{surveyQuestion.value}}"' + 
                  'ng-checked="surveyAnswers.indexOf(surveyQuestion.value) &gt; -1" ng-click="togglesurveyAnswers(surveyQuestion.value)"&gt; ' +
                  '{{surveyQuestion.name}} &lt;br /&gt;&lt;/label&gt;{{surveyAnswers}}',
      link: function (scope, elem, attr) {
          // selected exclusion
          scope.surveyAnswers = [];
  
          // toggle surveyAnswers for a given answer by name
          scope.togglesurveyAnswers = function togglesurveyAnswers(surveyQuestion) {
              var idx = scope.surveyAnswers.indexOf(surveyQuestion);
  
              // is currently selected
              if (idx &gt; -1) {
                  scope.surveyAnswers.splice(idx, 1);
              }
              // is newly selected
                  else {
                  scope.surveyAnswers.push(surveyQuestion);
              }
          };
          $rootScope.survey.push(scope.surveyAnswers);
      }
  }
  });
  </code></pre>
  
  <p>I took the code from the prototype in the fiddler that is linked and that is not working for some reason.</p>