Demo user of $evalAsync to make changes to scope after $.ajax returns

<!DOCTYPE html>
<html ng-app="TestApp">
  <head>
    <script data-require="angular.js@1.3.17" data-semver="1.3.17" src="https://code.angularjs.org/1.3.17/angular.js"></script>
    <script data-require="jquery@2.1.4" data-semver="2.1.4" src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body ng-controller="MainController">
    <h1>{{message}}</h1>
    <pre>
      {{data}}
    </pre>
    <button ng-click="getData()">Get Data</button>
  </body>

</html>

// Code goes here
var app = angular.module('TestApp', []);

app.controller('MainController', function ($scope) {
  $scope.getData = function () {
    $.ajax({
      type: 'POST',
      url: 'http://httpbin.org/post',
      success: function (response) {
        $scope.$evalAsync(function () {
          $scope.message = 'Data recevied';
          $scope.data = response;
        });
      }
    });
  };
});

/* Styles go here */