title: What is the correct syntax of ng-include?
body: <p>I’m trying to include an HTML snippet inside of an <code>ng-repeat</code>, but I can’t get the include to work. It seems the current syntax of <code>ng-include</code> is different than what it was previously: I see many examples using</p>
  
  <pre><code>&lt;div ng-include src="path/file.html"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>But in the <a href="https://code.angularjs.org/1.1.0/docs/api/ng.directive:ngInclude#Usage" rel="noreferrer">official docs</a>, it says to use</p>
  
  <pre><code>&lt;div ng-include="path/file.html"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>But then <a href="https://code.angularjs.org/1.1.0/docs/api/ng.directive:ngInclude#Example" rel="noreferrer">down the page</a> it is shown as</p>
  
  <pre><code>&lt;div ng-include src="path/file.html"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>Regardless, I tried</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;div ng-include="views/sidepanel.html"&gt;&lt;/div&gt;
  </code></pre>
  
  <pre class="lang-html prettyprint-override"><code>&lt;div ng-include src="views/sidepanel.html"&gt;&lt;/div&gt;
  </code></pre>
  
  <pre class="lang-html prettyprint-override"><code>&lt;ng-include src="views/sidepanel.html"&gt;&lt;/ng-include&gt;
  </code></pre>
  
  <pre class="lang-html prettyprint-override"><code>&lt;ng-include="views/sidepanel.html"&gt;&lt;/ng-include&gt;
  </code></pre>
  
  <pre class="lang-html prettyprint-override"><code>&lt;ng:include src="views/sidepanel.html"&gt;&lt;/ng:include&gt;
  </code></pre>
  
  <p>My snippet is not very much code, but it’s got a lot going on; I read in <a href="https://stackoverflow.com/questions/12361680/">Dynamically load template inside <code>ng-repeat</code></a> that that could cause a problem, so I replaced the content of <code>sidepanel.html</code> with just the word <code>foo</code>, and still nothing.</p>
  
  <p>I also tried declaring the template directly in the page like this:</p>
  
  <pre><code>&lt;script type="text/ng-template" id="tmpl"&gt;
      foo
  &lt;/script&gt;
  </code></pre>
  
  <p>And running through all the variations of <code>ng-include</code> referencing the script’s <code>id</code>, and still nothing.</p>
  
  <p>My page had a lot more in it, but now I’ve stripped it down to just this:</p>
  
  <pre><code>&lt;!-- index.html --&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;!-- angular includes --&gt;
  &lt;/head&gt;
  &lt;body ng-view="views/main.html"&gt; &lt;!-- view is actually set in the router --&gt;
      &lt;!-- views/main.html --&gt;
      &lt;header&gt;
          &lt;h2&gt;Blah&lt;/h2&gt;
      &lt;/header&gt;
      &lt;article id="sidepanel"&gt;
          &lt;section class="panel"&gt; &lt;!-- will have ng-repeat="panel in panels" --&gt;
              &lt;div ng-include src="views/sidepanel.html"&gt;&lt;/div&gt;
          &lt;/section&gt;
      &lt;/article&gt;
  &lt;!-- index.html --&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>The header renders, but then my template doesn’t. I get no errors in the console or from Node, and if I click the link in <code>src="views/sidepanel.html"</code> in dev tools, it takes me to my template (and displays <code>foo</code>).</p>