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 ng-controller="LoginCtrl">
    <button ng-click="users.push({name: 'Bill', type: 'Cool'})">
      New User
    </button>
    
    <!-- watch users.length for changes -->
    <accordion watch="users.length">
      <h3 ng-repeat-start="user in users">
        <a href="#">{{user.name}}</a>
      </h3>
      <div ng-repeat-end>
        Name: {{user.name}}<br>
        Type: {{user.type}}<br>
      </div>
    </accordion>
  </div>

</div>

JavaScript

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


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

app.directive('accordion', function ($timeout) {
    return {
        link: function (scope, elem, attrs) {          
          if (attrs.watch) {
            scope.$watch(attrs.watch, function () {
              if (elem.hasClass('ui-accordion')) { 
                elem.accordion('destroy'); 
              }
              elem.accordion();
            });
          }
          else {
            $timeout(function () {
              elem.accordion();
            });
          }
        }
    };
});