title: Error: [$compile:tpload] Failed to load template
body: <p>I've got numerous directives in my Angular app, all of which seem to work as expected 95% of the time. Recently I've been running into a problem where on occasion I get a <code>$compile.tpload</code> error for one or more directive templates. I haven't had any luck debugging the issue. </p>
  
  <p>This happens both locally and on production, but only occasionally (maybe 5% of the time). Here is an example of one of my directives that has experienced this issue:</p>
  
  <pre><code>app.directive('client', ['$http', function($http) {
      return {
          replace: true,
          templateUrl: '/assets/employers/client.html',
          transclude: false,
          scope: {
              result: '=',
              index: '=',
              token: '@'
          }, controller: ['$scope', '$http', function($scope, $http) {
              // Omitted for brevity
          }]
      }
  }]);
  </code></pre>
  
  <p>Here is the HTML for my <code>client</code> directive:</p>
  
  <pre><code>&lt;div class="clients row" ng-class="index % 2 === 0 ? 'even' : 'odd'"&gt;
      &lt;div class="col-lg-12"&gt;
          &lt;div class="results-label left" ng-if="result &amp;&amp; result.name"&gt;&lt;b&gt;{{result.name}}&lt;/b&gt;&lt;/div&gt;
          &lt;div ng-if="result &amp;&amp; result.id" class="btn btn-default pull-right" ng-click="edit()"&gt;Edit&lt;/div&gt;
          &lt;form ng-show="showEditor" accept-charset="UTF-8" name="companyForm" ng-submit="submit(company);" novalidate&gt;
              &lt;input name="utf8" type="hidden" value="✓"&gt;
              &lt;input name="authenticity_token" type="hidden" ng-model="company.token"&gt;
  
              &lt;div class="form-group"&gt;
                  &lt;label&gt;Company Name&lt;/label&gt;
                  &lt;input type="text" class="form-control" name="name" ng-model="company.name" required&gt;
              &lt;/div&gt;
  
              &lt;div class="form-group"&gt;
                  &lt;label&gt;Authorized Users&lt;/label&gt;
                  &lt;div ng-repeat="i in company.employers_attributes"&gt;
                      &lt;div ng-hide="i._destroy" class="row form-group"&gt;
                          &lt;div class="col-lg-2"&gt;
                              &lt;a ng-click="removeUser($index)" class="btn btn-xs btn-danger"&gt;X&lt;/a&gt;
                          &lt;/div&gt;
                          &lt;div class="col-lg-10"&gt;
                              &lt;label&gt;First Name&lt;/label&gt;
                              &lt;input class="form-control" ng-model="company.employers_attributes[$index].first_name" /&gt;
  
                              &lt;label&gt;Last Name&lt;/label&gt;
                              &lt;input class="form-control" ng-model="company.employers_attributes[$index].last_name" /&gt;
  
                              &lt;label&gt;Email&lt;/label&gt;
                              &lt;input class="form-control" ng-model="company.employers_attributes[$index].email" /&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
  
              &lt;div class="form-group"&gt;
                  &lt;div class="btn btn-default" ng-click="addUser()"&gt;
                      &lt;i class="fa fa-plus"&gt;&lt;/i&gt;
                      Add User
                  &lt;/div&gt;
                  &lt;input class="btn btn-primary" style="float:right;" name="commit" type="submit" value="Save" ng-disabled="companyForm.$invalid"&gt;
              &lt;/div&gt;
          &lt;/form&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>