Simple angular ng-repeat app not working as expected
<p>Pretty sure this is something stupid and I know it's pretty much a dupe question. 
I have a VERY simple angular app and some HTML. </p>

<p>When debugging on chrome I can see that I am getting a response from my ajax call and that it's definitely populating my $scope.courses. Yet for some reason it does not want to work. Tried looking for spelling issues to no success. </p>

<p>HTML:</p>

<pre><code>&lt;div ng-app="registrationApp" ng-controller="registrationController"  &gt;
    &lt;div class="spacer" ng-repeat="course in courses"&gt;
    &lt;label&gt;{{course.Name}}&lt;/label&gt;
    &lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p>JS:</p>

<pre><code>    var app = angular.module("registrationApp", []);
    app.controller("registrationController", function ($scope) {
    $scope.firstName = "";
    $scope.lastName = "";
    $scope.cellNumber = "";
    $scope.emailAddress = "";
    $scope.selectCourse = "";
    $scope.courseCategories = [];
    $scope.courses = [];

    $scope.loadCourses = function () {
        var jqxhr = $.ajax("http://localhost/APIWrapper/api/course")
        jqxhr.done(function (response) {
            $scope.courses = response;
        })
        jqxhr.fail(function () {
            alert("error");
        })
        jqxhr.always(function () {

        });
    }

    angular.element(document).ready(function () {
        $scope.loadCourses();
    });

});
</code></pre>

<p>Response:</p>

<p><a href="https://i.stack.imgur.com/haHiW.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/haHiW.png" alt="Response Image"></a></p>