angularjs expression in html <object> tag

Question

I have a scope like $scope.doc_details in my angularjs controller, and I want to use it to display a pdf file by using a tag, like this:

<object data="{{doc_details.file_url}}" type="application/pdf"></object>

but it doesn't get loaded in the browser, in my chrome console, all I see is:

Failed to load resource: the server responded with a status of 404 (Not Found) 
http://localhost/%7B%7Bdoc_details.file_url%7D%7D

and when I just display it using <span>{{doc_details.file_url}}</span> it show the value.

Answer 1

As of AngularJS 1.1.4, you can use the ng-attr- prefix for the data attribute:

<object ng-attr-data="{{doc_details.file_url}}" type="application/pdf"></object>

See the ngAttr for binding to arbitrary attributes section on AngularJS: Interpolation and data-binding.