JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.min.js"></script>
<div ng-app="myApp" >

        <div accordion ng-controller="LoginCtrl">
            <h3 ng-repeat-start="user in users" ><a href="#">{{user.name}}</a></h3>
            <div ng-repeat-end>
                Username: {{user.name}}<br>
                Type: {{user.type}}<br>
            </div>

            </div>

</div>

JavaScript

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

app.directive('accordion', function ($timeout) {
    return {
        restrict: 'A',
        link: function ($scope, $element, attrs) {
            $(document).ready(function () {
                $scope.$watch('users', function () {
                    if ($scope.users != null) {
                        $timeout(function(){
                            $element.accordion();
                        });
                    }
                });
            });
        }
    };
});

app.controller('LoginCtrl',function($scope){
  $scope.users=[
        {name:"Mike", type:"talented"},
        {name:"John", type:"intelligent"},
        {name:"Marcella", type:"quick learner"}
    ];
});