JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<div ng-app="myApp" ng-controller="CharactersCtrl">
    <table class="table table-bordered">
        <thead>
            <tr>
                <th>Name</th>
                <th>Role</th>
                <th>Gender</th>
            </tr>
        </thead>
        <tbody>
            <tr ng-repeat="char in characters">
                <td>{{char.name}}</td>
                <td>{{char.role}}</td>
                <td>{{char.gender}}</td>
            </tr>
        </tbody>
    </table>
</div>

JavaScript

angular
  .module('myApp', []);

function CharactersCtrl($scope) {
  $scope.characters = [
    { name: 'John Snow', role: 'Bastard', gender: 'Male' },
    { name: 'Daenerys Targaryen', role: 'Mother of Dragons', gender: 'Female' },
    { name: 'Tyrion Lannister', role: 'Imp', gender: 'Male' },
    { name: 'Eddard Stark', role: 'Lord of Winterfell', gender: 'Male' },
    { name: 'Robert Baratheon', role: 'King', gender: 'Male' }
  ];
}

angular
  .module('myApp')
  .controller('CharactersCtrl', CharactersCtrl);