title: How to bind to complex objects with radios and checkboxes in AngularJS?
body: <p>Say we have a set of projects exposed via the Project service:</p>
  
  <pre><code>{ id: '123', name: 'Yeoman', watchers: '1233', ... }
  { id: '123', name: 'Grunt', watchers: '4343', ... }
  </code></pre>
  
  <p>Then, we have a form to choose your favorite project:</p>
  
  <pre><code>Select favorite project:
  %label.radio(ng-repeat="project in Project.query()")
    %input(type="radio" ng-model="data.favoriteProject" value="{{project.id}}") {{project.name}}
  </code></pre>
  
  <p>This sets choices.favoriteProject to the id value of the chosen project. Often, we need to access the related object, not just the id:</p>
  
  <pre><code>John's favorite project:
  {{Project.get(data.favoriteProject).name}}
  </code></pre>
  
  <p>What I'm looking for is a way to bind the radios and checkboxes straight to the object itself, not the id, so we could do</p>
  
  <pre><code>John's favorite project:
  {{data.favoriteProject.name}}
  </code></pre>
  
  <p>instead. This is possible with select directive via ng-options, but how can we do this with radios and checkboxes? I'd still like to use the ids for matching instead of references, if possible.</p>
  
  <p>To clarify, here's an example what I'm looking for</p>
  
  <pre><code>Select favorite project:
  %label.radio(ng-repeat="project in Project.query()")
    %input(type="radio" ng-model="data.favoriteProject" value="{{project}}" ng-match="id") {{project.name}}
  </code></pre>
  
  <p>It says: "Please bind data.favoriteProject to the actual project object and use the id to check if they match (instead of references)".</p>