JSFiddle - React, Tailwind, and code Playground

HTML

<html ng-app='app'>
    <body ng-controller='main'>
        <pdf src="doc_details.file_url"></pdf>
    </body>
</html>

JavaScript

var app = angular.module('app', []);

app.directive('pdf', function() {
    return {
        restrict: 'E',
        link: function(scope, element, attrs) {
            var url = scope.$eval(attrs.src);
            element.replaceWith('<object type="application/pdf" data="' + url + '"></object>');
        }
    };
});

app.controller('main', function($scope) {
    $scope.doc_details = {
        file_url: 'http://samplepdf.com/sample.pdf'
    };
});