multiple radio button not selecting evenly in a group of four radio button

In an angular snippets, a group of radio buttons is not clicking evenly. The number of radio buttons with the name is four but only the first and the last radio buttons is clicking. Below is my snippet

<div class="grouped fields">
                <label>Please confirm your company type by ticking the appropriate 
                  box below (Only one box must be ticked).</label>
                <div class="field">
                  <div class="ui radio checkbox">
                    <input [(ngModel)]="aData.type"  
                    type="radio" name="typeC" checked="checked" id="100" [value]="true">
                    <label for="100">A OPTION</label>
                  </div>
                </div>
                <div class="field">
                  <div class="ui radio checkbox">
                    <input [(ngModel)]="aData.type" 
                    type="radio" name="typeC" id="101" [value]="false">
                    <label for="101">B OPTION</label>
                  </div>
                </div>
                <div class="field">
                  <div class="ui radio checkbox">
                    <input [(ngModel)]="aData.type"
                    type="radio" name="typeC" id="102" [value]="false">
                    <label for="102">C OPTION</label>
                  </div>
                </div>
                <div class="field">
                  <div class="ui radio checkbox">
                    <input [(ngModel)]="aData.type" 
                    type="radio" name="typeC" id="103" [value]="false">
                    <label for="103">D OPTION </label>
                  </div>
                </div>

Please how can I ensure that only one is ticked at choice

Source: Angular Questions