[SOLVED] Displaying raw XML in mdDialog

Displaying raw XML in mdDialog

I'm trying to display some XML as is in an $mdDialog using Angular Material. If I display it using a standard alert, I see the XML as I'd expect, but $mdDialog or Angular is stripping all of the tags from it.

Here's the code. Neither of the commented out lines make a difference as far as the XML is concerned.

             function displayFile(data, fieldName) {
                   var content = eval("data." + fieldName);
                   alert(content);

                   if (content) {
                       //content = $sanitize(content);
                       //content = $sanitize("<code>" + content + "</code>");
                   } else {
                       content = fieldName + " does not contain any content.";
                   };
                   var myAlert = $mdDialog.alert({
                       title: data.FILE_NAME,
                       content: content,
                       ok: 'Close'
                   });
                   $mdDialog
                       .show(myAlert)
                       .finally(function () {
                           myAlert = undefined;
                       });
               };

Any ideas?

Solution

Putting up your own solution post in google group (so that it stays as a reference for all):

angular.module('myApp', ['ngMaterial'])
  .controller('mdDialogController', mdDialogController)

mdDialogController.$inject = ["$mdDialog"]

function mdDialogController($mdDialog) {
    vm = this;
    vm.show = function() {
      var xml = "\
          <header> \
              <detail>\
                  <item>item1</item>\
                  <item>item2</item>\
              </detail> \
           </header>"

      var myAlert = $mdDialog.alert({
        title: "Show me the XML",
        content: xml,
        ok: 'Close'
      });
      $mdDialog
        .show(myAlert)
        .finally(function() {
          myAlert = undefined;
        });
    };
};

<html xmlns="http://www.w3.org/1999/xhtml" ng-app="myApp">
<head>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/angular-material/0.11.4/angular-material.min.css" />
  <title>mdDialog test</title>
</head>
<body>  
<div ng-controller="mdDialogController as dialog">
     <md-button ng-click="dialog.show()">
       Show Dialog
      </md-buton>
  </div> 
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular-animate.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular-aria.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular-resource.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular-sanitize.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angular_material/0.11.4/angular-material.min.js"></script>
  </body>