Remove items from Array skips certain items
<p>I have the following page (simple):
<a href="https://i.stack.imgur.com/z9MF9.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/z9MF9.png" alt="enter image description here"></a></p>

<p>As you can see, at the top I have an input, then <code>&lt;ul&gt;</code> and finally a button to save changes. My <code>&lt;ul&gt;</code> is bound to a array of <code>items</code>. Once user clicks Uloz zmeny (Save Changes) I am triggering <code>ng-click="vm.SaveChanges()"</code> which looks like following:</p>

<pre><code>    vm.SaveChanges = function () {
        angular.forEach(vm.items, function (value, key) {

            if (value.toRemove == true) {
                //remove item from the list

                var iIndex = vm.items.indexOf(value);
                vm.items.splice(iIndex, 1);
            };
        });
    };
</code></pre>

<p>where <code>vm</code> is defined as following at the beginning of my code:</p>

<pre><code>(function () {
    "use strict";

    angular.module("app-shopping").controller("itemsController", itemsController);

    function itemsController($http) {
        var vm = this;

        vm.items = [];.....more code after here
</code></pre>

<p>Every item under my '' has the following structure:</p>

<pre><code>  {
    "id": 2,
    "orderId": 2,
    "text": "Item 2",
    "toRemove": true
  },
</code></pre>

<p>Finally, when user checks an item under the <code>&lt;li&gt;</code> I am triggering <code>vm.toggleCompleted()</code> which simply looks like this (it simply changes a boolean state of current item from true to false or vice versa):</p>

<pre><code>    vm.toggleCompleted = function (sItem) {
        sItem.toRemove = !sItem.toRemove;
    };
</code></pre>

<p>Here comes the question: Why when I run this code it does not remove all checked items in the array? For example in this specific case (see image above) it would only remove <code>Item 2</code> and skip <code>Item 3</code>. I believe that the problem is caused by the fact that when <code>Item 2</code> is remove from the list, <code>Item 3</code> takes the index of already existing <code>Item 2</code> and therefore is skipped. Is this assumption correct? If yes, how do I need to change the code to make this run? </p>

<p>P.S. Edit to my code as recommended:</p>

<pre><code>        &lt;li class="list-group-item" ng-repeat="sItem in vm.items"&gt;
            &lt;div class="checkbox checkbox-success"&gt;
                &lt;input id="ListItem{{$index}}" type="checkbox" placeholder="test placeholder" ng-model="sItem.toRemove" ng-click="sItem.toRemove=!sItem.toRemove" /&gt;
                &lt;label for="ListItem{{$index}}"&gt;{{sItem.text}}&lt;/label&gt;
            &lt;/div&gt;
        &lt;/li&gt;
</code></pre>