You can compile arbitrary HTML into an angular view with the $compile service (docs).
app.run(function($rootScope, $compile, $rootElement) {
// We'll create a new scope to use as the context for the view.
$scope = $rootScope.$new();
$scope.model = [{name: 'first'}, {name: 'second'}, {name: 'third'}];
// Calling `$compile(html)` returns a function that, when called with
// a context object, links the compiled HTML to the given context (e.g.
// binds scope-based expressions in the view to the passed in scope).
var html = "<div ng-repeat='m in model'>{{m.name}}</div>";
var linkingFunction = $compile(html);
var elem = linkingFunction($scope);
// You can then use the DOM element like normal.
$rootElement.append(elem);
});
In this case, I've attached the view to the $rootElement (which is the element that was used when bootstrapping the module, usually by the ng-app directive); in many cases, you'll do this kind of thing in a directive's linking function and will have access to the element in question. You can, of course, get the raw HTML using jQuery or jqLite, but remember to allow at least one digest cycle on the linked scope before you do so (or else the HTML won't yet have been updated with values from the scope).
Working example: http://jsfiddle.net/BinaryMuse/QHhVR/
Down in the bowels of the ng-include directive, Angular's doing this very thing:
$compile(currentElement.contents())(currentScope);
[Update]
Here is a more complete example that demonstrates something a bit closer to your updated question:
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);
});
}
};
});
<div ng-controller="MainController">
<div ng-repeat="t in ts" bind-compiled-html="t.html"></div>
</div>
Working example: http://jsfiddle.net/BinaryMuse/VUYCG/
It's worth nothing that the HTML snippets use t.elements and t.things because t is the scope value that is created by the ng-repeat in the outer HTML. You could do some scope gymnastics to make this a bit nicer if you like.
