title: selecting checkbox id from table in Angularjs
body: <p>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. </p>
  
  <p>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 <code>ng-change</code> and <code>ng-model</code> but I want to populate the selected checkbox id from the <code>$scopr.update</code> 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?</p>
  
  <p>Code for the UI</p>
  
  <pre><code>&lt;div class="ibox-content"&gt;
    &lt;div class="row"&gt;
      &lt;div class="col-sm-4 m-b-xs"&gt;
        &lt;div data-toggle="buttons" class="btn-group"&gt;
          &lt;label class="btn btn-sm btn-white"&gt; &lt;input type="radio" id="option1" name="options"&gt;10&lt;/label&gt;
           &lt;label class="btn btn-sm btn-white"&gt; &lt;input type="radio" id="option2" name="options"&gt;25&lt;/label&gt;
           &lt;label class="btn btn-sm btn-white"&gt; &lt;input type="radio" id="option3" name="options"&gt;50&lt;/label&gt;
         &lt;/div&gt;
       &lt;/div&gt;
       &lt;div class="col-sm-3 pull-right"&gt;
         &lt;div class="input-group"&gt;
           &lt;div class="input-group-addon"&gt;&lt;i class="fa fa-search"&gt;&lt;/i&gt;&lt;/div&gt;
             &lt;input type="text" class="form-control" placeholder="Search Host" ng-model="name"&gt;
           &lt;/div&gt;
         &lt;/div&gt;
       &lt;/div&gt;
       &lt;div class="table-responsive"&gt;
         &lt;table class="table table-striped table-bordered"&gt;
           &lt;thead&gt;
             &lt;tr&gt;
               &lt;td&gt;Select&lt;/td&gt;
                 &lt;td&gt;
                   &lt;a href="#" ng-click="sortType = 'name'; sortReverse = !sortReverse"&gt;
                        Hostname
                     &lt;span ng-show="sortType == 'name' &amp;&amp; !sortReverse" class="fa fa-caret-down"&gt;&lt;/span&gt;
                     &lt;span ng-show="sortType == 'name' &amp;&amp; sortReverse" class="fa fa-caret-up"&gt;&lt;/span&gt;
                   &lt;/a&gt;
                  &lt;/td&gt;
                  &lt;td&gt;
                    &lt;a href="#" ng-click="sortType = 'application'; sortReverse = !sortReverse"&gt;
                            Application
                      &lt;span ng-show="sortType == 'application' &amp;&amp; !sortReverse" class="fa fa-caret-down"&gt;&lt;/span&gt;
                      &lt;span ng-show="sortType == 'application' &amp;&amp; sortReverse" class="fa fa-caret-up"&gt;&lt;/span&gt;
                    &lt;/a&gt;
                    &lt;/td&gt;
                    &lt;td&gt;
                      &lt;a href="#" ng-click="sortType = 'environment'; sortReverse = !sortReverse"&gt;
                            Environment
                        &lt;span ng-show="sortType == 'environment' &amp;&amp; !sortReverse" class="fa fa-caret-down"&gt;&lt;/span&gt;
                        &lt;span ng-show="sortType == 'environment' &amp;&amp; sortReverse" class="fa fa-caret-up"&gt;&lt;/span&gt;
                      &lt;/a&gt;
                    &lt;/td&gt;
                &lt;/tr&gt;
              &lt;/thead&gt;
              &lt;tbody&gt;
                &lt;tr dir-paginate="host in newHosts | orderBy:sortType:sortReverse | filter:name | itemsPerPage: 10
          " pagination-id="host"&gt;
                    &lt;td&gt;&lt;input type="checkbox" ng-change="update(host.id)" ng-model="host_id"/&gt;&lt;/td&gt;
                    &lt;td&gt;{{host.name}}&lt;/td&gt;
                    &lt;td&gt;{{host.application}}&lt;/td&gt;
                    &lt;td&gt;{{host.environment}}&lt;/td&gt;
                  &lt;/tr&gt;
                &lt;/tbody&gt;
            &lt;/table&gt;
          &lt;/div&gt;
        &lt;/div&gt;
  </code></pre>
  
  <p>In the controller:</p>
  
  <pre><code>  $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);
     }
  </code></pre>