JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.1/angular-route.js"></script>
<div ng-app="app" ng-controller="dummy">
  <ul class="w3-ul">
    <li ng-repeat="x in products" ng-click="toggleSelection(x)" ng-style="{ 'color' : (x.alreadyTook) ? 'red' : 'black' }">{{x.item}}
    </li>
  </ul>
</div>

JavaScript

var app = angular.module("app", []);
app.controller('dummy', function($scope) {
  $scope.products = [{
    item: "Milk",
    alreadyTook: false
  }, {
    item: "Bread",
    alreadyTook: false
  }, {
    item: "Cheese",
    alreadyTook: false
  }];
$scope.products[0].alreadyTook=true;
  $scope.toggleSelection = function(itemObject) {
    itemObject.item = itemObject.item;
    itemObject.alreadyTook = !itemObject.alreadyTook;
  };
});