JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.1.5/angular.min.js"></script>
<div ng-app>
    This works.  Each item color toggles on click.
    <br/>
    <div ng-controller="TabCtrl">
        <div ng-class="{selected: index == 0}" ng-click="index = 0">Click Me. Position is 0, scope.index is {{index}}</div>
        <div ng-class="{selected: index == 1}" ng-click="index = 1">Click Me. Position is 1, scope.index is {{index}}</div>
        <div ng-class="{selected: index == 2}" ng-click="index = 2">Click Me. Position is 2, scope.index is {{index}}</div>
    </div>
     <br/>
    <hr/>
     <br/>
    This doesn't work - the ng-repeat seems to give a unique scope to each item. <br/> <br/>
<div ng-controller="TabCtrl">
    <div ng-repeat="item in [1,2,3]" ng-class="{selected: myVariables.index == $index}" ng-click="myVariables.index = $index">Click Me.  Position is: {{$index}}, myVariables.index is {{myVariables.index}}</div> 
</div>
</div>

CSS

.selected {
    color: red;
}

JavaScript

function TabCtrl($scope){
    $scope.myVariables = {index : 0};
    
}