How to get checked checkbox value and store it array variable in angularjs?

Question

I have created array list and listing it as multiple check box. From that if i select i'm storing into the array variable and if I uncheck its need to be remove from array. I tried this is working for but while uncheck value is not removing from the array variable.

Here is my code below and jsfiddle

HTML

<div ng-app="myApp" ng-controller="MyCtrl">
    <lable ng-repeat="list in lists">
    <input type="checkbox" name="chk[]" ng-model="lst" value="{{list.vl}}" ng-change="change()">
    {{list.vl}} <br>
    </lable>
</div>

SCRIPT

var myApp = angular.module('myApp', []);

myApp.controller('MyCtrl', function($scope){
    $scope.lists = [
        {'vl' : 1},
        {'vl' : 2},
        {'vl' : 3},
        {'vl' : 4},
        {'vl' : 5},
    ];

    $scope.lst = [];
    $scope.change = function(){
        $scope.lst.push('2');
        console.log($scope.lst);
    };
});

Answer 1

You can pass data in ngChange that you need to decide if you want to push or splice.

HTML

<lable ng-repeat="list in lists">
    <input type="checkbox" ng-model="active" ng-change="change(list, active)" >
</lable>

SCRIPT

$scope.change = function(list, active){
    if (active)
        $scope.lst.push(list);
    else
        $scope.lst.splice($scope.lst.indexOf(list), 1);
};

Note that the current value for each item is stored in a variable active on the isolated scope. If you need the value in your model, just bind likes this:

<lable ng-repeat="list in lists">
    <input type="checkbox" ng-model="list.active" ng-change="change(list, active)" >
</lable>

https://jsfiddle.net/ruzw4Lfb/8/

Answer 2

I also created a solution for your problem in a different way. I made something simple than yours. This may help you. Check the example code below:

app.js

var myApp = angular.module('myApp', []);

    myApp.controller('MyCtrl', function($scope){
        $scope.lists = [
            {'vl' : 1, 'state' : false},
            {'vl' : 2, 'state' : false},
            {'vl' : 3, 'state' : false},
            {'vl' : 4, 'state' : false},
            {'vl' : 5, 'state' : false}
        ];

        $scope.change = function(id){
            $scope.lists[id].state = !$scope.lists[id].state;
            console.log($scope.lists);
        };
    });

index.html

<div ng-app="myApp" ng-controller="MyCtrl">
    <lable ng-repeat="list in lists">
    <input type="checkbox" value="{{list.vl}}" ng-click="change($index)">
    {{list.vl}} <br>
    </lable>
</div>