why splice not work properly in angular js

Question

I am trying to make one demo in which i have one checkbox list .I am able to display the list using ng-repeat .

What I need if user click on one check box(only one checkbox is checked) .it display only one columns (100%) width .Which user checked two column it display two columns of equal width (50%).if user check three column it show three column of equal width ..As as if user checked four checkbox it show four column of equal width ..Initially some of checkbox is checked ( checked:true) ..

• my first step is to unchecked the checked option "training 3" ..but after unchecked it still display why ? I already use splice. method ?

here is my code http://codepen.io/anon/pen/adBroe?editors=101

   init();
  function init(){
      for(var i =0;i<self.data.length;i++){
      var obj=self.data[i];
         if(obj.checked)
      {
        self.selectedList.push(obj);
      }
    }
    alert('starting '+self.selectedList.length)
  }

  self.checkBoxClick=function(obj,i){
    if(obj.checked)
      {
        alert('if')
        self.selectedList.push(obj);
      }else
        {
          alert('else'+i);
          self.selectedList.splice(i,1);
        }
    alert(self.selectedList.length);

   }

})

here is i am trying to display

  <div class='container-fluid'>
    <div class='row'>
      <div ng-repeat="i in vm.selectedList" class='col-xs-{{12/vm.selectedList.length}}'>
        {{i.name}}
      </div>
    </div>
  </div>

Answer 1

It can be much simpler. In HTML you don't even need ngChange handler, just bind to checked property:

  <div class="checkbox" ng-repeat='v in vm.data'>
    <label>
      <input type="checkbox" ng-model='v.checked'> {{v.name}}
    </label>
  </div>

and then render columns with just ngRepeat:

  <div ng-repeat="i in filteredList = (vm.data | filter:{checked:true})" class='col-xs-{{12/filteredList.length}}'>
    {{i.name}}
  </div>

So as the result, clean controller without any logic at all, with Angular doing all necessary column filtering using template vm.data | filter:{checked:true}.

Demo: http://codepen.io/anon/pen/bEBydL?editors=101

Answer 2

This is happening because you are trying to remove it from 2nd index while training 3 is present at 0th index.

else
    {
      alert('unchecked '+i);
      var index = self.selectedList.indexOf(obj);
      self.selectedList.splice(index,1);

    }

change your else part to this. and it will work fine.

http://codepen.io/anon/pen/yeVWeQ?editors=101