JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container-fluid" ng-app="JokeApp" ng-controller="JokeCtrl">
    <table class="table-responsive" ng-show="!processBusy">
        <thead>
            <tr>
                <th>ID</th>
                <th>Joke</th>
                <th>Categories</th>
            </tr>
        </thead>
        <tbody>
        <tr ng-repeat="data in data.jokeList">
            <td>{{data.id}}</td>
            <td>{{data.joke}}</td>
            <td>{{data.category}}</td>
        </tr>
        </tbody>
    </table>
</div>
</body>

JavaScript

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

/**
 * Created by roger on 25/2/14.
 */
app.controller('JokeCtrl',['$scope','$http','$q',function($scope,$http,$q){
    $scope.pageTitle="JokeApp";
    $scope.data={"jokeList":[]};
    $scope.services={};
    $scope.processing={};
    $scope.processBusy=true;
    $scope.dataTemplate=function(id,joke,category){
        return {
            "id":id,
            "joke":joke,
            "category":category
        };
    };

    $scope.getJoke = function(callback) {
        return $http.get("http://api.icndb.com/jokes/random?limitTo=[nerdy]&foo=" + Math.random()).success(
            function(data) {
                return callback($scope.dataTemplate(data.value.id,data.value.joke,data.value.categories[0]));
            }
        );
    };
    $scope.getJokes = function () {
        var prom = [];
        for(var i=0;i<10;i++){
            prom.push($scope.getJoke(function(value){
                $scope.data.jokeList.push(value);
            }));
        }
        $q.all(prom).then(function () {
            console.log("DONE!!!");
            console.log($scope.data.jokeList);
            $scope.processBusy=false;
        });
    };

    $scope.getJokes();
}]);