JSFiddle - React, Tailwind, and code Playground

HTML

<div ng-app="app">
    <div ng-controller="myCtrl">
        <div class="btn-group" ng-repeat="item in obj">
            <button type="radio" class="btn-group btn-xs btn-group-xs" ng-style="getMyStyle(item)" ng-click="UpdateColor(item)">{{item.name}} {{item.color}}</button>
        </div>
    </div>
</div>

CSS

.btn-group {
}

JavaScript

var app = angular.module('app', []);



app.controller('myCtrl', function ($scope) {


    $scope.invertColor = function (hexTripletColor) {
        var color = hexTripletColor;
        color = color.substring(1); // remove #
        color = parseInt(color, 16); // convert to integer
        color = 0xFFFFFF ^ color; // invert three bytes
        color = color.toString(16); // convert to hex
        color = ("000000" + color).slice(-6); // pad with leading zeros
        color = "#" + color; // prepend #
        return color;
    }

    $scope.obj = [{
        'id': 1,
            'color': '#ff0000',
            'name': 'final'
    }, {
        'id': 2,
            'color': '#ffff99',
            'name': 'start'
    }];

    $scope.UpdateColor = function (item) {

        item.color = $scope.invertColor(item.color);

    };

    $scope.getMyStyle = function (item) {
        var myStyle = {
            'background-color': item.color,
            color: $scope.invertColor(item.color)
        }
        return myStyle;
    }


});