JSFiddle - React, Tailwind, and code Playground

HTML

<div ng-app="test" ng-controller="test" class="tab-btn" >
        <input ng-repeat="button in buttons" type="button" ng-class="{'active': button.active}"   ng-click="buttonClicked($index)" ng-disabled="button.disabled" value="{{button.title}}">
            <p>toggle disabled</p>
            <button ng-click="buttons[0].disabled = !buttons[0].disabled">Toggle</button>
</div>

CSS

.active {
    background-color: red;
}

JavaScript

var app = angular.module('test', [])
.controller('test', function($scope) {
    $scope.buttons = [
        {title: 'button one', active: false, disabled: true},
        {title: 'button two', disabled: false, enabled: true},
        {title: 'button three', active: true, disabled: false}
    ];

    $scope.buttonClicked = function (index) {
        //$index is a variable angular exposes in ng-repeats it is the index of the current element.
    	$scope.buttons.forEach(function(b){
           b.active = false; 
        });
        
        $scope.buttons[index].active = true;
    };
});