javascript - Angular Directive - Adding an anchor dynamically the click doesn't fire in Internet Explorer -

i have following directive code creates anchor tag purpose of downloading csv content. works in both chrome , firefox not in ie 11 or edge. there wrong doing here? thoughts on better way? clues appreciated.

thanks!

     function link(scope, element, attrs) {              // var el = element[0];             element.bind('click', function(e){                 //var table = e.target.nextelementsibling;                 var table = angular.element( document.queryselector( '#' + scope.exporttable ) )[0];                 var csvstring = '';                 for(var i=0; i<table.rows.length;i++){                     var rowdata = table.rows[i].cells;                     for(var j=0; j<rowdata.length;j++){                         csvstring = csvstring + _.replace(rowdata[j].innerhtml,',','') + ",";                     }                     csvstring = csvstring.substring(0,csvstring.length - 1);                     csvstring = csvstring + "\n";                 }                 csvstring = csvstring.substring(0, csvstring.length - 1);                  var anchorelement = document.createelement('a');                   var anchor = angular.element(anchorelement);                 anchor.attr({                     style: 'display:none',                     href: 'data:application/octet-stream;base64,' + btoa(csvstring),                     download: scope.exportfilename                 });                  document.body.appendchild(anchorelement);                 anchorelement.click();                 anchor.remove();             });     }