title: how to delete object in an array with filter used? AngularJS
body: <p>I have something like an input to add items into either column 1 or column 2 and each time adding the items, the column will show up what is added right away with an 'X' beside it so if you want to delete the item just click on 'X'.  At first I wasn't thinking much so I used an easy way to remove the HTML but then I realized, that's just removing the HTML (There's also a search input if I type something into search and clear the search, all items will show again).  This is when I realized just removing the HTML is a mistake that I need to remove the object too but how can I make it so it'll delete the right object in the array?</p>
  
  <p>My angular script</p>
  
  <pre><code>angular.module("addItemApp", [])
      .controller("toDoCtrl", function ($scope) {
      $scope.items = [];
      $scope.addItem = function (item) {
          console.log(item);
          $scope.items.push(angular.copy(item));
          console.log($scope.items);
      };
      $scope.remove = function (item) {
          var index = $scope.items.indexOf(item);
          $scope.items.splice(index, 1);
      }
  });
  </code></pre>
  
  <p>my html</p>
  
  <pre><code>&lt;div class="row"&gt;
      &lt;div class="col-xs-6 col-sm-4 left-column"&gt;
          &lt;div class="input-item"&gt;
              &lt;input type="text" placeholder="Enter Item" ng-model="item.name" class="enter-item"&gt;
              &lt;select class="column-select" ng-model="item.pos"&gt;
                  &lt;option value="default" selected&gt;Choose Column&lt;/option&gt;
                  &lt;option value="column1"&gt;Column 1&lt;/option&gt;
                  &lt;option value="column2"&gt;Column 2&lt;/option&gt;
              &lt;/select&gt;
              &lt;button class="add-button" type="button" ng-click="addItem(item)"&gt;Add Item&lt;/button&gt;
          &lt;/div&gt;
          &lt;div class="search-item"&gt;
              &lt;label for="search"&gt;Search An Item&lt;/label&gt;
              &lt;div class="search-input"&gt;
                  &lt;input ng-model="query" type="text" placeholder="Search" id="search"&gt;&lt;span class="fa fa-search icon-search"&gt;&lt;/span&gt;
  
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="col-xs-6 col-sm-4"&gt;
           &lt;h3 class="column-header column1"&gt;
                Column 1
           &lt;/h3&gt;
  
          &lt;ul ng-repeat="item in items | filter:{ pos: 'column1' } | filter:query"&gt;
              &lt;li&gt;{{item.name}}
                  &lt;button remove-on-click ng-click="remove()" class="remove-button fa fa-times"&gt;&lt;/button&gt;
              &lt;/li&gt;
          &lt;/ul&gt;
      &lt;/div&gt;
      &lt;!-- Optional: clear the XS cols if their content doesn't match in height --&gt;
      &lt;div class="clearfix visible-xs-block"&gt;&lt;/div&gt;
      &lt;div class="col-xs-6 col-sm-4"&gt;
           &lt;h3 class="column-header column2"&gt;
                Column 2
           &lt;/h3&gt;
  
          &lt;ul ng-repeat="item in items | filter:{ pos: 'column2' } | filter:query"&gt;
              &lt;li&gt;{{item.name}}
                  &lt;button remove-on-click ng-click="remove()" class="remove-button fa fa-times"&gt;&lt;/button&gt;
              &lt;/li&gt;
          &lt;/ul&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Thanks in advance everyone.</p>