I'm struggling to understand a simple concept here. My objective is to retrieve data from a service, which fetches data from an endpoint, and then be able to update that stored data by refreshing the endpoint.
.service('myService', function($http) {
var self = this;
this.myData = {};
this.getItem = function() {
return $http.get('/path/to/endpoint')
.then(function(res) {
self.myData = res.data; // the data structure is like: { x: 1, y: 2}
});
};
})
.controller('mainCtrl', function($scope, myService) {
myService.getItem();
$scope.data = myService.myData;
window.logService = function() {
console.log(myService); // { getItem: function(){...}, data: {x: 1, y: 2} }
};
});
<div ng-controller="mainCtrl">{{data.x}}</div> <!-- Doesn't reflect the updated data from the promise -->
This situation seems puzzling. Even after calling window.logService() once the promise is fulfilled and the data is in place, the view fails to update accordingly.