JSFiddle - React, Tailwind, and code Playground

HTML

<div ng-app="TestApp">
  <div ng-controller="TestController">
    <p>Items:</p>
    <ul class="choiceProducts">
      <li ng-repeat="i in items" ng-click="itemClick(i.class)">{{ i.name }}</li>
    </ul>
    <p>Search: </p>
    <ul class="listSearch">
      <li ng-repeat="i in searchItems | filter: {class: filterClass}">{{ i.name }}</li>
    </ul>
  </div>
</div>

JavaScript

angular.module('TestApp', []).controller('TestController', ['$scope', function($scope) {
	$scope.items = [
      {kkal:150, class: 'milk', name:'Full-fat milk', value : 100},
      {kkal:102, class: 'meatChicken', name:'Low fat milk (1%)', value : 100 }
  ];
  
  $scope.searchItems = [
  	{name: 'Item 1', class: 'milk'},
    {name: 'Item 2', class: 'meatChicken'},
    {name: 'Item 3', class: 'milk'},
    {name: 'Item 4', class: 'meatChicken'},
    {name: 'Item 5', class: 'milk'},
    {name: 'Item 6', class: 'meatChicken'}
  ];
  
  $scope.itemClick = function(c) {$scope.filterClass = c; }
}]);