DOM数据在数据传递到控制器之前加载

Question

我有一个工厂使用AJAX调用API，如此

App.factory("DashboardData", function($q) {

method = 'POST';

var fetchDataFromApi = function(url, data) {
    code = null;
    response = null;

    return $.ajax({method: method, url: url, dataType: 'json', data: data}); };

return {

    counters: function() {
        var deferred = $q.defer();
        return data = fetchDataFromApi('http://solmon.belgiumcampus.ac.za/api/data/getdashboarddata');}
};});

然后我有一个控制器调用这个工厂并用它收到的响应填充一个数组

App.controller("DashboardWidgets", function($scope, DashboardData) {
var response = DashboardData.counters();

    $scope.CounterData = [];
response.then(function(response) {
    $scope.CounterData = [
        response.onlineUnits,
        response.offlineUnits,
        response.overallVoltage,
        response.overallCurrent,
        response.maintenanceUnits
    ];



});
alert("Online from controller: " + $scope.CounterData[0]);});

如果我在结尾取出警报，那么DOM元素不会显示收到的数据。为什么会发生这种情况，你会如何推荐我修复它？