Templates cache

http://angularjs.org/

HTML

<script type="text/ng-template" id="test1" src="https://tools.ietf.org/html/rfc1918">inside</script>
<script type="text/ng-template" id="test2" src="https://s3.ap-south-1.amazonaws.com/storefront-assets/saleWeb.html"></script>

<div ng-controller="MyCtrl">
  Select:
<a href ng:click="tpl='first.html'">internal</a>
     | <a href ng:click="openTemplate('test1')">ietf.org</a>
     | <a href ng:click="openTemplate('test2')">amazonaws</a>
    <div style="border: 1px solid;min-height: 20px"><ng:include src="tpl"></ng:include></div>
</div>

JavaScript

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

.config(function($sceDelegateProvider) {
    $sceDelegateProvider.resourceUrlWhitelist([
        // Allow same origin resource loads.
        'self',
        // Allow loading from outer templates domain.
        'https://tools.ietf.org/**',
        'https://s3.ap-south-1.amazonaws.com/**'
    ]);
})

.controller('MyCtrl', function($scope, $templateCache, $sce) {
    $templateCache.put('first.html', 'First template');
    
    $scope.openTemplate = function(id) {
        var src = document.querySelector('script[id="' + id + '"]').getAttribute('src');
        $scope.tpl = $sce.getTrustedResourceUrl(src);
    };
});