ng-checked单选按钮

Question

I'm making a quiz app.To show the progress of the quiz there is question pallette of small boxes which turn yellow when users click on any of the the radio button to show that the user has attempted the question.Along with this there is a button to move to the previous question.To show the users initial answer I have used ng-checked directive with some logic in the controller.Everything is working fine but after attempting a question when I move to the next question and click on the same option as the previous question then the question pallette box does not turn yellow.But when I click on the other option it works fine.

.html

<div  class="questionsBox" >
        <div class="questions">{{liveCtrl.questions[liveCtrl.activeQuestion].question}}</div>
        <ul class="answerList">
            <li>
                <label>
                    <input data-id="{{liveCtrl.activeQuestion}}" type="radio" ng-checked="liveCtrl.useranswers[liveCtrl.activeQuestion].q===1" ng-click="liveCtrl.answers(liveCtrl.activeQuestion,1)" name="answerGroup" value="0" >&nbsp;{{liveCtrl.questions[liveCtrl.activeQuestion].optionA}}</label>
            </li>
            <li>
                <label>
                    <input data-id="{{liveCtrl.activeQuestion}}" type="radio" ng-checked="liveCtrl.useranswers[liveCtrl.activeQuestion].q===2" ng-click="liveCtrl.answers(liveCtrl.activeQuestion,2)" name="answerGroup" value="1" >&nbsp;{{liveCtrl.questions[liveCtrl.activeQuestion].optionB}}</label>
            </li>
            <li>
                <label>
                    <input data-id="{{liveCtrl.activeQuestion}}" type="radio" ng-checked="liveCtrl.useranswers[liveCtrl.activeQuestion].q===3"  ng-click="liveCtrl.answers(liveCtrl.activeQuestion,3)" name="answerGroup" value="2" >&nbsp; {{liveCtrl.questions[liveCtrl.activeQuestion].optionC}}</label>
            </li>
            <li>
                <label>
                    <input data-id="{{liveCtrl.activeQuestion}}" type="radio" ng-checked="liveCtrl.useranswers[liveCtrl.activeQuestion].q===4"  ng-click="liveCtrl.answers(liveCtrl.activeQuestion,4)" name="answerGroup" value="3" >&nbsp; {{liveCtrl.questions[liveCtrl.activeQuestion].optionD}}</label>
            </li>
        </ul>
        <div class="questionsRow">
                <button  ng-disabled="liveCtrl.questions.length==liveCtrl.activeQuestion+1" class="subques btn btn-lg btn-secondary"  ng-click="liveCtrl.nextQuestion()">Save & Next</button>
                <button  ng-click="liveCtrl.prevQuestion()" ng-disabled="liveCtrl.activeQuestion == 0" class="subques btn btn-lg btn-secondary" >Previous</button>
        </div>             
    </div>

//Question Pallete

 <div class="question-pallete">
    <div  id="{{$index}}"  ng-repeat="question in liveCtrl.questions" class="square">
       <a ng-click="liveCtrl.gotoQues($index)">
          {{$index + 1}}
        </a>
</div>

//jquery to give color to the boxes

<script type="text/javascript">
    $(document).on('click',"input[name='answerGroup']",function(){
        var qid=$(this).data('id');
        console.log(qid);
        $('#'+qid).addClass('box-color');
    });

</script>

Controller functions

this.nextQuestion=()=>{
    live.activeQuestion++;
    //console.log(live.activeQuestion);
};
this.prevQuestion=()=>{
    live.activeQuestion--;
    //console.log(live.activeQuestion);
};
this.gotoQues=(qno)=>{
    live.activeQuestion=qno;
}
this.answers=(qid,option)=>{
    //console.log(qid);
    live.useranswers[qid]={
        q:option

};

When I'm tried to console qid in jquery part it outputs the same qid for the same option in the next question but it is not the case for other options.I think "data-id" in html is not updating for that case.Sorry If I was not able to explain it properly.

Answer 1

I find 2 issues with your implementation.

1. I don't see ng-model in any of your input field.

2. Why don't you use ng-class instead of using jquery to get the id and add class?

    <label ng-class="val==0 ? 'highlight':''"> <input type="Radio" ng-model="val" ng-value="0">Option A</label> 

Here is the jsfiddle link