title: Delete multiple items in AngularJS array based on true vale
body: <p>Trying to learn Angular and having an issue with deleting several objects at once. I'm creating a To Do app and when a user checks off several items and clicks a "Clear Completed" button would like for those items checked to be removed and remaining items stay. </p>
  
  <p>Currently I can add, delete single item, and edit an item. What I would like to do is click several items with checkboxes and than clear them depending on the <code>done:true</code></p>
  
  <p>Problem:
  How can I run through each item and see if the <code>&lt;span class="item-display done-{{items.done}}"&gt;{{items.title}}&lt;/span&gt;</code> is TRUE and delete the items with the <code>clear()</code> function?</p>
  
  <p>Angular Version: 1.3.15</p>
  
  <p>Directory set up:</p>
  
  <pre><code>|-index.html
  |-js/
      |app.js
      |todo.ctrl.js
  </code></pre>
  
  <p>HTML:</p>
  
  <pre><code>&lt;body ng-app="app"&gt;
  &lt;section class="module" ng-controller="todoController as todo"&gt;
  &lt;div class="container"&gt;
      &lt;h1&gt;{{todo.title}}&lt;/h1&gt;
      &lt;form name="todo.addForm" class="form" ng-submit="todo.addItem()"&gt;
          &lt;div class="form-group"&gt;
              &lt;label&gt;Add New Item&lt;/label&gt;
              &lt;input type="text" class="form-control" ng-model="todo.new.title" required /&gt;
          &lt;/div&gt;
          &lt;button class="btn btn-primary pull-right"&gt;&lt;span class="glyphicon glyphicon-plus-sign"&gt; Add&lt;/span&gt;&lt;/button&gt;
      &lt;/form&gt;
      &lt;h3&gt;Items:&lt;/h3&gt;
      &lt;ul class="list-group"&gt;
          &lt;li class="list-group-item todo-item" ng-repeat="items in todo.items"&gt;
              &lt;input type="checkbox" ng-model="items.done"/&gt;
              &lt;span class="item-display done-{{items.done}}"&gt;{{items.title}}&lt;/span&gt;
              &lt;form&gt;
                  &lt;input class="form-control" type="text" ng-model="items.title" ng-keyup="todo.editOnEnter($index)"/&gt;
              &lt;/form&gt;
              &lt;a ng-click="todo.delete($index)"&gt;Delete&lt;/a&gt;
              &lt;a ng-click="todo.toggleEditMode($index)"&gt;Update&lt;/a&gt;
          &lt;/li&gt;
      &lt;/ul&gt;
  
      &lt;button class="btn btn-danger pull-right" ng-click="todo.clear()"&gt;Clear Completed&lt;/button&gt;
  &lt;/div&gt;
  &lt;/section&gt;
  &lt;script src="bower_components/jquery/dist/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="bower_components/angular/angular.min.js"&gt;&lt;/script&gt;
  &lt;script src="js/app.js"&gt;&lt;/script&gt;
  &lt;script src="js/todo.ctrl.js"&gt;&lt;/script&gt;
  </code></pre>
  
  <p>app.js:</p>
  
  <pre><code>angular.module('app', []);
  </code></pre>
  
  <p>todo.ctrl.js:</p>
  
  <pre><code>angular.module('app').controller("todoController", function(){
  var vm = this;
  vm.title = 'To Do Application';
  vm.input = '';
  vm.items = [{
      title   :   'dog food',
      done    :   false
  }];
  vm.new = {
      title : '',
      done: false
  };
  vm.addItem = function(){
      vm.items.push(vm.new);
      vm.new = {title:'',done: false};
  };
  
  $(document).click(function(){
      console.log(vm.items);
  });
  
  vm.delete = function (index){
      vm.items.splice(index, 1);
  };
  vm.update = function(index){
      vm.items.copy(index, 1);
  };
  vm.toggleEditMode = function(){
      $(event.target).closest('li').children('.item-display, form').toggleClass('editing');
  };
  vm.editOnEnter = function(index){
      if(event.keyCode == 13){
          vm.toggleEditMode();
      }
  };
  
  //
  //
  // NEED HELP HERE
  //
  //
  vm.clear = function(){
      var oldTodos = vm.items;
      //vm.items = [];
      angular.forEach(oldTodos, function() {
          if (vm.items.done == true){
              this.remove();
          }
      });
  };
  });
  </code></pre>