JSFiddle - React, Tailwind, and code Playground

HTML

<div ng-app="myApp" ng-controller="RoleDetailUsersController">
    
   <table-for-listing-directive table-data="{{users}}"></table-for-listing-directive>
</div>

JavaScript

angular.module('ui.directives', []);
angular.module('ui', [
  'ui.directives'
]);

angular.module('ui.directives', []).directive('tableForListingDirective', function () {
		return {
			restrict: 'EA',
			scope: true,
			template: [
				'<table ng-table="tableParams" class="table table-striped table-bordered table-hover" template-pagination="custom/pager">',
				'<tr ng-repeat="user in tableData">', 
				'<td width="30" style="text-align: left" header="\'ng-table/headers/checkbox.html\'"> <input type="checkbox" ng-model="user.checked" ng-change="toggleCheckedUserToAdd(user)"/>',
				'<td data-title="\'Login\'" sortable="\'login\'">{{user.login}}</td>',
				'<td data-title="\'Name\'" sortable="\'name\'">{{user.name}}</td>',
				'</tr>',
				'</table>'
			].join(''),
			link: function (scope, element, attrs) {
				scope.tableData=scope.$eval(attrs.tableData);
			},
		}
	})
angular.module('myApp', ['ui.directives']);

angular.module('myApp').controller('RoleDetailUsersController',function ($scope){
    $scope.users=[
        {
            'login' : 'l1',
            'name' : 'n1'
        },
         {
            'login' : 'l2',
            'name' : 'n2'
        },
    ];
    
});