JSFiddle - React, Tailwind, and code Playground

HTML

<script type="text/javascript" ng:autobind
        src="http://code.angularjs.org/0.9.17/angular-0.9.17.js"></script>

<div ng:controller="MyControl">
    <ul>
        <li ng:class="getClass($index)" ng:repeat="value in values" >{{value}}<button ng:click="toggleSelect($index)">{{getButtonLabel($index)}}</button></li>
    </ul>
    <p>Selected: {{selectedIndex}}</p>
</div>

CSS

.selected {
    color:red;
}

button{
     margin-left: 10px;   
}

ul{
 margin-bottom: 10px;   
}

JavaScript

function MyControl(){
    var self = this;
    this.values = ["a","b","c","d","e","f"];
    this.selectedIndex = -1;
    
    this.toggleSelect = function(ind){
        if( ind === this.selectedIndex ){
            this.selectedIndex = -1;
        } else{
            this.selectedIndex = ind;
        }
    }
    
    this.getClass = function(ind){
        if( ind === this.selectedIndex ){
            return "selected";
        } else{
            return "";
        }
    }
       
    this.getButtonLabel = function(ind){
        if( ind === this.selectedIndex ){
            return "Deselect";
        } else{
            return "Select";
        }
    }
}