Radio button in polymer already selected - radio-button

Question

I'm loading a radio-button-group in polymer with a set of 4 radio buttons as answer options to a question. I have 4 questions. Now if I select an option in the first question and select next(go to the next question), the second question has its option already selected(same as the first question). Why is this happening?
<paper-radio-group>
<template is="dom-repeat" items=[[_calculateQuestionOptions(index)]]>
<paper-radio-button name="{{_calculateId(index)}}">
[[item.questionOption]]
</paper-radio-button><br>
</template>
</paper-radio-group>
CODE for next and prev operations
next() {
if (this.index < this.repos.length-1) {
this.index +=1;
}
}
prev() {
if (this.index>0) {
this.index -= 1;
}
}
To solve this issue. I wanted to add all the answers to an array and clear the selection as soon as the next button is click. Somthing like this.
next() {
var questionId = this.repos[this.index].questionId;
if (Polymer.dom(this.root).querySelector("paper-radio-group")) {
this.answers[questionId] = Polymer.dom(this.root).querySelector("paper-radio-group").selected;
Polymer.dom(this.root).querySelector("paper-radio-group").selected = null;
}
if (this.index < this.repos.length-1) {
this.index +=1;
}
questionId = this.repos[this.index].questionId;
if (this.answers[questionId] !== null) {
Polymer.dom(this.root).querySelector("paper-radio-group").selected = this.answers[questionId];
}
}
Is this the only way or is there a better way to do this.

Answer 1

Why is this happening?
It happens because dom-repeat reuse old elements when it update (for better performance, re-create DOM is slow). Its means only bound data in that scope will be updated.
Is this the only way or is there a better way to do this.
I think your way is already fine but you still can reduce some code by using advantage of Polymer like:
Static node map here
Complex observers here
My example see here
Thanks.