get array values based on checkbox

I have a situation where there are 3 check box ("initially checked"). Since it as 3 check box it will use ng-repeat for 3 time and loops the division for there time. Now once i uncheck any of the check box it should display div for 2 time. So far ,

  $scope.items = [
        {id: 0, title: "apple",selected:true},
        {id: 1, title: "orange",selected:true},
        {id: 2, title: "grapes",selected:true},

      ];
  On ng-click in each check box i have called a function test("apple"). 
  $scope.test = function(vals) {
  $scope.vl=[];
  for(var i=0;i<$scope.items.length;i++) {
    if($scope.items[i].title == vals) {
        console.log("dnt push");
    }
    else {
            $scope.vl.push({
              id: $scope.items[i].id,
              title: $scope.items[i].title,
              selected:true                    
            });
        }
    } 
    console.log("vl array");
    console.log($scope.vl);
}

Problem I am facing is it works fine for 1st uncheck but not when i do for mulitiple uncheck. When i check unchecked its not loading div.

In HTML I am using like , some tags