javascript - Angular - Toggling element class inside an ng-repeat based on radio input selection -

i'm using angular write questionnaire questions retrieved resource. based on design, have toggle custom icon instead of standard radio button icon. solution i've come hide radio input (using opacity/filter) , absolutely position div on input same dimensions radio input. clicking radio input toggle background image custom icon. unfortunately, has work in ie8 conventional css :checked tactics out.

the question blocks this:

    <h2>{{ quiz.questions[asked].questiontext }}</h2>     <ul>         <li ng-repeat="answer in quiz.questions[asked].answers">             <label>                 <input type="radio" ng-model="$parent.picked" name="answer" value="{{ answer.answerid }}"/>                 <div class="radio-mimic {{ checked }}"></div>                 {{ answer.answertext }}.             </label>         </li>     </ul>     <a class="btn" ng-click="submitanswer()" ng-show="picked != null">         submit     </a> 

here stripped down version of controller reference:

app.controller('quizcontroller', function($scope, quiz) {     $scope.quiz = quiz.get({quizid = x}); // angular $resource     $scope.picked = null;     $scope.asked = 0;     $scope.answers = [];      $scope.submitanswer = function() {         $scope.asked++;         $scope.picked = null;          // push answer selected onto answers array         // check if # asked == number of questions in quiz determine flow         // if question, $scope.quiz = quiz.get({quizid = newquizid});         // else show results         }; }); 

for each answer receive question, i'm outputting radio input , div icon wrapped in label answer text. clicking on answer change value of 'picked' in parent scope of repeat, displaying submit button when user has picked answer.

the problem i'm having how handle logic of {{ checked }} div class show when input selected. when click on input, div within scope needs class called 'checked'. additionally, if click on different answer outside scope, other scopes in ng-repeat need know in order reset 'checked' values null or ''. know value have go parent scope 'picked' overlap of parent , ng-repeat scopes causing me confusion. can enough jquery wanted keep purely angular part of learning.

i found solution issue using ng-class , expression compare parent scope's 'picked' answerid of inner scope:

<div class="radio-mimic" ng-class="{checked: $parent.picked == answer.answerid}"></div>