JSFiddle - React, Tailwind, and code Playground

HTML

<div ng-app="myApp">
  <div ng-controller="MainController">
    (Answer is Air)
    <ul id="options">
      <li ng-repeat="option in options" id="answer_{{$index}}" ng-class="option.class">
        <!-- <img data-id="{{$index}}" ng-src="{{img[$index]}}" ng-click="checkAnswer({{$index}})"> -->
        <a ng-click="checkAnswer(option)">{{option.value}}</a>
      </li>
    </ul>
    <br/>
    score: {{score}}
  </div>
</div>

CSS

.correct {
  border: 1px solid green;
}

.wrong {
  border: 1px solid red;
}

JavaScript

angular.module('myApp',[])
.controller('MainController', ['$scope', function($scope) {

  $scope.options = [
    {key: 1, value: "Earth", class: ""},
    {key: 2, value: "Fire", class: ""},
    {key: 3, value: "Air", class: ""},
    {key: 4, value: "Water", class: ""},
  ];

  $scope.answer = 3;
  $scope.score = 0;
  $scope.checkAnswer = function (answer) {    
    if(answer.key === $scope.answer){
      answer.class="correct";
      $scope.score++;
    } else {
      answer.class="wrong";
    }
    // $scope.nextQuestion();
  };




}]);