Angular Material buttons won't work when inside mat-radio-group - html

Question

I have a quiz application that displays multiple questions along with their respective answers. I am wanting to make it so each question has its own unique set of radio checkboxes so that I can easily bind that to a "Selected" property of an answer. When I try to do this it will let me select one radio button but then the other ones glitch out.
Video of problem. This seems to only happen when I put them inside of a mat-radio-group but I thought I had to use one to get different sets of radio buttons.
<!--start of exam -->
<mat-step [stepControl]="examForm">
<ng-template matStepLabel>
<span *ngIf="worksheetComplete"><span *ngIf="programLocked">Edit </span>Exam</span>
<span *ngIf="!worksheetComplete" class="text-red-400"><span *ngIf="programLocked">Edit </span>Exam (Incomplete)</span>
</ng-template>
<div *ngIf="examAttemptMap.passing" fxLayout="column" fxLayoutGap="24px">
<span *ngIf="sharedService.tablet" class="f-s-18">Exam</span>
<div fxLayout="row" fxLayout.lt-md="column" fxLayoutGap="24px">
<span fxFlex="70" class="f-s-20">You have already passed the exam. Please continue through the application.</span>
</div>
</div>
<div *ngIf="!examAttemptMap.passing" fxLayout="column" fxLayoutGap="24px">
<span *ngIf="sharedService.tablet" class="f-s-18">Exam</span>
<div fxLayout="row" fxLayout.lt-md="column" fxLayoutGap="24px">
<span fxFlex="70" class="f-s-20">Please answer the following questions. You may attempt this as many times as you would like.
</span>
</div>
<mat-radio-group formControlName="{{question.text}}" *ngFor="let question of examAttemptMap.questions; let elementIndex = index">
<!--Questions-->
<div fxLayout="column" fxFlex="100" >
<!--Core Elements-->
<div fxLayout="row" fxLayout.lt-md="column" fxLayoutGap="8px" fxLayoutAlign="start center" fxLayoutAlign.lt-md="" style="padding-bottom: 1%" >
<span><strong>({{elementIndex + 1}})</strong></span>
<span>{{question.text}}</span>
</div>
<!--Answers-->
<div fxLayout="row">
<span fxFlex="5"></span>
<div fxLayout="column" fxFlex="80">
<div fxLayout="column" *ngFor="let answer of question.examAnswers; let subSectionIndex = index" fxLayoutGap="8px">
<div fxLayout="row" fxLayout.lt-md="column" fxLayoutGap="8px" fxLayoutAlign="start center" fxLayoutAlign.lt-md="">
<mat-radio-button value="true"></mat-radio-button>
<mat-card [ngStyle]="{'background-color':(answer.selected == true) ? '#53a66c' : '#00559525' }" (click)="highlightCard(answer, question.examAnswers)" [id]="answer.selected" class="card" >
<span ><strong>({{getIndexLetter(subSectionIndex, false)}})</strong></span>
<span style="padding-left: 1%">{{answer.text}}</span>
</mat-card>
</div>
</div>
</div>
</div>
</div>
</mat-radio-group>
</div>