ng-bind-html change the html structure, why? - html

Question

I get HTML code from the backend via $http of AngularJS, and log the code retrieved and is OK, but to see it in the browser, the html structure changed.
This is the code that I get:
<a href=" http://www.google.com" target="_blank">
<figure>
<img class="img-responsive" src="/sites/Satellite;jsessionid=pk_tbxorbyJ4KrsWxo1jaVBFYvQPx1VovEs2GpjWziIk6cFaL50_!650994948?blobcol=urldata&blobkey=id&blobtable=MungoBlobs&blobwhere=1462843196206&ssbinary=true" />
</figure>
<p> Some text</p>
</a>
and this is what the browser displays:
<a href=" http://www.google.com" target="_blank">
</a>
<figure>
<img class="img-responsive" src="/sites/Satellite;jsessionid=pk_tbxorbyJ4KrsWxo1jaVBFYvQPx1VovEs2GpjWziIk6cFaL50_!650994948?blobcol=urldata&blobkey=id&blobtable=MungoBlobs&blobwhere=1462843196206&ssbinary=true">
</figure>
<p> some text</p>
Then I did the following test, log the code retrieved
$log.debug(vm.myHtml);
and then sanitize the code with
$log.debug($sce.getTrustedHtml(vm.myHtml))
and I get the same previous difference.

Answer 1

I was having the same problem and so played around with the Plunker available on the AngularJS docs.
I then modified it by placing some <h1> tags within <a> tags (see this plunker). The good news was that it worked in this most basic case. This had me scratching my head for ages.
In the end, I was just guessing that maybe the version of ngSanitize that I was using was maybe a little old and at some point they had slightly changed the way the tags were mapped, split and then rendered. I looked through the history but couldn't find anything. In the end, i updated to 1.5.7 the same as the version in the plunker. And smiling again :)