JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.7/angular.js"></script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<div ng-app="myApp" ng-controller="DemoController">
    <table class="table">
        <tr class="list" ng-repeat="item in items" ng-mouseenter="selected.id = item.id">
            <td class="buy">{{item.name}}</td>
            <td><a href="" class="buy-button" ng-class="selected.id === item.id[item.test]">Купить</a></td>
        </tr>
    </table>
</div>

CSS

.buyButtonSelected {
    background: greenyellow;
    
    
}

.green{
  background: green; 
}

.red{
  background: red;
}


.blue {
  background: blue;
}

JavaScript

angular.module('myApp', []);

angular.module('myApp').controller('DemoController', function ($scope) {
    $scope.items = [
        {id: 1, name: 'товар 1', test: 'green'}, 
        {id: 2, name: 'товар 2', test: 'red'},
        {id: 3, name: 'товар 3', test: 'red'}, 
        {id: 4, name: 'товар 5', test: 'blue'}
        
    ];
    
    $scope.selected = {
    	id: 3 
    }
});