Пользовательская ссылка директивы выполняется до того, как response.data получает свои данные

Я создал пользовательскую директиву, как показано ниже,
.html:

<input type="text" placeholder="Search" ng-model="selected"  typeahead="Customer.CompanyName for Customer in typeaheadSrc | filter:$viewValue" />

.directive:

module.directive("typeahead", [
           function () {
            return {
                restrict: "E",
                templateUrl: typeahead.html,
                link: function (scope, element, attrs) {
                    scope.typeaheadSrc = scope.$eval(attrs.datasource);
                }
            };
        }
    ]);

Выше код - это просто настраиваемая директива, где я могу использовать его где угодно. Единственное, что он делает, это взять datasource (здесь я использую его как attrs.datasource) для отображения в typeahead.

Ниже я использую его в html, который я хочу,

<div class="col-md-10">
<typeahead datasource={{GetAllCustomers}}></typeahead>
</div>

И он передает данные от контроллера к html, как это,

 $scope.GetAllCustomers = [
                {
                    "CompanyName ": "Customer1"
                },
                {
                    "CompanyName ": " Customer2"
                },
                {
                    "CompanyName ": " Customer3"
                },
                {
                    "CompanyName ": " Customer4"
                }
            ];

Над кодом работает отлично, когда GetAllCustomers передается как источник данных поля настраиваемого атрибута attrs.datasource выше.
Проблема в том, что я использую webapi для получения данных вместо статических данных в GetAllCustomers. Я использую фабрику и сервис для получения данных, как показано ниже,

module.controller("customerController", ["$scope", "customerFactory",
function ($scope, customerFactory) {
$scope.GetAllCustomers = customerFactory.GetAllCustomers().then(function (result) {
                    return result;
                },
                   function (error) {
                       console.log("GetAllCustomers failed");
                   });
]);
  module.factory("customerFactory", [
        "customerService",
        "$q",
        function (customerService, $q) {
            var customerObj = {};
            var deferred = $q.defer();
customerObj.GetAllCustomers = function () {
                return customerService.GetAllCustomers()
                .then(function (response) {
                    deferred.resolve(response.data);
                    return deferred.promise;
                }, function (response) {
                    deferred.reject(response);
                    return deferred.promise;
                });
            };

            return customerObj; 
        }]);

module.service("customerService", [
        "$http","$scope"
        function ($http,$scope) {
$scope.GetAllCustomers = function () {
                var tempUrl = TEMPLATES_PATH.customer_api;
                var request = {
                    method: GET,
                    url: tempUrl
                };
                return $http(request, { withCredentials: true });
            };
        }
    ]);

В вышеприведенном коде GetAllCustomers получит значение от webapi, но проблема в ответе будет загружена только после выполнения пользовательской директивы. Следовательно, значение attrs.datasource будет равно нулю.
Теперь поток,
Заводской запрос
Специальная директива Typeahead
Ответ фабрики

Пользовательская директива должна быть выполнена после заводского ответа, но она будет выполняться после завершения запроса и до ответа ответа.
Поток должен выглядеть следующим образом:
Заводской запрос
Ответ фабрики
Специальная директива Typeahead

Скажите, пожалуйста, как это сделать для кода выше. Я не могу создать скрипку для webapi. Скажите, пожалуйста, как это сделать. Я пытался использовать обещание, но оно не работает для меня. Я хочу знать, где написать обещание, если это необходимо.