JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">
<div ng-app>
<div class="container-fluid">
      <div class="row">
        <!-- Player section -->
        <div class="col-sm-8" ng-controller="playerCtrl">
          <table class="table table-hover">
            <tr>
              <th>Play</th>
              <th>Topic</th>
              <th>Date</th>
              <th>Presenter</th>
              <th>Tags</th>
            </tr>


    <tr ng-repeat="row in rowColumns">
      <td ng-repeat="cell in row">
           {{cell.task}}
      </td>
   </tr>
            </tr>
          </table>
        </div>
</div>

CSS

body {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

JavaScript

function playerCtrl($scope) {

  $scope.columns =        [ 
        {
            "id" : 0,
            "column_name" : "Column 1",
            "cards" : [ 
                {
                    "id" : 0,
                    "task" : "Task 1"
                }, 
                {
                    "id" : 1,
                    "task" : "Task 2"
                }
            ]
        }, 
        {
            "id" : 1,
            "column_name" : "Column 2",
            "cards" : [ 
                {
                    "id" : 0,
                    "task" : "Task 3"
                }
            ]
        }]    ;

$scope.rowColumns = [];
    $scope.columns.forEach(function(column, columnIndex){
        column.cards.forEach(function (card, rowIndex){
            if (!$scope.rowColumns[rowIndex])
                $scope.rowColumns[rowIndex] = [];
            $scope.rowColumns[rowIndex][columnIndex] = card;
        });
    });
    console.log($scope.rowColumns);


}