How to get selected value from ng-option inside an ng-repeat - angularjs

Question

In my controller I loop through the questions in a questionnaire:
for (var j = 0; j < s.Questions.length; j++) {
var q = s.Questions[j];
var aq = datacontext.getAnsweredQuestion(propertySurvey.ID, q.ID);
if (q.QuestionType === 'SingleAnswer') {
q.dropdown = true;
q.selectedOption = aq.ActualAnswers.length > 0 ?
aq.ActualAnswers[0].AnswerID : null;
q.optionChanged = function () {
var debug = q.selectedOption; //ERROR - this is undefined
aq.toggleAnswer(q.selectedOption);
}
}
//etc
}
In my view I also loop through the questions:
<div class="card" ng-repeat="q in s.Questions">
<div class="item item-divider">{{q.Text}}</div>
<div class="item" ng-if="q.dropdown">
<select ng-model="q.selectedOption"
ng-options="va.AnswerID as va.Text for va in q.ValidAnswers"
ng-change="q.optionChanged()">
<option>--Select--</option>
</select>
</div>
</div>
When viewed in the browser, the correct selectedOption is displayed, and the q.optionChanged() function is called. But inside that function, q.selectedOption is undefined
EDIT
This function appears to work. But I can't explain why!
q.optionChanged = function () {
var debug = q.selectedOption;
var answerid = this.selectedOption;
aq.toggleAnswer(answerid);
}

Answer 1

The reason is because you are creating a function with closure inside a loop, which causes this unintuitive behavior. Read: Creating closures in loops: A common mistake
What ends up happening is that the inner function captures the last q in the loop, for which (for some reason, perhaps not shown in code here), q.optionChanged is undefined.
In contrast, this is bound to the right q as supplied by the expression in ng-change="q.optionChanged()".
To fix, use a function generator to create a function for each loop iteration, like so:
for (var j = 0; j < s.Questions.length; j++) {
var q = s.Questions[j];
var aq = datacontext.getAnsweredQuestion(...);
// ...
q.optionChanged = makeOptionChangeFn(q, aq)
// ...
}
function makeOptionChangeFn(q, aq){
return function(){
aq.toggleAnswer(q.selectedOption);
}
}
Using this would have worked if you only needed to reference the right q, but you also need aq, so a function generator is necessary.

Answer 2

In order to auto select the option from the controller, the ng-model must hold a reference to the array item. Assign q.selectedOption the whole item from the aq.ActualAnswers. You will need to refactor your comprehension expression.
// in the controller
q.selectedOption = aq.ActualAnswers.length > 0 ?
aq.ActualAnswers[0] : null;
// in the view
ng-options="va as va.Text for va in q.ValidAnswers"
This has caused me pain in the past. Make sure you read the documentation carefully:
https://docs.angularjs.org/api/ng/directive/ngOptions