keeping track of the removed indices of an array javascript

i have a form with text box and checkbox. When i fill value to the checkbox , the value is pushed into an array.When I unchecked the checkbox, the value is removed from that array. Here is my working code pen.

This is my form code

<label class="item item-input">
    <input type="text" placeholder="In a word, what is important to you?" ng-model="values.first" >
    <ion-checkbox ng-click="toggleCheckBox(success.first,values.first)"  ng-change="show2='true'" ng-model="success.first"  
           ng-disabled="!values.first" style="border: none;padding-left: 30px;" class="checkbox-royal"></ion-checkbox>
  </label>

  <label class="item item-input" ng-show="show2" ng-class="{'animated-custom slideInLeft':success.first}">
    <input type="text" placeholder="What else is important to you?" ng-model="values.second" >

    <ion-checkbox class="checkbox-royal" ng-model="success.second" ng-click="toggleCheckBox(success.second,values.second)" ng-change="show3='true'" ng-disabled="!values.second" style="border: none;padding-left: 30px;"></ion-checkbox>
  </label>

  <label class="item item-input" ng-show="show3" ng-class="{'animated-custom slideInLeft':success.second}">
    <input type="text" placeholder="What else is important to you?" ng-model="values.third">

    <ion-checkbox class="checkbox-royal" ng-model="success.third" ng-click="toggleCheckBox(success.third,values.third)" ng-change="show4='true'" ng-disabled="!values.third" style="border: none;padding-left: 30px;"></ion-checkbox>
  </label>

  <label class="item item-input" ng-show="show4" ng-class="{'animated-custom slideInLeft':success.third}">
    <input type="text" placeholder="What else is important to you?" ng-model="values.four">

    <ion-checkbox class="checkbox-royal" ng-model="success.four" ng-click="toggleCheckBox(success.four,values.four)" ng-change="show5='true'" ng-disabled="!values.four" style="border: none;padding-left: 30px;"></ion-checkbox>
  </label>

And this is controller code ,

.controller('myctrl',function($scope){
  var values=[];
  $scope.toggleCheckBox=function(isChecked, value){
    if(isChecked){
      values.push(value);
      console.log(values);
    }else{
      var currentIndex = values.indexOf(value);
      values.splice(currentIndex, 1);
      console.log(values);
       //console.log(values.indexOf(value));
    }
  }
})

The problem is, when i remove the value from array and again check the checkbox, it pushes the value to last . Is it possible to retain the original position of that value in the array?