Object html tag data attribute not working with angularjs binding in IE11 <p>I got any application where I need to display file from urls I got in database. Now this file can be an image and it can be a pdf. So I need to set some binding dynamically. I looked on internet and object tag looked promising but it is not working in IE11. It is working fine in Chrome and Firefox. SO that is why I am asking here for help. </p> <p>I have created a directive just to make sure If we have to do any dom manipulation. Here goes my directive code.</p> <pre><code>mainApp.directive("displayFile", function () { return { restrict: 'AE', // only activate on element attribute scope: { displayFile: "=", fileType:"=" }, link: function (scope, elem, attrs) { scope.filePath = ""; var element = angular.element(elem); // observe the other value and re-validate on change scope.$watch('displayFile', function (val) { if (val !== "") { scope.filePath = val; scope.type="application/"+ fileType; //element.attr("data", scope.filePath) } }); }, template: '&lt;object data="{{filePath}}" type="{{type}}"&gt;' } }); </code></pre> <p>My html for directive</p> <pre><code>&lt;div data-display-pdf="fileUrl" file-type="type"&gt;&lt;/div&gt; </code></pre> <p>Attaching an image also for IE and Chrome/FF output<img src="https://i.stack.imgur.com/dDYMC.png" alt="enter image description here"></p> <p>Above image is a comparison between IE and FF</p>