Angular ng-include in wrong position

Question

I try to include a template with angular ng-include. The page to include to:

<table class="table table-hover table-striped">
      <thead>
          <tr>
            <th translate>
              First
            </th>
            <th translate>
              Second
            </th>
            <th translate>
              Third
            </th>
          </tr>
      </thead>
      <tbody>
          <ng-include src="getTemplate('default')"></ng-include>
      </tbody>
  </table>

The template:

<tr class="table-row-clickable">
  <td>text1</td>
  <td>text2</td>
  <td>text3</td>
</tr>

Get template method:

$scope.getTemplate = function(templateName) {
    return APP_CONFIG.TPL_PATH + '/path/' + templateName + '.html';
};

The template loads fine, I can see it on the page, but in the wrong place. Here is the screen from my browser's console, the ng-include inserts before the table, not inside it:

Could you please help me to understand, why is that? Thank you in advance.

Edit 1, add browser's render:

Answer 1

Browsers follow HTML standard, so there can't be any other tag like ng-include inside the tbody tag. There should be only tr

<tbody>
    <ng-include src="getTemplate('default')"></ng-include>
</tbody>

So, change it to:

<tbody ng-include="getTemplate('default')"></tbody>

This will simply put the content of the template inside the tbody.

Note: Your code might work on some browser as other browsers might render it as is but might show different in the inspector. For example: if you miss a closing tag of a div (for example), and when you inspect the element, you will see the closing tag since some browsers like Chrome will auto close for you (although, your page rank for search engines like Google might fall).

Try to use some extension like Web Developer Tool and use a feature like See generated output