How to watch a deferred service property? - angularjs

Question

If I have the following simple controller & service.
<div ng-controller="MessagesCtrl">
<ul>
<li ng-repeat="message in data.messages">
{{ message }}
</li>
</ul>
</div>
myApp.factory('Data', function () {
var _messages = [];
return {
messages: _messages,
getMessages: function() {
$http.get('/messages').then(function(response) {
_messages = response.data;
});
}
};
});
function MessagesCtrl($scope, Data) {
$scope.data = Data;
$scope.data.getMessages();
}
I would expect the messages model to auto-update when the AJAX request completes and fills the object, however it does not. How is this supposed to work? (I'm sort of asking what the best practice is for this structure).
Edit - working solution:
<div ng-controller="MessagesCtrl">
<ul>
<li ng-repeat="message in data.messages">
{{ message }}
</li>
</ul>
</div>
myApp.factory('Data', function () {
return {
getMessages: function() {
var _this = this;
$http.get('/messages').then(function(response) {
_this.messages = response.data;
});
}
};
});
function MessagesCtrl($scope, Data) {
$scope.data = Data;
$scope.data.getMessages();
}

Answer 1

I'm fairly certain you have a JavaScript issue here and not an AngularJS related issue. Let's remove the AngularJS related code and leave just the JavaScript piece:
function factory() {
var _messages = [];
return {
messages: _messages,
getMessages: function() {
_messages = [1, 2, 3, 4];
}
}
}
> var test = factory();
undefined
> test.messages
[]
> test.getMessages()
undefined
> test.messages
[]
test.messages points to the origin _messages array whereas later on _messages is getting changed but test.messages is not.