JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.3/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.8.2/css/jquery.dataTables.css">
<div ng-app="Test">
    <h1>Results Table</h1>
    <div class="assign table-bordered table-striped" ng-controller="AssignmentCtrl">
        <table class="assign-list" jq-table>
            <thead>
                <tr>
                    <th>Title</th>
                    <th>Points</th>
                    <th>Due</th>
                    <th>Completed</th>
                </tr>
            </thead>
            <tbody>
                <tr ng-repeat="assign in assignments">
                    <td>{{assign.title}}</td>
                    <td>{{assign.points}}</td>
                    <td>{{assign.due}}</td>
                    <td>{{assign.completed}}</td>
                </tr>
            </tbody>
        </table>
    </div>
</div>

CSS

</style> <!-- Ugly Hack due to jsFiddle issue: http://goo.gl/BUfGZ --> 
<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.min.js"></script>
<style>
.done-true {
  text-decoration: line-through;
  color: grey;
}

JavaScript

var test = angular.module("Test", []);

test.directive("jqTable", function () {
    return function (scope, element, attrs) {
       scope.$watch("assignments", function (value) {//I change here
  var val = value || null;            
  if (val)
    element.dataTable({"bDestroy": true});
  });


    };
});


function AssignmentCtrl($scope, $http, $timeout) {

    $scope.assignments = [];

    $scope.fetch = function () {
        // -- Mock server data..
        var data = [{
                        id: 1,
                        title: "Math 1",
                        points: 20,
                        due: "",
                        completed: true
                    },
                    {
                        id: 2,
                        title: "Math 2",
                        points: 40,
                        due: "",
                        completed: true
                    },
                    {
                        id: 3,
                        title: "Math 3",
                        points: 20,
                        due: "",
                        completed: false
                    }];
        
        
        // -- This works, since it does not have an async call:
        //$scope.assignmentsLoaded(data);
        
                
         // -- Add an async call, no more worky (the table stays empty)
        $timeout(function () { $scope.assignmentsLoaded(data); }, 1000);
    };

    $scope.assignmentsLoaded = function (data, status) {
        $scope.assignments = data;
    }

    $scope.fetch();
}