AngularJS:重置angular.元素CSS改变

我有一系列的按钮，我正在使用ng-repeat显示。按钮代表一组旋转问题的答案。如果他们单击正确答案按钮，我将更改按钮的样式并禁用它。所有这些都运行良好。然而，当我试图允许用户点击"重置"按钮时，它运行ng-init函数来重置所有变量值等，样式不是更新或刷新，而是保持相同的状态。参见代码片段:

<div class="container" ng-app="MyApp" ng-controller="MyCtrl" ng-init="init()">
  <div>
    <div class="timer">
      Timer: <span ng-bind="counter"></span>
    </div>
    <br>
    <span>
      <button class="btn btn-lg btn-primary" ng-click="startCountdown()" ng-disabled="quizStart">Start</button>
      <button class="btn btn-lg btn-primary" ng-click="init()">Reset</button>
    </span>
  </div>
  <br>
  <fieldset ng-disabled="counterStop">
    <div ng-show='quizStart' ng-disabled="counterStop">
      <h3> {[{ question }]}: </h3>
      <br><br>
      <span class="child" ng-repeat="choice in choices">
        <button class="btn btn-lg btn-info my-btn" ng-click="clickThis($event, choice)"> {[{ choice }]} </button>
      </span>
    </div>
  </fieldset>
</div>

控制器:

var app = angular.module('MyApp', []);
var MyCtrl = function($scope, $timeout) {
  $scope.init = function() {    
    $scope.counter = 10;
    $scope.counterStop = true;
    $scope.quizStart = false;
    $scope.questionNum = 0;
    $scope.questions = [
      ['Here is question 1',
        [],
        {
          answer1: false,
          answer6: false
        }
      ],
      ['Here is question 2',
        [],
        {
          answer4: false,
          answer2: false
        }
      ],
      ['Here is question 3',
        [],
        {
          answer3: false,
          answer5: false
        }
      ]
    ];
    // set initial question and choices
    $scope.question = $scope.questions[$scope.questionNum][0];
    $scope.choices =     ['answer1','answer2','answer3','answer4','answer5','answer6'];
  }
  countdown = function() {
    $scope.counter--;
    if (!$scope.counterStop && $scope.counter > 0) {
       $timeout(countdown,1000);
     } else if ($scope.counter === 0) {
       $scope.counterDone = true;
       $scope.counterStop = true;
     }
   };
  $scope.startCountdown = function() {
    $scope.counterStop = false;
    $scope.quizStart = true;
    $timeout(countdown, 1000);
  };
   $scope.checkAnswerStatus = function() {
    for (var value in $scope.questions[$scope.questionNum][2]) {
      if ($scope.questions[$scope.questionNum][2][value] === false) return false;
    }
    return true;
  }
  $scope.clickThis = function(event, answer) {
    var correctAnswer = false;
    for (var value in $scope.questions[$scope.questionNum][2]) {
      if (answer === value) {
        $scope.rightAnswers += 1;
        element = angular.element(event.target);
        element.css({'color': 'white', 'background-color': 'green'});
        element.prop('disabled', true);
        $scope.questions[$scope.questionNum][2][value] = true;
        correctAnswer = true;
      }
    }
    if (correctAnswer === false) {
      $scope.wrongAnswers += 1;
      element = angular.element(event.target);
      element.css({'color': 'white', 'background-color': 'red'});
    }
    if ($scope.checkAnswerStatus()) {
      // make sure to check if there are any more questions, and if not, elegantly end
      if ($scope.questionNum === $scope.questions.length-1) {
        $scope.counterStop = true;
      }
      else {
        $scope.questionNum += 1;
        $scope.question = $scope.questions[$scope.questionNum][0];
      }
    }
  }  
};
app.controller('MyCtrl', ['$scope', '$timeout', MyCtrl]);

在ClickThis函数中，我禁用按钮并根据正确与否更改样式。但是，当我再次调用init()时，在用户单击reset之后，样式更改仍然存在。

是否有办法让它刷新或至少获得访问这些元素再次(即my-btn类)重新设置样式?

谢谢!