Radio Buttons in Dynamicaly Generated Angular Form

Issue

https://gist.github.com/djdaniels90/948704c58242c4bb08b5

I am having trouble with a dynamically generated quiz structure. I am aware of $parent. scope. I have attempted to implement it but the form is still not working as desired. I have linked the gist site; any help on this would be greatly appreciated.

Each question is a form in itself and the entire quiz is a form of question forms. Each question form contains x number of possible answers. Furthermore, a quiz can have y number of questions. Therefore we have a loop within a loop; ie: we are creating some nested child scopes.

Ultimately, each question can only have one answer, ie: only one checkbox can be clicked for each subforms. I can rather easily hack together a method using pure JS or jquery to grab the form elements but I know there is a way to do this in Angular, I am pretty close I believe but can't get the last little bit. Ideally, I would like either the questions to update corresponding models, which could be created in a array within the controller. Or the form submit action to upload the entire quiz data.

Any help on where I am going wrong would be great.

Solution

You are missing one attribute and need a variable for assigning answers to.

The NAME attribute takes care of the grouping and the model cannot be the question object itself, but rather an attribute of the question itself.

<input type="radio" name='{{question.question}}' ng-value="{{answer}}" ng-model="question.answer">

Here's a working version: http://plnkr.co/edit/fACdq8DGvJel9An87GyA?p=preview

Answered By - SoluableNonagon