JSFiddle - React, Tailwind, and code Playground

HTML

<div ng-app="myapp">
 <div ng-controller="MenuController">
    <menu items="menus" />  
 </div>
</div>

CSS

.selItem {
  background-color : yellow;
}

JavaScript

var myapp = angular.module("myapp",[]);

myapp.directive("menu", function () {
            return {
                restrict : 'E',               
                scope : {
                    items : '='
                },
                template : '<ul><li ng-repeat="item in items" ng-click = "clickMenu(item)" ng-class="{selItem:item.id == states.activeItem}" > {{item.name}} </li></ul>',
                link : function ($scope, elem, attrs) {
                  $scope.states = {}
                  $scope.states.activeItem = 1;
                  $scope.clickMenu = function(item){                    
                     $scope.states.activeItem = item.id;                     
                  }
                }
            }
        }
     
);


myapp.controller("MenuController",function($scope) {
    $scope.menus = [{
        "id" : 1,
        "name" : "Home"
    },{
        "id" : 2,
        "name" : "Settings"
    },
    {
        "id" : 3,
        "name" : "Preferences"
    }] ;    
        
   
});