Angular-基于单选输入选择在ng重复中切换元素类

我正在使用Angular编写一份调查问卷，从资源中检索问题。根据设计，我必须切换一个自定义图标，而不是标准的单选按钮图标。我提出的解决方案是隐藏无线电输入（使用不透明度/过滤器），并在输入上绝对放置一个div，其尺寸与无线电输入相同。单击单选输入将切换作为自定义图标的背景图像。不幸的是，这必须在IE8中工作，所以传统的CSS:检查策略已经过时了。

问题块看起来像这样：

    <h2>{{ quiz.questions[asked].questionText }}</h2>
    <ul>
        <li ng-repeat="answerswer in quiz.questions[asked].answers">
            <label>
                <input type="radio" ng-model="$parent.picked" name="answerswer" 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>

以下是我的控制器的精简版本供参考：

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 to determine flow
        // If another question, $scope.quiz = Quiz.get({quizID = newQuizID});
        // Else show results    
    };
});

对于我收到的每个问题的答案，我都会输出单选输入和div图标，该图标被包装在带有答案文本的标签中。单击答案将更改重复的父范围中"pick"的值，因此仅当用户选择了答案时才显示提交按钮。

我遇到的问题是如何处理div类的｛｛checked｝｝的逻辑，以便在选择输入时显示。当我点击一个输入时，其作用域内的div需要获得一个名为"checked"的类。此外，如果我单击该范围之外的其他答案，ng repeat中的其他范围需要知道，以便将其"已检查"值重置为null或"。我知道有些值必须进入父作用域，比如"pick"，但父作用域和ng重复作用域的重叠给我带来了一些困惑。我可以用jQuery很容易地做到这一点，但我想把它作为学习的一部分。