XML : Syntax highlighted code snippet wont display with AngularJs ngBind

I used some Syntax highlighting API for highlighting code snippet for my web application.To do that i have used highlightjs .I created popup model and inside model i have put <pre> tag and when model open it should display my highlighted xml string.

HTML Code snippet

  <pre id="tepXml" ><code class="xml">{{tepXml}}</code></pre>    

In AngularJs controller dynamically bind the value to tepXml from server.

AngularJs controller

  ...$promise.then(function(data){      $scope.tepXml=data.xml;  }    

But the problem was that when i open popup model my xml content is empty.nothing display anything.But when i removed <code class="xml"></code> from <pre> xml content would display with out highlighting.I referred some posts and used $compile in angularJs controller but the problem was still the same.

AngularJs controller with $compile

   var target = angular.element($window.document.querySelector('#tepXml'));   var myHTML = data.xml;   target.append( $compile( myHTML )($scope) );    

If someone knows where i went wrong please point me out.