title: Removing element from ng-repeat does not allow to remove or hide element from DOM
body: <p>I have below code to display records using ng-repeat:</p>
  
  <pre><code>&lt;div class="gallery"&gt;
          &lt;div ng-cloak
               ng-repeat="photo in photos| orderBy:'-id'"
               ng-mouseLeave = "delete_btn = !delete_btn"
               ng-mouseEnter = "delete_btn = !delete_btn"
               class="gallery_block"
               id="photo_block_[[photo.id]]"&gt;
              &lt;span title="delete photo" ng-show="delete_btn" class="delete_btn_span" rel="[[photo.id]]" id="delete_photo_[[photo.id]]"&gt;
                 &lt;img  src="{{asset('frontend/images/cross_icon.png')}}"&gt;
              &lt;/span&gt;
              &lt;p&gt;
                  &lt;a href="javascript:;"&gt;
                      &lt;img ng-click="showImagePopup([[photo.path_popup_thumbnail]]);" src={{$public_path}}./image.php?width=149&amp;height=109&amp;cropratio=2:1.4&amp;image=[[photo.path_popup_thumbnail]] alt=""&gt;
                  &lt;/a&gt;
                  {{--&lt;span&gt; &lt;/span&gt;--}}
              &lt;/p&gt;
          &lt;/div&gt;
  
      &lt;/div&gt;
  </code></pre>
  
  <p>I have to delete records for that I first have to call a function using $http and then I remove element from photos array: </p>
  
  <pre><code>  var index = $scope.photos.indexOf($('#photo_block_'+id));
          $scope.photos.splice(index, 1);
  </code></pre>
  
  <p>Then I remove element from DOM:</p>
  
  <pre><code>$('#photo_block_'+id).remove();
  </code></pre>
  
  <p><strong>Update</strong>
  I have called deletePhoto function using jqyery like below:</p>
  
  <pre><code> $(".gallery").on('click','span.delete_btn_span',function()
  {   
      $scope.deletePhoto($(elem), $(elem).attr('rel'));
  });
  </code></pre>
  
  <p>deletePhoto function further do all the work of deleting elements etc.
  But it does not remove element. Where as all the selectors are fine.
  Is removing element from photos array causing problem?</p>