JSFiddle - React, Tailwind, and code Playground

HTML

<div ng-app="my-app" ng-controller="MainController">
    <div>
        Selected: {{state.selected.first}} {{state.selected.last}}
    </div>
    <div>
        <ul>
            <name-row ng-repeat="name in names"
                in-index="$index" in-name="name"
                in-names-list="names" io-selected="state.selected">
            </name-row>
        </ul>
    </div>
</div>

CSS

.ng-scope {
  border: 1px dashed red;
  margin: 5px;
}

.active {
    background-color: rgb(232,232,232);
}

JavaScript

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

function MainController($scope) {
    $scope.names = [
        {first: "John", last: "Smith"},
        {first: "Jane", last: "Smith"}
    ];
    $scope.state = {selected: undefined};
}

module.directive('nameRow', function() {
    return {
        restrict: 'E',
        replace: true,
        // priority: 2000, // since ng-scope has priority of 1000
        scope: {
            inIndex : '=',
            inName : '=',
            inNamesList : '=',
            ioSelected : '='
        },
        controller: function($scope) {
            $scope.setSelected = function(index) {
                console.log("selected index = " + index);
                $scope.ioSelected = $scope.inNamesList[index];
            }
            
            $scope.activeClass = function(index) {
                return ($scope.ioSelected === $scope.inNamesList[index] ? "active" : "");
            }
        },
        template:
'        <li ng-class="activeClass(inIndex)" >' +
'            <a ng-click="setSelected(inIndex)">' +
'                {{inIndex}} {{inName.first}} {{inName.last}}' +
'            </a>' +
'        </li>'
    };
});