title: How can I remove an element from a ng-repeat, but keep functionality
body: <p>I'm learning Angular and struggling with something. I'm using a tinder-like library that lets you swipe images left or right. I also have a heart and "X" that will do the same thing.</p>
  
  <p>What's happening is when you swipe left/right, the heart and "X" are being swiped too. I need these to remain stationary. I'm not sure how to do that and still have them render and function normally. </p>
  
  <p>Here's the HTML code: </p>
  
  <pre><code>&lt;div class="ng-swippy noselect"&gt;
  &lt;div person="person" swipe-directive="swipe-directive" ng-repeat="person in peopleToShow" class="content-wrapper swipable-card"&gt;
    &lt;div class="card"&gt;
        &lt;div style="background: url({{person.thumbnail}}) no-repeat 50% 15%" class="photo-item"&gt;&lt;/div&gt;
        &lt;div class="know-label"&gt;{{labelOk ? labelOk : "YES"}}&lt;/div&gt;
        &lt;div class="dontknow-label"&gt;{{labelNegative ? labelNegative : "NO"}}&lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="container like-dislike"&gt;
      &lt;div class="circle x" ng-click="$parent.$parent.clickDisike()"&gt;&lt;/div&gt;
      &lt;div class="icon-like" ng-click="$parent.$parent.clickLike()"&gt;&lt;/div&gt;
      &lt;div class="clearfix"&gt;&lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="clearfix"&gt;&lt;/div&gt;
  &lt;/div&gt;&lt;!-- end person--&gt;
  </code></pre>
  
  <p></p>
  
  <p>If I move the <code>like-dislike</code> container out of the <code>person</code> div, 2 things happen. That container does not render on screen and even if it does, it throws an error. </p>
  
  <p>How can I keep them stationary and keep their functionality as it relates to the app/image they represent? </p>
  
  <p>Thanks in advance. </p>
  
  <p>****EDIT****
  Link: <a href="http://430designs.com/xperience/black-label-app/deck.php" rel="nofollow noreferrer">http://430designs.com/xperience/black-label-app/deck.php</a></p>