title: How to get only selected checkboxes in angularjs?
body: <p>I have <code>ng-repeat</code>ed data, and am trying to get only the ones the user has selected. I'm not sure how to do it though, this is what I have:</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div data-ng-controller="MyCtrl"&gt;
      &lt;ul&gt;
          &lt;li data-ng-repeat="record in records"&gt;
              &lt;input type="checkbox" ng-model="record.Id"&gt; {{record.Id}}
          &lt;/li&gt;
      &lt;/ul&gt;
      &lt;a href="javascript:;" data-ng-click="ShowSelected()"&gt;Show Selected&lt;/a&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>JS:</p>
  
  <pre><code>function MyCtrl($scope) 
  {
      $scope.records = [ { "Id": 1 }, { "Id": 2 }, { "Id": 3 } ];
      $scope.ShowSelected = function() 
      {
          // how can I get only the selected records here ?
      }
  }
  </code></pre>
  
  <p>I did get it working one way - by adding a <code>isSelected:false</code> property to each object and changing the <code>ng-model</code> of the checkbox to <code>record.isSelected</code>, I can then filter on that in the <code>ShowSelected</code> function. This seems inefficient though, I don't want to be adding extra properties to the model if can avoid it.</p>
  
  <p>Is there a better way ?</p>