Alternative content directive - Scope issues

I'm trying to make a directive to offer alternative content for different devices, based on a single markup to avoid duplicating code, e.g. make a list of content appear as tabs on large screens or as accordions on small screens.

<collection>
  <item>A</item>
</collection>

into

<main-version>
   <m-ver-item>A</m-ver-item>
</main-version>
<alternative-version>
  <alt-ver-item>A</alt-ver-item>
</alternative-version>

I made a plunker with what I have so far, that is currently failing trying to use ng-repeat for example.

Plnkr: http://ift.tt/1EyEru5

JS Fiddle: http://ift.tt/1978hdK

Greetings