Angular.js: $compile of html including ng-include resolves in a comment only

[PoOoZaQ]

I have the following code working well with Angular 1.1:

var newScope = $scope.$new();
angular.extend(newScope, data);
var newHtml = $compile("<ng-include src=\"'partials/geo/popups/click/marker-InstagramPost.html'\"></ng-include>")(newScope)

The result I get is:

<ng-include src="'partials/geo/popups/click/marker-InstagramPost.html'" class="ng-scope"></ng-include>

When I run this same code in Angular 1.3.15, the result is:

<!-- ngInclude: undefined -->

The first is the ng-include element, the second is just a comment.
I've read that this behavior makes sense as the first child is a comment and the second is the ng-include, but no idea how to make it work.

[gkalpak]

It's hard to tell without more context, but it might be related to the fact that there needs to be a parent.
E.g. either appending the element before compiling it or wrapping it in a <div> might do the trick:

E.g. 1:

...
var newElem = angular.element('<ng-include ...></ng-include>');
angular.element($document[0].body).append(newElem);
$compile(newElem)(newScope);

E.g. 2:

...
var newElem = $compile('<div><ng-include ...></ng-include></div>')(newScope);

That said, why do you need that HTML ? It might be an indication that you are not doing things _"the Angular way"_ (but again it's hard to tell without more context).

[PoOoZaQ]

Hey @gkalpak thanks for your reply.
I'll work on a plunkr to best describe the scenario.

Meanwhile I'll give some context:
I have an infinite scroll list of items, when clicking an item it will open a dialog with their details (text, images, videos etc.)
I don't know which html I need to load (the items have 3 different sources, each source is displayed differently - the name of the html is chosen dynamically depending on the -source- field of the item).

So upon clicking an item, I ng-include the relevant html, load its data (that I got from the server) into its scope and the magic is done.

[PoOoZaQ]

Not so sure why, but I solved it by dynamically creating a div element, injecting its html and passing that to the $compile.

Like this:
var html = "<ng-include src=\"'" + templateUrl + "'\"></ng-include>";
var div = $('<div>');
div.html(html);
var newHtml = $compile(div)(newScope);

[aborchew]

Thanks @PoOoZaQ that helped me out a bunch!