title: Pass value of checkbox and dropdown into same array
body: <p>I am currently working on creating a form that will allow a user to add a new capability to their collection based on the capabilities they select. This form is structured as a table that consists of checkboxs and dropdowns. The checkbox allows users to select what capability they wish to add and the drop down allows them to select their level of expertise with that capability. </p>
  
  <p><strong>Here is the HTML for the form:</strong></p>
  
  <pre><code>&lt;form class="listOfCaps"&gt;
      &lt;table&gt;        
          &lt;tbody&gt;
              &lt;tr ng-repeat-start="cap in capsarr"&gt;&lt;/tr&gt;
              &lt;tr ng-repeat-start="capname in filteredCaps track by capname.cid"&gt;&lt;/tr&gt;
                  &lt;td&gt;
                      &lt;input type="checkbox" name="selectedCaps[]" value="{{capname}}" ng-model="capname.selected" /&gt; &lt;span&gt;{{capname.capname}}&lt;/span&gt;
                  &lt;/td&gt;
                  &lt;td&gt;
                      &lt;span class="custom-dropdown custom-dropdown--white"&gt;
                          &lt;select 
                              class="custom-dropdown__select custom-dropdown__select--white"  
                              name = "selectedExp[]" 
                              ng-options = "exp.id as exp.level for exp in expertise" 
                              ng-model = "exp"&gt;
                              &lt;option value=""&gt;Select One&lt;/option&gt; 
                              &lt;/select&gt;
                          &lt;/span&gt;
                  &lt;/td&gt;
              &lt;tr ng-repeat-end="capname in cap.capabilities"&gt;&lt;/tr&gt;
              &lt;tr ng-repeat-end="cap in capsarr"&gt;&lt;/tr&gt;
          &lt;/tbody&gt;
      &lt;/table&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>What I want to do is have the value of the checkbox and the drop down populate an array or update the value in that array if changed. I have tried doing this and have only been able to get the checkbox values to populate in the array. I used a $watch for this so whenever it is checked it is added and when it is unchecked it is removed. I cannot figure out how to apply this to the drop down value in the same $watch so that these values are added to the same object in the array.</p>
  
  <p><strong>Here is the Controller code I have:</strong></p>
  
  <pre><code>$scope.expertise = [
      {id: '1', level: 'Certified'},
      {id: '2', level: 'Knowledgable'},
      {id: '3', level: 'Interested'}
  ];
  
  $scope.selection = [];
  
  $scope.$watch('filteredCaps | filter:{selected:true}', function (newValues) {
      $scope.selection = newValues.map(function (capname) {
          return {"capname" : capname.capname, "cid": capname.cid};
      });
  }, true);
  </code></pre>
  
  <blockquote>
    <p>Note: filteredCaps is an array stored in $scope.filteredCaps from a previous function. This array contains objects that consist of a capabilities name and id</p>
  </blockquote>