Remove encoded html with angularjs

Question

i have a problem in removing html code from a text with the ng-bind-html option of angularjs.

My text originally is like this:

'<p><!--[if gte mso 9]><xml> <w:WordDocument>  <w:View>Normal</w:View>  <w:Zoom>0</w:Zoom>  <w:HyphenationZone>14</w:HyphenationZone>  <w:PunctuationKerning/>  <w:ValidateAgainstSchemas/>  <w:SaveIfXMLInvalid>false</w:SaveIfXMLInvalid>  <w:IgnoreMixedContent>false</w:IgnoreMixedContent>  <w:AlwaysShowPlaceholderText>false</w:AlwaysShowPlaceholderText>  <w:Compatibility>   <w:BreakWrappedTables/>   <w:SnapToGridInCell/>   <w:WrapTextWithPunct/>   <w:UseAsianBreakRules/>   <w:DontGrowAutofit/>  </w:Compatibility>  <w:BrowserLevel>MicrosoftInternetExplorer4</w:BrowserLevel> </w:WordDocument></xml><![endif]--></p><p><!--[if gte mso 9]><xml> <w:LatentStyles DefLockedState="false" LatentStyleCount="156"> </w:LatentStyles></xml><![endif]--><!--[if gte mso 10]><style> /* Style Definitions */ table.MsoNormalTable {mso-style-name:"Tabella normale"; mso-tstyle-rowband-size:0; mso-tstyle-colband-size:0; mso-style-noshow:yes; mso-style-parent:""; mso-padding-alt:0cm 5.4pt 0cm 5.4pt; mso-para-margin:0cm; mso-para-margin-bottom:.0001pt; mso-pagination:widow-orphan; font-size:10.0pt; font-family:"Times New Roman"; mso-ansi-language:#0400; mso-fareast-language:#0400; mso-bidi-language:#0400;}</style><![endif]--> <span mso-fareast-language:="" new="" style="font-size:10.0pt;line-height:115%;font-family:FuturaStd-Book;mso-fareast-font-family:" times="">'il senso del progetto riguarda soprattutto la costruzione di se stessi’. il progetto è per ag fronzoni il punto di partenza e di arrivo della sua ricerca, non è solo la realizzazione di un manufatto, ma è un processo di trasformazione dell’ambiente umano e dei suoi strumenti che può condizionare l’intera vita di un individuo.</span></p>'

But this is the result:

<p><!--[if gte mso 9]><xml> <w:WordDocument> <w:View>Normal</w:View> <w:Zoom>0</w:Zoom> <w:HyphenationZone>14</w:HyphenationZone> <w:PunctuationKerning/> <w:ValidateAgainstSchemas/> <w:SaveIfXMLInvalid>false</w:SaveIfXMLInvalid> <w:IgnoreMixedContent>false</w:IgnoreMixedContent> <w:AlwaysShowPlaceholderText>false</w:AlwaysShowPlaceholderText> <w:Compatibility> <w:BreakWrappedTables/> <w:SnapToGridInCell/> <w:WrapTextWithPunct/> <w:UseAsianBreakRules/> <w:DontGrowAutofit/> </w:Compatibility> <w:BrowserLevel>MicrosoftInternetExplorer4</w:BrowserLevel> </w:WordDocument></xml><![endif]--></p><p><!--[if gte mso 9]><xml> <w:LatentStyles DefLockedState="false" LatentStyleCount="156"> </w:LatentStyles></xml><![endif]--><!--[if gte mso 10]><style> /* Style Definitions */ table.MsoNormalTable {mso-style-name:"Tabella normale"; mso-tstyle-rowband-size:0; mso-tstyle-colband-size:0; mso-style-noshow:yes; mso-style-parent:""; mso-padding-alt:0cm 5.4pt 0cm 5.4pt; mso-para-margin:0cm; mso-para-margin-bottom:.0001pt; mso-pagination:widow-orphan; font-size:10.0pt; font-family:"Times New Roman"; mso-ansi-language:#0400; mso-fareast-language:#0400; mso-bidi-language:#0400;}</style><![endif]--> <span mso-fareast-language:="" new="" style="font-size:10.0pt;line-height:115%;font-family:FuturaStd-Book;mso-fareast-font-family:" times="">'il senso del progetto riguarda soprattutto la costruzione di se stessi’. il progetto è per ag fronzoni il punto di partenza e di arrivo della sua ricerca, non è solo la realizzazione di un manufatto, ma è un processo di trasformazione dell’ambiente umano e dei suoi strumenti che può condizionare l’intera vita di un individuo.</span></p>

Here it is a jsfiddle representing my issue: jsfiddle

What can i do?

Answer 1

You need to bind as unsafe html, as follows:

<div ng-controller="MyCtrl">
  Hello, {{name}}!
  <div ng-bind-html-unsafe="my_html | to_trusted"></div>
</div>

Answer 2

NgSanitize can't transform your string to html. You can achieve this using jQuery like:

return $('<div/>').html(text).text()

Working fiddle