title: Cannot bind html in AngularJS partial for some unknown reason?
body: <p>I have a ng-repeat that uses a partial html file to loop through and display items to a page, for some reason the variables within the partial do not display however the variable {{rule.name}} displays which is outside of the partial displays fine?</p>
  
  <p>rules is an array e.g
  rules[0].name = 'My first rule';
  rules[0].desc = 'My first desc';
  rules[1].name = 'My second rule';
  rules[1].desc = 'My second desc';</p>
  
  <pre><code>&lt;div ng-controller="RulesController" ng-if="hasManageRules" class="roles canvas-column"&gt;
  &lt;div ng-repeat="(ruleIndex, rule) in rules"&gt;
      {{rule.name}} // this shows the variable fine 
      &lt;div ng-include src="'templates/partial/rule.html'"&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p></p>
  
  <p>// my partial/rule.html file:</p>
  
  <pre><code>&lt;div ng-controller="RuleController" class="card-body no-hover form-group" ng-click="unfoldrule(ruleIndex)" ng-class="{'unfolded': rule.unfolded}"&gt;
  &lt;ng-form name="ruleForm"&gt;
      &lt;div class="card-header"&gt;
          &lt;div class="card-title" ng-if="!rule.unfolded" ng-bind-html="rule.name"&gt;&lt;/div&gt;
  </code></pre>
  
  <p></p>
  
  <p>Can anyone suggest why the rule.name variable doesn't display on the ng-bind-html for some reason?</p>