title: Angular: GET request for template url mysteriously fails 2nd time
body: <p>I've got an Angular app which relies on using some template-urls
  The app is running in an iframe (please don't question why)
  There's a javascript button on the parent page, which reloads the iframe and the angular app during every click.</p>
  
  <p>1st time the click event occurs stuff works brilliant. The app is loaded, while making successful GET request to all my templates-urls.</p>
  
  <blockquote>
    <p>Remote Address:127.0.0.1:80 Request
    URL:<a href="http://MyWebsite.com/_layouts/Project/MyAngularApp/angular-templates/term.html" rel="nofollow">http://MyWebsite.com/_layouts/Project/MyAngularApp/angular-templates/term.html</a>
    Request Method:GET Status Code:200 OK Request Headersview source
    Accept:application/json, text/plain, <em>/</em>
    Accept-Encoding:gzip,deflate,sdch
    Accept-Language:en-US,en;q=0.8,sv;q=0.6 Connection:keep-alive
    Cookie:opened=%23ICD-10-EN_0_class_0_0_1%2C%23ICD-10-EN_2_class_0_0_0%2C%23ICD-10-EN_2_class_12312_0_0%2C%23ICD-10-EN_2_class_12313_0_0%2C%23ICD-10-EN_2_class_12715_0_0;
    loaded=%23_0_class_0_0_0; selected=%23ICD-10-EN_2_class_12725_0_0;
    Host:klassifikationer
    Referer:<a href="http://MyWebsite.com/_layouts/Project/MyAngularApp/angularApp.html" rel="nofollow">http://MyWebsite.com/_layouts/Project/MyAngularApp/angularApp.html</a></p>
  </blockquote>
  
  <p>But whenever the click event occurs again, all GET requests for template-urls fail </p>
  
  <blockquote>
    <p>Request
    URL:<a href="http://MyWebsite.com/_layouts/Project/MyAngularApp/angular-templates/term.html" rel="nofollow">http://MyWebsite.com/_layouts/Project/MyAngularApp/angular-templates/term.html</a>
    Request Headers Provisional headers are shown Accept:application/json,
    text/plain, <em>/</em>
    Referer:<a href="http://MyWebsite.com/_layouts/Project/MyAngularAppr/angularApp.html" rel="nofollow">http://MyWebsite.com/_layouts/Project/MyAngularAppr/angularApp.html</a></p>
  </blockquote>
  
  <p>and I get this error</p>
  
  <p><strong><em>"Error: $compile:tpload Error Loading Template"</em></strong>. <a href="https://docs.angularjs.org/error/" rel="nofollow">https://docs.angularjs.org/error/</a>$compile/tpload?p0=angular-templates%2Fterm.html</p>
  
  <p>" <em>Failed to load template: angular-templates/term.html
  Description:
  This error occurs when $compile attempts to fetch a template from some URL, and the request fails.
  To resolve this error, ensure that the URL of the template is spelled correctly and resolves to correct absolute URL. The Chrome Developer Tools might also be helpful in determining why the request failed.
  If you are using $templateCache to pre-load templates, ensure that the cache was populated with the template.</em> "</p>
  
  <p>I've checked the Chrome debugger's Network tab and verified that both the failed and the successful GET requests seem identical. Same request URL, same referer page, same accept argument.</p>
  
  <p>Could the problem concern the $compile directive?
  I'm using "tree" directive lib which I found. It allows nested templates and uses the compile directive to build them. Could that be the issue? Here's a demo of the directive <a href="http://plnkr.co/edit/JAIyolmqPqO9KsynSiZp?p=preview" rel="nofollow">enter link description here</a></p>
  
  <pre><code> app.directive("tree", function (RecursionHelper) {
  return {
      restrict: "E",
      scope: { family: '=' },
      controller: 'MyController',
      templateUrl: function(templateElement, templateAttrs) {
          return templateAttrs.templateUrl;
      },
  replace: true,
  restrict: 'E',
      compile: function (element) {
          // Use the compile function from the RecursionHelper,
          // And return the linking function(s) which it returns
          return RecursionHelper.compile(element);
      }
  };
  </code></pre>
  
  <p>});</p>
  
  <p>and here's some example of HTML where the template-url argument is used</p>
  
  <pre><code>&lt;div class="repeater" data-ng-repeat="item in content"&gt;
      &lt;tree family="item" template-url="angular-templates/term.html"&gt;&lt;/tree&gt;
  &lt;/div&gt;     
  </code></pre>
  
  <p>Finally, I should also mention that the Angular app is running inside a dotNET project. (sharepoint to be more specific) but I don't think that should be the issue.</p>