can't access the data from service in controller - angularjs

Question

I am trying to add angular-typeahead to my app for search suggestion taking help from this Plunkr.
This is the code of app.js file:
var myApp = angular.module('myApp', ['ngRoute','siyfion.sfTypeahead']);
myApp.factory('websitesSvc',function($http, $log, $q) {
return {
getwebsites: function(){
//Create a promise using promise library
var deferred = $q.defer();
$http({method: 'GET', url: '/api/websites/'}).
success(function(data, status, headers,config){
deferred.resolve(data);
}).
error(function(data, status, headers,config){
deferred.reject(status);
});
return deferred.promise;
}
};
});
myApp.controller('MyCtrl', ['$scope','websitesSvc',
function($scope,websitesSvc) {
$scope.searchString=null;
websitesSvc.getwebsites().then(function(websites){
$scope.websites = websites;
console.log($scope.websites); //It works here
});
//Output undefined
//THIS IS NOT WORKING
console.log($scope.websites);
var websites = new Bloodhound({
datumTokenizer: function(d) { return Bloodhound.tokenizers.whitespace(d.domain_name); },
queryTokenizer: Bloodhound.tokenizers.whitespace,
//want to pass the websites array list from service to local
local:websites, //THIS IS NOT WORKING
});
// initialize the bloodhound suggestion engine
websites.initialize();
$scope.numbersDataset = {
displayKey: 'domain_name',
source: websites.ttAdapter()
};
// Typeahead options object
$scope.exampleOptions = {
highlight: true
};
}
]);
The thing is the I am not able to pass the value of $scope.websites to the typeahead.How to make get the value of websites from services so that I can pass the resultant array to the typeahead?
After editing the code as suggested by red 6 hours ago Kalhano Toress Pamuditha, I am able to access the data.But now I am getting this

Answer 1

websitesSvc.getwebsites().then(function(websites){
$scope.websites = websites;
console.log($scope.websites); //It works here
});
//Output undefined
//THIS IS NOT WORKING
console.log($scope.websites); this will execute before websitesSvc.getwebsites() completes,
javascript code is not hold until sync calls to be complete it will execute the rest of the code, that is the case where u get the undefined.
you will get the data after websitesSvc.getwebsites() promise. so if u need to execute something after this data received, you can execute a function inside then like below
websitesSvc.getwebsites().then(function(websites){
$scope.websites = websites;
console.log($scope.websites); //It works here
$scope.methodAfterComplete();
});
$scope.methodAfterComplete = function() {
// this will call after completing the websitesSvc.getwebsites()
}
so you can place your code inside methodAfterComplete method which require $scope.websites data. for example ;
$scope.methodAfterComplete = function() {
var websites = new Bloodhound({
datumTokenizer: function(d) { return Bloodhound.tokenizers.whitespace(d.domain_name); },
queryTokenizer: Bloodhound.tokenizers.whitespace,
local:websites,
});
// initialize the bloodhound suggestion engine
websites.initialize();
$scope.numbersDataset = {
displayKey: 'domain_name',
source: websites.ttAdapter()
};
// Typeahead options object
$scope.exampleOptions = {
highlight: true
};
}