JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.2/angular.js"></script>
<div ng-app="test" ng-controller="ctrl">
    <button ng-hide="finished" ng-click="getNext('one')">{{foodOne.name}}</button>
    <button ng-hide="finished" ng-click="getNext('two')">{{foodTwo.name}}</button>
    <button ng-hide="finished" ng-click="getNext('indiff')">Don't care!</button>
    
    <ul ng-show="finished">
        <li ng-repeat="item in foodArray">{{item.name}}: {{item.score}}</li>
    </ul>
</div>

JavaScript

angular.module('test', [])

    .controller('ctrl', ['$scope', function ($scope) {
        $scope.finished = false;
        $scope.foodArray = [
            {name: 'cherry', score : 0},
            {name: 'cabbage', score : 0},
            {name: 'orange', score : 0},
            {name: 'apple', score : 0},
            {name: 'banana', score : 0}
            ];
        
        $scope.foodOne = $scope.foodArray[0];
        $scope.foodTwo = $scope.foodArray[1];
        var x = 0;
        var y = 1;
        
        $scope.getNext = function(string) {
            if(string == 'one') {
                $scope.foodArray[x].score++;
            } else if(string == 'two') {
                $scope.foodArray[y].score++;                
            }
            if(y < $scope.foodArray.length -1) {
                y++;
                $scope.foodTwo = $scope.foodArray[y];
            } else if(x < $scope.foodArray.length -2) {
                x++;
                y = 1 + x;
                $scope.foodOne = $scope.foodArray[x];
                $scope.foodTwo = $scope.foodArray[y];
            } else {
                finish();   
            }
        }

        function finish() {
            $scope.foodArray.sort(function(a,b) {
                return b.score - a.score;  
            });
            $scope.finished = true;
        }
}]);