Angular js load external HTML

by dshilkret

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.10/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.10/angular-route.js"></script>
<div ng-controller="MainCtrl">{{hello}}
    <iframe ng-bind-html="renderHtml(externalHTML)"></iframe>
</div>

CSS

iframe {
    width: 100%;
}

JavaScript

/* for this SO question:
http://stackoverflow.com/questions/28466241/angular-and-the-correct-way-to-load-a-webpage

it get's loaded but putting it in page is not working yet
*/

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


app.service('loadHtml', function ($http) {

    var myService = {
        async: function () {
            var promise = $http.jsonp('http://anyorigin.com/dev/get?url=http%3A//www.example.com/&callback=JSON_CALLBACK').then(function (response) {
                // The then function here is an opportunity to modify the response
                console.log(response);
                // The return value gets picked up by the then in the controller.
                return response.data;
            });
            return promise;
        }
    };
    return myService;
});

app.controller('MainCtrl', ['$scope', 'loadHtml', '$sce' , function ($scope, loadHtml, $sce) {
     $scope.renderHtml = function (htmlCode) {
            //return htmlCode;
            return $sce.trustAsHtml(htmlCode);
        };
    
    $scope.hello = 'hello world';
$scope.externalHTML = 'works';
    loadHtml.async().then(function(data) {
        $scope.externalHTML = data;
        console.log(data);
    });
}]);