How to add dynamic fields with angularjs - angularjs

Question

I am working on a QA app where i need to add multiple answers to a question as per requirement dynamically. for this in my form I have a question field , an answer field and a Boolean correct field to tell if the answer choice is correct or not. I have given a button add another answer which create a new answer field when clicked.I want to give ng-model name dynamically so that I can easily retrieve the value of ng-model.
For this I have created a controller which is like
app.controller('questionsCtrl', function ($scope) {
$scope.question={};
$scope.question.answers=[];
$scope.answer_choices=[];
var choice=1;
$scope.addAnswerField=function(){
$scope.answer_choices.push(choice);
choice++;
}
$scope.addAnswerChoice=function(){
$scope.question.answers.push({});
}
});
My HTML code is:
<div class="container">
<form ng-submit="createQuestion()">
<textarea class="form-control" ng-model='question.question_text'></textarea>
<textarea class="form-control" ng-model="question.answer_choice_1"></textarea>
<label class="checkbox-inline">
<input type="radio" name="correct" ng-model="question.correct_1" />
Correct
</label>
<div ng-repeat="choice in answer_choices">
<textarea class="form-control" ng-model="question.answers.$index[answer]">
</textarea>
<label class="checkbox-inline">
<input type="radio" name="correct" ng-model = "question.answers.$index[correct]" />
</label>
</div>
<button class='btn btn-primary' type="submit">Submit</button>
</form>
<button class="btn btn-default" ng-click="addAnswerChoice()">Add Answer</button>
</div>
I want to do something like when i add a new answer choice a new empty object is pushed in the question.answers array and this objects first key answer hold the value of question field and second key ` like
question.answers=[
{'answer':'',correct:''},
{'answer':'',correct:''},
{'answer':'',correct:''},
{'answer':'',correct:''},
]
Suggest me how can i do this . There is only one error that using $index i am unable to assign value to the array object at the same index in question.answers array.
Or if there is any other better way suggest me.
Help will be appreciated.

Answer 1

You are making just a small mistake. Correct your syntaxes and it will work fine
replace your ng-repeat div with this code
<div ng-repeat="choice in choices">
<label class="checkbox-inline"> Choice</label>
<textarea class="form-control" ng-model="question.answers[$index].answer">
</textarea>
<label class="checkbox-inline">
<input type="radio" name="correct" ng-model="question.answers[$index].correct_answer" value="1" />
Correct
</label>
</div>
And assign values to the radio buttons or these will not show in your object.