Deferred include async

Using latest CI build path.

HTML

<script src="http://ci.angularjs.org/job/angular.js-angular-master/ws/build/angular.js"></script>
<div ng-app="myModule" ng-controller="MyController">
    <h5>{{intro}}</h5>
    <div id="generalContainer">
        <div id="settingsContainer"> Going to replace here</div>
    <div>
</div>

CSS

body {padding:5px;}
#settingsContainer {
    border:solid 1pt black;
    padding: 5px; margin: 5px; 
}

JavaScript

var myModule = angular.module('myModule', []);

function MyController($scope, $compile, RemoteServices) {
    $scope.remoteServices = RemoteServices;
    $scope.salute = "Hello";
    $scope.intro = "Testing remote include.";
    $scope.sayHello = function() {
        alert("Hello from My Controller");
    }
        
    // Load in the remote info.
    RemoteServices.getRemoteInfo($scope, $compile);
}
        
myModule.factory('RemoteServices', 
    ['$http','$defer', function($http, $defer) {

        return {
            getRemoteInfo: function(scope, compile) {
                this.scope = scope;
                this.compile = compile;
                
                // Mimic request.
                new Request.HTML({
                    url: '/echo/html/',
                    data: {
                        delay: 2
                    },
                    method: 'post',
                    onSuccess: function(response) {
                        var containerElement = angular.element(document.id('settingsContainer'));
                        var replacementHTML = '<div id="partialHtml">{{salute}} There!<br/><button ng-click=\'sayHello()\'>say hello</button></div>';
                        var clone = compile(replacementHTML)(scope, function(clone) {
                            $defer(function() {
                                containerElement.html('').append(clone);                
                            }, 0);
                        });
                    }
                }).send();
            }
        }
}]);