Combine checkbox and radio's with multiple angular models

Question

I'm building a configurator tool where people can configure their own kitchen and I need some help with the logics here.

Let's say people can select a sink: When a checkbox is checked, a list appears with multiple sinks (radio buttons). By default, when the checkbox is checked, the first radio button should be checked as well.

I want several things to happen here:

1) When the checkbox is checked, the radio buttons should appear. The first radio button should be checked by default and the value of this json object should be stored in formData.sink.

2) The price of the selected sink should be saved in prices[x].price.

3) When the checkbox get unchecked, the value of prices[x].price should be set to 0 and the formData.sink object should be empty.

Here's my HTML. In my controller I don't have any functions yet.

<tr class="tr-border-top">
  <td colspan="2"><input type="checkbox" ng-model="sink">Sink</td>
  <td>{{ prices[5].price  | currency:"€":0}},-</td>
</tr>
<tr ng-show="sink">
  <td colspan="3">
     <ul>
        <li ng-repeat="node in nodes | filter:{type:'sink'}">
           <label>
              <input type="radio" name="sink" class="form-control" ng-model="formData.sink" ng-value="node" ng-init="$index==0?(formData.sink=node):''">
              {{ node.title}}
           </label>
        </li>
     </ul>
   </td>
 </tr>

Answer 1

Well, seems like you didn't try much yourself. I would go for adding ng-change and then call a function that sets the values as you want them

<input type="checkbox" ng-model="sink" data-ng-change="onSinkChanged(sink)">

$scope.onSinkChanged = function(sink) {
    // your logic here
}

and in that function you can set the correct values and if its unchecked, reset the values to 0 or undefined. Try some of that yourself and if you get stuck specify your exact problem :)