AngularJs, change color to a single item in a (repeat)list

I'm new to angularjs. This is my issue:

This is my data:

$scope.products = [
                       {item: "Milk", alreadyTook: false},
                       {item: "Bread", alreadyTook: false},
                       {item: "Cheese", alreadyTook: true}
                      ];

This is my controller:

var mymodal = angular.module('app', []);
mymodal.controller("myCtrl", function($scope) {

    $scope.toggleSelection = function(itemObject) { 
        itemObject.item=itemObject.item;
        itemObject.alreadyTook=!itemObject.alreadyTook;
    };
});

This is my html:

<div ng-app="app" ng-cloak ng-controller="myCtrl">

<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>

I need to set/unset the foreground color of the single li text selected(by mouse click); I don't want to use pure js or jquery. Thanks.