Angular vs XMLHttpRequest
HTML
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<div ng-app>
<div ng-controller="ghostController">
<h4>Status:</h4>
<div>
through the object(angular): <code>r.status = '{{r.status}}'</code> (type={{type(r.status)}}) <br/>
through the scope method call to object(javascript): <code>sfunction() = '{{sfunction()}}'</code> (type={{type(sfunction())}}) <br/>
through the wrapper(angular): <code>d.r.status = '{{d.r.status}}'</code> (type={{type(d.r.status)}}) <br/>
through the wrapper property(angular): <code>d.s = '{{d.s}}'</code> (type={{type(d.s)}}) <br/>
through the wrapper method call(javascript): <code>d.smethod() = '{{d.smethod()}}'</code> (type={{type(d.smethod())}})<br />
through the scope method call to wrapper(javascript): <code>dfunction() = '{{dfunction()}}'</code> (type={{type(dfunction())}})
</div>
<h4>XHR:</h4>
<div>
the culprit: <code>r = '{{r}}'</code> (type={{type(r)}}) <br/>
immediate: <code>s = '{{s}}'</code> (type={{type(s)}}) <br/>
indirect: <code>d = '{{d}}'</code> (type={{type(d)}}) <br/>
</div>
</div>
</div>
JavaScript
function ghostController($scope, $log) {
function smethod() { return this.r.status; }
$scope.r = new XMLHttpRequest();
$scope.s = $scope.r.status;
$scope.d = {r: $scope.r, s: $scope.r.status, smethod: smethod};
$scope.type = function(value) { return typeof(value);}
$scope.sfunction = function() { return $scope.r.status; }
$scope.dfunction = function() { return $scope.d.r.status; }
$.ajax({
url:'http:/undefined.html',
success: function() {$log.log('success');},
error: function(result) {
$log.log(result.status);
$scope.r = result;
$scope.s = $scope.r.status;
$scope.d = {r: $scope.r, s: $scope.r.status, smethod: smethod};
$scope.$apply();
},
});
}