AngularJS, Async-ng-repeat doesn't wait for scope to be set

Question

AngularJS, Async-ng-repeat doesn't wait for scope to be set

When I load my index page, my ajax call works and the scope is set. But it looks like the ng-repeat is loaded before the scope is set using "products".

I feel like there must be a way either

Load the page without waiting for the region to be set, but when it is set, repeat the "ng-repeat" loop
Wait for the AJAX call to complete before initializing the loop ('ng-repeat')

Hooray!

products.controller.js

dvpModule.controller("ProductsController", function ($scope, productRepository) {
    productRepository.get().then(function(products) { 
    $scope.products = products; 
    });
});

products-repository.js

dvpModule.factory('productRepository', function($http, $q) {
return {
    get: function() {
        var deferred = $q.defer();

        $http({
            method: 'POST',
            url: 'http://localhost/test/wp-admin/admin-ajax.php',
            params: { action: 'getAllProductUrls' },
        }).success(deferred.resolve).error(deferred.reject);
        return deferred.promise;
    }
};
});

index.html

<html ng-app="dvpModule">

<head>
    <script type='text/javascript' src='js/angular.min.js'></script>
    <script src="js/scripts/dvp_module.js" /></script>
    <script src="js/scripts/products-controller.js" /></script>
    <script src="js/scripts/products-repository.js" /></script>
    <script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
    <title>DVP {{2 + 2}}</title>
</head>

<body ng-controller="ProductsController">
    <div>
    <tr ng-repeat="product in products">
        <th>{{product.Category}}</th>
        <th>{{product.Features}}</th>
        <th>{{product.MODEL_SERIES}}</th>
    </tr>
    </div>