selecting checkbox id from table in Angularjs - angularjs

Question

I am new to Angularjs. I have created a table using Angularjs. I am populating the content of the table from the controller and using ng-repeat in the html to render the data.
I also need to handle the checkbox check event and populate the array in the controller. I have added the checkboxes in the view. I am able to bind the content but when I am not able to handle the the checkbox event when checked. How to handle this in Angularjs. I have added the ng-change and ng-model but I want to populate the selected checkbox id from the $scopr.update function. Currently whenever there is change event, the function is called with the id, but I don't know if the checkbox is checked on unchecked. Where I am going wrong?
Code for the UI
<div class="ibox-content">
<div class="row">
<div class="col-sm-4 m-b-xs">
<div data-toggle="buttons" class="btn-group">
<label class="btn btn-sm btn-white"> <input type="radio" id="option1" name="options">10</label>
<label class="btn btn-sm btn-white"> <input type="radio" id="option2" name="options">25</label>
<label class="btn btn-sm btn-white"> <input type="radio" id="option3" name="options">50</label>
</div>
</div>
<div class="col-sm-3 pull-right">
<div class="input-group">
<div class="input-group-addon"><i class="fa fa-search"></i></div>
<input type="text" class="form-control" placeholder="Search Host" ng-model="name">
</div>
</div>
</div>
<div class="table-responsive">
<table class="table table-striped table-bordered">
<thead>
<tr>
<td>Select</td>
<td>
<a href="#" ng-click="sortType = 'name'; sortReverse = !sortReverse">
Hostname
<span ng-show="sortType == 'name' && !sortReverse" class="fa fa-caret-down"></span>
<span ng-show="sortType == 'name' && sortReverse" class="fa fa-caret-up"></span>
</a>
</td>
<td>
<a href="#" ng-click="sortType = 'application'; sortReverse = !sortReverse">
Application
<span ng-show="sortType == 'application' && !sortReverse" class="fa fa-caret-down"></span>
<span ng-show="sortType == 'application' && sortReverse" class="fa fa-caret-up"></span>
</a>
</td>
<td>
<a href="#" ng-click="sortType = 'environment'; sortReverse = !sortReverse">
Environment
<span ng-show="sortType == 'environment' && !sortReverse" class="fa fa-caret-down"></span>
<span ng-show="sortType == 'environment' && sortReverse" class="fa fa-caret-up"></span>
</a>
</td>
</tr>
</thead>
<tbody>
<tr dir-paginate="host in newHosts | orderBy:sortType:sortReverse | filter:name | itemsPerPage: 10
" pagination-id="host">
<td><input type="checkbox" ng-change="update(host.id)" ng-model="host_id"/></td>
<td>{{host.name}}</td>
<td>{{host.application}}</td>
<td>{{host.environment}}</td>
</tr>
</tbody>
</table>
</div>
</div>
In the controller:
$scope.selectedHost=[];
$scope.sortType = 'name'; // set the default sort type
$scope.sortReverse = false; // set the default sort order
$scope.searchHost = ''; // set the default search/filter term
$scope.newHosts=[
{
"name": "Pradeep",
"application": "MMC",
"environment": "Prod"
},
{
"name": "Praveen",
"application": "TTC",
"environment": "Pre"
}
]
$scope.update=function(hostId){
console.log(hostId);
}

Answer 1

First, add the ng-click into your checkbox
<td><input type="checkbox" ng-click=update(host)/></td>
Then call the update function in the controller
$scope.update = function(host){
var hostIndex = $scope.selectedHost.indexOf(host);
if(hostIndex == -1) {
$scope.selectedHost.push(host); //Add the selected host into array
} else {
$scope.selectedHost.splice(hostIndex, 1); //Remove the selected host
}
}

Answer 2

U could send inde as well by using $index to the function and it will give you the
exact index of the selected row, so that u can get it from your array,
as well as u can do more code by using this, u are not required to get
index ( a probability to not to get right index in some cases)
<td><input type="checkbox" ng-click=update($index)/></td>
$scope.update = function(hostIndex){
var host= $scope.selectedHost[hostIndex];
if(hostIndex == -1) {
$scope.selectedHost.push(host); //Add the selected host into array
} else {
$scope.selectedHost.splice(hostIndex, 1); //Remove the selected host
}
}