AngularJS - include source code of a template in a <code> element

Question

I have a json array that I iterate through like so...

<div class="panel panel-primary" ng-repeat="c in components">
    <div class="panel-body">
        <h2>{{c.title}}</h2>
        <div ng-include="c.template"></div>
    </div>
</div>

The ng-include loads the html template file, i.e. 'components/blockquote.html'

Is there a way to also load the source code from that html file as well, so you can show the component next to the source in an element like so..

<div class="panel panel-primary" ng-repeat="c in components">
    <div class="panel-body">
        <h2>{{c.title}}</h2>
        <div ng-include="c.template"></div>
        <code>
          <blockquote>
            <p>This text is quoted.
          </blockquote>
        </code>
    </div>
</div>

Answer 1

Since you know the template url, you could load it using AJAX like you would load any other (e.g. json) resource. Then you can simply display it in your template and will show the actual html code since by default it will be treated as a unsafe html.