DataTables - TypeError preventing sort and filter

annabananana7

I am getting this error in Firefox: TypeError: aoColumns[srcCol] is undefined, and this error in Chrome: Uncaught TypeError: Cannot read property 'aDataSort' of undefined. I am loading data from a json file and everything seems to load alright, but the errors are preventing me from being able to sort and filter my table. I am not sure if I need to call the data a different way or if I should change anything specific in my code. Debug info: http://debug.datatables.net/otewuq

JS snippet that draws the table and calls the data:

$(document).ready(function() {
    var oTable = $('#myTable').dataTable( {
        "sDom": 'lrtip',   

    initComplete: function() {
        var api = this.api();

        api.columns('.filtersearch').indexes().flatten().each(function(i) {
            var column = api.column(i);
            var select = $('<select></select>')
                .appendTo($(column.footer()).empty())
                .on('change', function() {
                    var val = $.fn.dataTable.util.escapeRegex(
                            $(this).val()
                    );

                    column
                        .search(val ? '^' + val + '$': '', true, false)
                        .draw();
                });

            select.append('<option selected value="">' + $(column.header()).text() + '</option>');

            column.data().unique().sort().each(function(d, j) {
                select.append('<option value="' + d + '">' + d + '</option>');
            });
        });
    }

});
});

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

reportApp.controller('reportController', function($scope, $http) {

    $http.get('../controllers/apps.json').success(function(data){
        for (head in data) {
            $scope.head = data.head;
        }
        for (details in data) {
            $scope.details = data.details;
        }
        for (status in data) {
            $scope.status = data.status;
        }
        for (errorCode in data) {
            $scope.errorCode = data.errorCode;
        }
        for (apps in data) {
            $scope.apps = data.apps;
        }
    });
});

HTML snippet:

<table id="myTable" class="table display">
        <thead>
            <tr>
                <th ng-repeat="(i, th) in head" value="{{th.id}}" class="{{th.class}}"><span>{{th.name}}</span></th>
            </tr>
        </thead>
        <tbody>
            <tr ng-repeat="app in apps | filter:search" ng-click="clickRow(app)" ng-class="{selected: app === selectedRow}">
                <td>{{app.appName}}</td>
                <td>{{app.dateCreated}}</td>
                <td>{{app.dateUpdated}}</td>
                <td>{{app.payload}}</td>
                <td>{{status[app.status].name}}</td>
                <td>{{errorCode[app.errorCode].name}}</td>
                <td>{{app.errorDesc}}</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <th ng-repeat="(i, th) in head" value="{{th.id}}"><span>{{th.name}}</span></th>
            </tr>
        </tfoot>
    </table>

JSON snippet:

{
"head" : [
    {"id": 1, "name": "Application Name", "class": "filtersearch"},
    {"id": 2, "name": "Date Created"},
    {"id": 3, "name": "Date Updated"},
    {"id": 4, "name": "Payload"},
    {"id": 5, "name": "Status", "class": "filtersearch"},
    {"id": 6, "name": "Error Code", "class": "filtersearch"},
    {"id": 7, "name": "Error Description"}
    ],

"details" : [
    {"id": 1, "name": "Application Name"},
    {"id": 2, "name": "Error Description"},
    {"id": 3, "name": "Record Count"},
    {"id": 4, "name": "Record Fail"}
    ],

"status" : [
    {"id": 1, "name": "Active"},
    {"id": 2, "name": "Inactive"},
    {"id": 3, "name": "Unknown"}
    ],

"errorCode" : [
    {"id": 1, "name": "Code01"},
    {"id": 2, "name": "Code02"},
    {"id": 3, "name": "Code03"},
    {"id": 4, "name": "Code04"}
    ],

"apps" : [
    {"appName": "App01",
        "dateCreated": "01/01/2015",
        "dateUpdated": "01/04/2015",
        "payload": "Payload01",
        "status": 0,
        "errorCode": 0,
        "errorDesc": "Desc01",
        "recordCount": 1,
        "recordFail": 1},

Any help is appreciated!