title: How to do XMLHttpRequest (AJAX) with AngularJS
body: <p>I'm trying to use <code>AngularJS</code> within an POST request, but I cannot use <code>$scope</code> within the event.</p>
  
  <p>Thats my code (for demonstration purpose I just add status within the Angular construct):</p>
  
  <pre><code>myApp.controller('myController', function myController($scope) {
      $scope.myVal = [{status:"before (working)"}];
  
      doRequest(p1, p2, myCallback.bind(null, $scope));
  
      function myCallback($scope, a) {
          $scope.myVal = [{ status: a }];
      }
  
      function doRequest(p1, p2, callback) {
          $scope.myVal = [{ status: "prepare request (working)" }];
  
          var xhr = new XMLHttpRequest();
          var url = "http://...";
          xhr.open("POST", url, true);
          //....
          xhr.send(myQuery);
  
          $scope.myVal = [{ status: "after post send (working)" }];
          callback("after post via callback (working)");
  
          //callback working till this point
  
          xhr.onreadystatechange = function () {
  
              if (xhr.readyState === 4 &amp;&amp; xhr.status === 200) {
                  callback("in event (NOT working)"); 
                  //This is NOT working anymore (even this point is reached)!
              }
          };
      }
  </code></pre>
  
  <p>as added via comments in the code, the callback is working till the EventHandler assignment.</p>
  
  <p>What I'm looking for is: How to use the callback (or more precise how to make <code>$scope</code> available/transfered in the event handler function)?</p>