AngularJS加载本地数据时序问题

Question

我知道我在这里有一个计时问题，因为每隔一段时间，视图就会在我的select标签中填充的数据中正确呈现。我相信我已经设定了我的承诺，然后功能不正确。

我正在尝试使用从本地JSON对象加载的内容加载“States”选择标记。

AngularJS代码

var app = angular.module('AAE', []);

app.service('userService', ['$http', function($http) {

    var states = ''; // <-- Focus

    return{
        getStates: function() { // <-- Focus
            return states;
        },
        loadStates: function() { // <-- Focus
            return $http({
                method: 'GET',
                url: 'content/states.json'
                //,async: false
            }).then(function(result) {
                console.log(result.data)
                states = result.data;
            });
        }
    };
}]);

app.controller('EnrollmentController', ['$scope', 'userService', function($scope, userService) { //Dependencies and Constructor function.
    $scope.userService = userService;
    $scope.states = []; // <-- Focus

        userService.loadStates().then(function() { // <-- Focus
            $scope.states = userService.getStates();
            $scope.state = $scope.states[0];

        });
    }
}]);

在运行时检查时，$ scope.states数组将填充JSON内容。所以我知道loadStates（）和getStates（）在某种程度上正在发挥作用，我认为只是一个时间问题......

谢谢！