title: AngularJS data binding checkboxes to object if checked
body: <p>I have a JSON object which I am repeating with ng-repeat, the keys are strings, and the values are an array. I am listing each of the values as a checkbox. I would like to create a second object which contains a list of only the checkboxes that are checked. I want to preserve the structure of the object with keys and values.</p>
  
  <p>I'm unsure how to bind this to a model properly so that the structure is preserved.</p>
  
  <p><a href="http://jsfiddle.net/NDFc2/3/" rel="nofollow">http://jsfiddle.net/NDFc2/3/</a></p>
  
  <p>This is my HTML</p>
  
  <pre><code>&lt;h3 &gt;Dynamic data binding in AngularJS&lt;/h3&gt;
  &lt;div ng-app ng-controller="Controller" class="container"&gt;
      &lt;h4&gt;Inputs&lt;/h4&gt;
      &lt;ul ng-repeat="(parent, values) in inputs"&gt;
          &lt;span&gt;{{parent}} : &lt;/span&gt;
          &lt;li ng-repeat="value in values"&gt;&lt;label&gt;{{value}}
              &lt;input type="checkbox" ng-model="output[parent]" ng-checked="output[parent]" value="value" &gt;                               
              &lt;/input&gt;&lt;/label&gt;
          &lt;/li&gt;
      &lt;/ul&gt;    
  
      &lt;h4&gt;Outputs&lt;/h4&gt;
      &lt;ul ng-repeat="(key,value) in inputs"&gt;
          &lt;li&gt;
              {{key}} : {{output[key]}}
          &lt;/li&gt;
      &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>and my JS</p>
  
  <pre><code>function Controller($scope) {
      $scope.output = {};
      $scope.inputs = {'category': ['one','two','three'], 'color':['blue','green']};
  }
  </code></pre>
  
  <p>Is there some simple way to do this? I have the feeling that I'm missing something minor and this will all work nicely.</p>