Checkboxes weird behaviour in AngularJS ng-repeat

Question

I've a form containing input fields and checkboxes (table crud generating dynamically). See the image below:

Here, In my clients modal dialog form I've implemented small crud for adding/updating/deleting Providers data and showing table below of it on the fly.

Following is my code:

View:

<form name="clientForm" ng-submit="check(id)" ng-controller="ClientsController">

    <div class="form-group">
        <label for="name">Name</label>            
        <div class="input-group">
            <span class="input-group-addon" id="basic-addon1"><i class="glyphicon glyphicon-hand-right"></i></span>
            <input type="text" class="form-control" id="title" placeholder="Enter Name" ng-model="client.name">
        </div>
    </div>

    <div class="form-group">
        <label for="email">Email</label>
        <div class="input-group">
            <span class="input-group-addon" id="basic-addon1"><i class="glyphicon glyphicon-envelope"></i></span>
            <input type="text" class="form-control" id="title" placeholder="Enter Email" ng-model="client.email">
        </div>
    </div>

    <div class="form-group">
        <label for="phone">Phone</label>
        <div class="input-group">
            <span class="input-group-addon" id="basic-addon1"><i class="glyphicon glyphicon-earphone"></i></span>
            <input type="text" class="form-control" id="title" placeholder="Enter Phone" ng-model="client.phone">
        </div>
    </div>

    <div class="form-group">
        <label for="phone">Providers</label>
        <div class="input-group">
            <span class="input-group-addon" id="basic-addon1"><i class="glyphicon glyphicon-hand-right"></i></span>
            <input type="text" class="form-control" id="title" ng-model="provider.provider_name" placeholder="Enter Provider Name">
        </div>
        <br>
        <button type="button" id="addbtn" class="btn btn-sm btn-primary" ng-click="addProvider()">Add Provider</button>
        <button type="button" id="editbtn" class="btn btn-sm btn-info" ng-click="updateProvider(id)">Update Provider</button>
        <button type="button" id="editbtn" class="btn btn-sm btn-default" ng-click="clearProvider()">Clear Provider</button>
        <br>            
        <table style="width: 50%; margin-top: 10px;" class=""> 
            <tbody>
                <tr ng-repeat="val in providersData">
                    <td>
                        <input type="checkbox" name="providersData" ng-model="$parent.client.providersList" value="{{val._id}}"/>
                    </td>
                    <td>{{val.provider_name}}</td>
                    <td>
                        <a style="color: blue;" href="javascript:void(0);" ng-click="editProvider(val._id)"><i class="glyphicon glyphicon-edit"></i></a>
                        &nbsp;&nbsp;&nbsp;                            
                        <a  style="color: red;" href="javascript:void(0);" title="Delete" confirmed-click="removeProvider(val._id)" ng-confirm-click="Are you sure you want to remove provider?"><i class="glyphicon glyphicon-trash"></i></a>                        
                    </td>
                </tr>
            </tbody>
        </table>            
    </div>        

    <div class="well well-lg text-center bg-gray">          
        <button class="btn btn-success" ng-if="id">Save Client</button>                        
        <button class="btn btn-danger" ng-if="id" title="Delete" confirmed-click="remove(client._id)" ng-confirm-click="Are you sure you want to remove?">Delete</button>                        
        <button type="button" class="btn btn-warning" data-dismiss="modal" aria-hidden="true">Cancel</button>            
        <button class="btn btn-success" ng-if="!id">Add Client</button>            
    </div>
</form>

Controller:

        $scope.showModal = false;
        $scope.client = {};
        $scope.provider = null;            

        $scope.addClient = function () {
            alert(JSON.stringify($scope.client));
            $http.post('/clients', {param: $scope.client}).success(function (response) {
                if (response) {
                    alert("Client added successfully");
                    $scope.client = "";
                    refresh();
                    $scope.closemodal();
                }
            });
        };

Now I want to insert/update selected checkboxes value to db along with Name, Email, and Phone field.

Here I'm facing following issues:

1. Whenever I'm clicking on any checkbox its checking all checkboxes.
2. After clicking on Add Client button its showing result of alert(JSON.stringify($scope.client)) like this {"name":"asdfdsafasdf","email":"sdf","phone":"sadf","providersList":{"id":true}}
3. In mongodb its showing like this:

I've search a lot tried this and ng-model="$parent.client.providersList.id" but still its not working.

I'm beginner in AngularJS and just started working on it.

Any help would be appreciated.

Answer 1

You are facing this problem because of the value of your ng-model attribute. The value for ng-model attribute must be different for each checkbox. Here, try this:

<input type="checkbox" name="providersData" ng-model="client.providersList{{$index}}" ng-value="val._id" />

Try something like this:

$scope.client = {}; 
$scope.client.providersList = [];

// Now watch the model for changes
$scope.$watch('client', function(){
    // When the checkbox is selected it returns true
    if($scope.client.providersList1 == true){
        $scope.client.providersList.push({"id": value})
    }
    // Repeat the if statements for all the checkboxes (or use a for loop)
}, true);

Answer 2

You should use ng-true-value & ng-false-value over the checkbox(I'm considering default value to be 0). And then use $index of providersData ng-repeat to create an array of client.providersList.

Markup

<input type="checkbox" name="{{'providersData'+$index}}" 
  ng-model="client.providersList[$index].id" ng-true-value="val._id" ng-false-value="0" />