ng-bind-html not recognizing ID names

Question

I'm using ng-bind-html and it pulls in the HTML with class names, but the id names are all missing. What is causing this?

actual code example:

service partial example

  var assets = {
      'sampleInvoice': '<div id="invoice-div"><table id="invoice-table-id" cellspacing="0" cellpadding="0" border="0"><tbody>......
    }

  controller portion:

    $scope.invoiceDetails = function(params) {
        console.log("Here I am ");
        var modalInstance = $uibModal.open({
            templateUrl: 'invoice-details-modal',
            controller: 'invoiceDetailsCtrl',
            windowClass: 'invoice-details-modal',
            resolve: {
                invoice: function resolveInvoiceTemplate($q) {
                    return $q.resolve($templateCache.get("sampleInvoice"));
                }
            }
        });

HTML Part

  <div ng-bind-html="invoice"></div>

What it's producing:

<div><table cellspacing="0" cellpadding="0" border="0"><tbody><tr valign="top"><td><table cellspacing="0" cellpadding="0" border="0"><tbody><tr><td class="invoice-logo-td"><div class="invoice-logo">....

Notice the class names are there, but the ids are gone. Now, I can switch all the ids to classes as a work around, but it seems like it should be able to recognize id names as well.

Does anyone know why this is happening? (Yes, I injected ngSanitize)

Thanks in advance!

Answer 1

Stripping id's from elements in an intentional sanitation. You can see the original commit that caused this back in v1.0.0-rc2.

The reasoning isn't given in the commit, but a later issue filed against angularjs about striping id's from img tags explains this:

the reason why we strip out id and name is that browsers put them on window

<div id="angular"> would overwrite the window.angular with an element. This is considered a security issue and so we don't allow it.

— mhevery