Service data binding, trouble to get $apply within $watch to run - angularjs

Question

I am trying to set up a very simple AngularJS app, but I have trouble getting my $watch and $apply to run.
I just (for now) want to display the length of an Array which I receive in a JSON object. I set up a watcher to bind my Service-data to view and put an $apply call into it, but somehow this doesn't work.
When removing the $apply() my view is updating, but it's updating the previous value (hence I suppose everything else works as supposed).
HTML:
<div ng-controller="scandataCtrl">
{{scandata.length}}
</div>
Javascript:
app.controller('scandataCtrl',['$scope', 'DataHandler', function($scope, DataHandler) {
$scope.scandata = DataHandler.getScanData();
$scope.$watch(
function(){
return DataHandler.getScanData();
},
function(newVal, oldVal){
$scope.$apply(function(){
$scope.scandata = DataHandler.getScanData();
});
});
}]);
app.service('DataHandler', function()
{
var scanresult = [];
this.getScanData = function()
{
return scanresult;
};
this.msgreceive = function(msg)
{
var msgobj = JSON.parse(msg);
switch (msgobj.MessageType)
{
case 'SCANRESULT':
scanresult = msgobj.MessageData.myArray;
break;
default:
alert("error: undefined message received")
break;
}
};
});
I googled a lot but coudn't figure it out.

Answer 1

You should use $timeout instead of $apply:
$scope.$watch(function(){
return DataHandler.getScanData();
}, function(newVal, oldVal){
$timeout(function(){
$scope.scandata = DataHandler.getScanData();
});
});
Timeout will internally call $apply but in a safe manner which will not throw an exception of digest is already in progress.