Why would ng-repeat fail to loop with $http.get JSON but work when it's hard coded?

Question

I have an Angular project using ng-repeat that has been working fine with a temp JSON string coded into the controller:

function DocsController($scope, $http){
    $scope.applicationData = [
    {"Item":"1", Value: "Red"}, {"Item":"2", Value: "Orange}
    ];
}

But for some reason, when I move that JSON into a file, and pull it in via $http.GET, the ng-repeat stops working. No loops, nothing- even though I can get applicationData.length and other properties off the object outside the loop:

$http.get('jsonData/docs.json').success(function(data) {
    alert (data);
    $scope.applicationData = data;
  });

In the above example, the alert shows the JSON string, so I know it's getting loaded properly. I can call {{applicationData.length}} and it will render 2. So I know the data is there, it's just the ng-repeat stops looping when the data is acquired via $http.get.

Any ideas? Many thanks!

Item template (Note that the line {{applicationData.length}} renders properly- so I know the data is there).

              <div class="row-fluid">
                <div class="box span12" ng-controller="DocsController">
                    <div class="box-header">
                        <h2><i class="halflings-icon list-alt"></i><span class="break"></span><strong>Application Documents</strong></h2>
                        <div class="box-icon">
                            <span><input type="checkbox" id="completedApplicationCheckbox" ng-model="trueApplication" value="option1" checked>Show Completed </span>
                            <a href="#" class="btn-minimize"><i class="halflings-icon chevron-up"></i></a>
                        </div>
                    </div>
                    </br>
                    <table class="table table-striped table-bordered bootstrap-datatable datatable">
                      <thead>
                          <tr>
                              <th>Document Title <i class="halflings-icon chevron-down"></i></th>
                              <th>Date <i class="halflings-icon chevron-down"></i></th>
                              <th>Owner <i class="halflings-icon chevron-down"></i></th>
                              <th>Status <i class="halflings-icon chevron-down"></i></th>
                              <th>Actions <i class="halflings-icon chevron-down"></i></th>
                          </tr>
                      </thead>   
                      <tbody>
                            <h2>{{applicationData.length}}</h2>
                                <tr ng-repeat="item in applicationData" class="application-{{item.status}}">
                                    <td><i class="halflings-icon file"></i> {{item.name}}</td>
                                    <td class="center">{{item.lastModified | date:'short'}}</td>
                                    <td><i class="halflings-icon {{getIconType(item.owner)}}"></i> {{item.owner}}</td>
                                    <td class="center" ng-bind-html-unsafe="createStatus(item.status)">
                                    </td>
                                    <td class="center" ng-bind-html-unsafe="createActionButton(item.status)">
                                    </td>
                                </tr>
                      </tbody>
                    </table>
                </div>
            </div>

Answer 1

I realized there was a conflict with the datatable jquery plug-in (http://www.datatables.net/). I'm afraid it won't work with Angular, because it's an excellent piece of software, but I'm having to disable it for now.

Answer 2

-Edit-

try using .then()

$http.get('jsonData/docs.json').then(function(data){
   $scope.applicationData = data
});

Try this:

$scope.applicationData = [];

$http.get('jsonData/docs.json').success(function(data) {
    $scope.applicationData.push(data);
});