JSFiddle - React, Tailwind, and code Playground

HTML

<div ng-app="my-app" ng-controller="MainController">
    <div>
        Selected: {{selected.first}} {{selected.last}}
    </div>
    <div>
        <name-row 
            in-names-list="names"
            io-selected="selected">
        </name-row>
    </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.selected = undefined;
}

module.directive('nameRow', function() {
    return {
        restrict: 'E',
        replace: true,
        // priority: 2000, // since ng-scope has priority of 1000
        scope: {
            inItems : '=',
            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:
'        <ul>' +      
'            <li ng-repeat="name in inNamesList" ng-class="activeClass($index)" >' +
'                <a ng-click="setSelected($index)">' +
'                    {{$index}} - {{name.first}} {{name.last}}' +
'                </a>' +
'            </li>' +
'        </ul>'
    };
});