angular - using element replace with in directive not removing previous element on update

In my directive i am using custom template. for that reason and my style purpose i am using element.replaceWith() - it works.

But when i update the collection the old elements and the data still exist. In case if i remove the element.replaceWidth() method it all works fine.

How can i use element.replaceWith() in the directive as well update the new collection?

code snippet:

  element.html(getTemplate(scope.value, scope.index));
  $compile(element.contents())(scope);
  element.replaceWith(element.contents()); //using this old elements exist.

In my demo, please click on next button to load new collection.

Demo