JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.10.0/ui-bootstrap-tpls.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<div ng-app="app">

       <div ng-controller="CustomerController">  
        <div ng-repeat="customer in customers">
            <button class="btn btn-default" ng-click="open()">{{ customer.name }}</button> <br />
            
 <table ng-table="vm.tableParams" class="table" show-filter="true">
    <tr ng-repeat="customer in customers">
   <td title="'Name'" sortable="'name'">
            {{user.name}}</td>
   <td title="'Details'" sortable="'age'">
            {{user.details}}</td>
    </tr>
</table>

                <!--MODAL WINDOW--> 
                <script type="text/ng-template" id="myModalContent.html">
                    <div class="modal-header">
                        <h3>The Customer Name is: {{ customer.name }}</h3>
                    </div>
                    <div class="modal-body">
                            This is where the Customer Details Goes<br />
                            {{ customer.details }}
                    </div>
                    <div class="modal-footer">

                    </div>
                </script>

        </div>  
        </div>


</div>

JavaScript

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

app.controller('CustomerController', function($scope, $timeout, $modal, $log) {
    
    $scope.customers = [
        {
        name: 'Ricky',
        details: 'Some Details',
        },
        {
        name: 'Dicky',
        details: 'Some Dicky Details',
        },
        {
        name: 'Nicky',
        details: 'Some Nicky Details',
        }
    ];

    // MODAL WINDOW
    $scope.open = function () {

        var modalInstance = $modal.open({
          templateUrl: 'myModalContent.html',
             });
    };
});