title: AngularJs, change color to a single item in a (repeat)list
body: <p>I'm new to angularjs. This is my issue:</p>
  
  <p>This is my data:</p>
  
  <pre><code>$scope.products = [
                         {item: "Milk", alreadyTook: false},
                         {item: "Bread", alreadyTook: false},
                         {item: "Cheese", alreadyTook: true}
                        ];
  </code></pre>
  
  <p>This is my controller:</p>
  
  <pre><code>var mymodal = angular.module('app', []);
  mymodal.controller("myCtrl", function($scope) {
  
      $scope.toggleSelection = function(itemObject) { 
          itemObject.item=itemObject.item;
          itemObject.alreadyTook=!itemObject.alreadyTook;
      };
  });
  </code></pre>
  
  <p>This is my html:</p>
  
  <pre><code>&lt;div ng-app="app" ng-cloak ng-controller="myCtrl"&gt;
  
  &lt;ul class="w3-ul"&gt;
      &lt;li ng-repeat="x in products" ng-click="toggleSelection(x)" ng-style="{ 'color' : ({{x.alreadyTook}}) ? 'red' : 'black' }"&gt;{{x.item}}
      &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p></p>
  
  <p>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. </p>