title: angular-drag-and-drop-lists items in separate container
body: <p>I use the <a href="https://github.com/marceljuenemann/angular-drag-and-drop-lists" rel="nofollow">angular-drag-and-drop-lists</a> directives to handle drag and drop operations. I populate groups separated from the actual items. Problems occurs when I drag the item onto the ul element, item disappears. <a href="https://plnkr.co/edit/CHQdHzHRSNiC1ZvNNZrG?p=preview" rel="nofollow">Here</a> is a link to a plunker for you to be able to see what I mean.</p>
  
  <p>Below is my code:</p>
  
  <pre><code>&lt;ul ng-repeat="group in groups"
      class="groups"
      dnd-list="items"&gt;
    &lt;li class="title"&gt;{{group.name}}&lt;/li&gt;
  &lt;/ul&gt;
  
  &lt;ul class="items"&gt;
    &lt;li class="item"
        ng-repeat="item in items"
        dnd-draggable="item"
        dnd-moved="items.splice($index, 1)"
        dnd-effect-allowed="move"&gt;
      {{item.name}}
    &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>