JSFiddle - React, Tailwind, and code Playground

HTML

<body ng-app="TestApp">
  <div ng-controller="TestController">
      <ul>
          <li ng-repeat="item in items" is-drop-down="{{item.subItems.length > 0}}">{{item.title}}</li>
      </ul>
  </div>
</body>

JavaScript

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

app.directive('isDropDown', function () {
    return {
        link: function (scope, el, attrs) {
           if (attrs.isDropDown == 'true')
           {
               console.log('hi');
               return el.attr('has-dropdown', true); //true or whatever this value needs to be
           }
       }
    };
});

app.controller('TestController', function($scope)
{
    $scope.items = [
        {
            "title":"test1",
            "subItems":{},
        },
        {
            "title":"test2",
            "subItems":[
                {
                    "title": "subitem1"
                },                
                {
                    "title": "subitem2"
                },                
                {
                    "title": "subitem3"
                },
            ],
        },
        {
            "title":"test3",
            "subItems":{},
        }
    ];
});