Directive list in modal shows additional element as garbage



I have directive that represents contact list:

<selected-time the-contacts="modalData.contacts"></selected-time> 

Its isolate scope directive and when I use it in application - all works fine.

I created some modal that have the same scope (tried also different). In modal I want to show the same list aka:

<div class="modal" ng-controller="ModalCtrl">
<header class="bar bar-header bar-stable">
        <h1 class="title">Confirm Meeting</h1>
    <ion-content class="has-header has-subheader padding"> 
       <ion-scroll direction="y" scrollbar-x="false" scrollbar-y="false">          
         <selected-time the-contacts="modalData.contacts"></selected-time>   <!-- directive -->

Here is a Demo that illustrates the issue: DEMO

If I’ll replace directive with content, the modal will show list properly


How it should be:

How it looks like in modal (see garbage as 1st element):



I was my fault.
I didn’t notice that my directive contains ng-repeat without root wrapper (<div></div>). Generally angular must throw Exception about but in this case nothing happened.

So after that fix it should work.

Fixed Demo