Angular Components does not work with Promise and Service - angularjs

Question

I have a really strange problem with Angular Components calling a service.
For example, i have a simple service with some mockup data as an array inside. The i add two methods, one synchron and one asynchron which returns a promise (if i correct understood).
Now a have a angular component which is well loaded in a example application.
On the frontend i have two buttons, one for each method in the service.
If i press now the button "btn1" the list is well loaded, all works fine.
If i now press the button "btn2" i see in the console that the service returns all data correctly, but the list in the frontend will not be loaded.
Service
var myItems = [
{id: 1, name: "item1"},
{id: 2, name: "item2"}
];
function ItemsService($q) { // inject the $q service
this.$q = $q;
}
ItemsService.prototype = {
loadItems: function () {
return myItems;
},
loadItemsAsync: function () {
var $qme = this.$q; // if i do not this, "this.$q" is undefined
return this.$q.resolve(myItems);
}
};
module.exports = {
ItemsService: ItemsService
}
Controller
function Foo(ItemsService) {
this.itemsService = ItemsService;
}
Foo.prototype = {
loadItems: function () {
this.items = this.itemsService.loadItems();
},
loadItemsAsync: function () {
this.itemsService.loadItemsAsync().then(
function (response) {
this.items = response;
console.log('data->' + this.items + ' -> ' + this.items[0].name);
},
function (error) {
console.log('error->' + error); // ignore
}
);
}
};
Component HTML
<section>
<button id="btn1" ng-click="$ctrl.loadItems()">Load</button>
<button id="btn2" ng-click="$ctrl.loadItemsAsync()">Load Async</button>
<ul>
<li ng-repeat="item in $ctrl.items">{{item.id}} // {{item.name}}</li>
</ul>
</section>
In future i want to replace the code in the service method of "loadItemsAsync" with a service call, but actually nothing works.
Future planned service method code
loadTreasuriesAsync: function () {
var $qme = this.$q;
return this.$http.get(this.url).then(
function (response) {
return $qme.resolve(response.data);
},
function (error) {
throw error;
}
);
}
I also tried this service call, but it also returns a promise object.
loadItems: function () {
return this.$http.get(this.url).then(function (response) {
return response.data;
});
},
Can anyone help me finding a solution?

Answer 1

this.items = response;
this does not exist anymore in the context. Try to save the context previously either by an outside variable (i.e. _this) or use arrow functions if you have those available.