Error: [$compile:multidir] Multiple directives [mdVirtualRepeat, ngInclude] asking for transclusion

Question

I've got a problem using mdVirtualRepeat directive in my html page. The problem is that I need include a html in the same tag. This is what I should need to do:

<table>
   <thead>
    <tr>
       <th ng-repeat="header in headers">
           {{header.title}}
       </th>
    </tr>
   </thead>
   <tbody md-virtual-repeat-container 
          id="vertical-container"
          md-auto-shrink = "true"
          md-virtual-repeat="item in items.list"
          data-ng-include="./details.html'">
   </tbody>
</table>

and the details.html page contains the columns of my table with 2 tr. Something like:

<tr>
   <td>
     {{item..}}
   </td>
   <td>
      {{item..}}
   </td>
</tr>
<tr>
   <td colspan="2">
      {{item..}}
   </td>
</tr>

The real problem is that item need to use it in all detail.html page. So I can't loop for example in the first <tr> tag because in the second I can't use it any more. But in this way I can't use the directive because I get this error: Error: [$compile:multidir] Multiple directives [mdVirtualRepeat, ngInclude] asking for transclusion

Is there a way to solve the problem?

EDIT: Or is it possible something like this?

 <tr md-virtual-repeat="item in items.list">
   <td>
     {{item..}}
   </td>
   <td>
      {{item..}}
   </td>
</tr>
<tr>
   <td colspan="2">
      {{item..}} (use item also here out of ng-repeat?)
   </td>
</tr>

Answer 1

Try creating a directive. Something like:

yourModule.directive('details', function() {
  return {
    restrict: 'A',
    templateUrl: 'details.html'
  };
});

And then:

<tbody md-virtual-repeat-container 
      id="vertical-container"
      md-auto-shrink = "true"
      md-virtual-repeat="item in items.list"
      details>

Edit: Here is a simplified example