Fiddle: BrandonTilley.com: AngularJS Example

AngularJS 1.1.5 Includes jQuery

by BinaryMuse

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.1.4/angular.min.js"></script>
<div ng-controller="MainController">
  <div ng-repeat="t in ts" bind-compiled-html="t.html"></div>
</div>

JavaScript

// http://stackoverflow.com/questions/18690804/insert-and-parse-html-into-view-using-angularjs

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

app.controller("MainController", function($scope) {
  $scope.ts = [
    {
      elements: ['one', 'two', 'three'],
      html: '<div ng-repeat="elem in t.elements">{{elem}}</div>'
    },
    {
      things: [8, 9, 10],
      add: function(target) {
        var last = target[target.length - 1];
        target.push(last + 1);
      },
      html: '<ul><li ng-repeat="num in t.things">{{num}}</li>' +
        '<li><button ng-click="t.add(t.things)">More</button></li></ul>'
    }
  ];
});

app.directive("bindCompiledHtml", function($compile, $timeout) {
  return {
    template: '<div></div>',
    scope: {
      rawHtml: '=bindCompiledHtml'
    },
    link: function(scope, elem, attrs) {
      scope.$watch('rawHtml', function(value) {
        if (!value) return;
        // we want to use the scope OUTSIDE of this directive
        // (which itself is an isolate scope).
        var newElem = $compile(value)(scope.$parent);
        elem.contents().remove();
        elem.append(newElem);
      });
    }
  };
});