AngularJS scope issue with $http - arrays

Question

Continuing my adventures with AngularJS, I have what I believe is a scope issue, but not entirely sure.
In my controller I'm building two test array's for demo purposes, search.filterDemo and search.filter (real data).
Controller
app.controller('searchBtnCtrl', ['$scope', '$http', function ($scope, $http) {
var search = this;
search.filter = {};
search.results = [];
search.resultsDemo = [];
search.keywordsToFilter = [
{ name: 'itemA' },
{ name: 'itemB' },
{ name: 'itemC' },
{ name: 'itemD' }
];
$scope.performSearch = function () {
search.resultsDemo = [
{ name: 'itemA', content: 'This is demo content' },
{ name: 'itemB', content: 'This is demo content' },
{ name: 'itemC', content: 'This is demo content' },
{ name: 'itemD', content: 'This is demo content' }
];
$http.get('http://localhost/content').then(function (response) {
search.resultCount = response.data.response.docs.length;
for (var i = 0; i < search.resultCount; i++) {
search.results.push({ name: search.results[i]._name[0], content: search.resultsTemp[i]._content[0]});
}
console.log(search.results);
});
console.log(search.resultsDemo);
console.log(search.results);
}
}]);
Output from the console log for search.resultsDemo is as I expect it to be:
Array [ Object, Object, Object, Object, Object, Object, Object, Object ]
Then if I click on the Array link I see that the array has 8 items
Array[8]
This is all correct to me, my first array is keeping it's scope.
However my second array is not quite.
Output from the second array is as follows:
Inside the $http call it displays properly -
Array [ Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, 3 more… ]
However the second console.log of the array just 3 lines later displays as:
Array[ ]
And if I click on the array link it shows:
Array[0]
The interesting thing is that the data is in there, it's just not showing up as objects like the first array (I can click the array link and I do see the objects listed under the Array[0] in the console, and I can twirl them open to see the data.
So is this a scope issue, or is it something else related to the async nature of Angular that's not formatting my second (real) array correctly?
It's driving me batty, as I need to have my second array formatted properly like the first array for processing later in the function.
thanks!

Answer 1

That is because your second console.log is outside the scope of your then statement. When your second console.log runs, the data likely has not been returned yet.
In fact, I would wager to say that your second console.log(search.results) likely ends up in your console before your first console.log(search.results) does.