Custom directive link executes before response.data gets its data - angularjs

Question

I have created custom directive as below,
.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);
}
};
}
]);
Above code is just a custom directive where I can use it anywhere. Only thing it does is take datasource (here I use it as attrs.datasource) to display in typeahead.
Below is the way I use it in html I want,
<div class="col-md-10">
<typeahead datasource={{GetAllCustomers}}></typeahead>
</div>
And it pass the data from controller to html like this,
$scope.GetAllCustomers = [
{
"CompanyName ": "Customer1"
},
{
"CompanyName ": " Customer2"
},
{
"CompanyName ": " Customer3"
},
{
"CompanyName ": " Customer4"
}
];
Above code works fine where GetAllCustomers is passed as datasource of custom directive attrs.datasource field above.
Problem is when I use webapi to get data instead of static data in GetAllCustomers. I use factory and service to get data as below,
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 });
};
}
]);
In above code also GetAllCustomers will get value from webapi, but the problem is response will be loaded only after custom directive is executed. Hence attrs.datasource value will be null.
Now the flow is,
Factory request
Typeahead custom directive
Factory response
Custom directive should be executed after factory response, but it will execute after request is done and before response is given back.
Flow should be like below,
Factory request
Factory response
Typeahead custom directive
Please tell me how to do this for above code. I am not able to create fiddle for webapi. Please tell me how to do this. I tried using promise, but its not working for me. I want to know where to write promise if it is needed.

Answer 1

Change like this, i think it will work
first at the directive
<typeahead datasource={{GetAllCustomersValue}} ng-if="GetAllCustomersValue"></typeahead>
second at the factory part
$scope.GetAllCustomers = customerFactory.GetAllCustomers().then(function (result) {
$scope.GetAllCustomersValue=result;
return $scope.GetAllCustomersValue;
},
function (error) {
console.log("GetAllCustomers failed");
});
]);