Javascript AngularJS加载本地数据定时问题

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

我试图加载一个“States”select标记，其中包含从本地JSON对象加载的内容

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];

        });
    }
}]);

var-app=angular.module（'AAE'，[]）；
app.service（'userService'，['$http'，function（$http）{
var states=''；//您是否也可以尝试在控制器中设置$scope.states=result.data？这是一种未命中类型。result实际上没有值。我从代码中删除了它，似乎加载状态没有返回承诺（因为它有自己的.then子句，而不是返回$http）。因此，控制器中的then子句将立即运行，这将把$scope.states和$scope.state设置为空值。该服务仍然可以正确运行，但在完成异步调用之前已分配了这些值。