title: How to Display blob (.pdf) in an AngularJS app
body: <p>I have been trying to display pdf file which I am getting as a blob from a <code>$http.post</code> response. The pdf must be displayed within the app using <code>&lt;embed src&gt;</code> for example.</p>
  
  <p>I came across a couple of stack posts but somehow my example doesn't seem to work.</p>
  
  <p><strong>JS:</strong></p>
  
  <p>According to <a href="https://developer.mozilla.org/en-US/docs/Web/API/Blob" rel="noreferrer">this doc</a>, I went on and tried...</p>
  
  <pre><code>$http.post('/postUrlHere',{myParams}).success(function (response) {
   var file = new Blob([response], {type: 'application/pdf'});
   var fileURL = URL.createObjectURL(file);
   $scope.content = fileURL;
  });
  </code></pre>
  
  <p>Now from what I understand, <code>fileURL</code> creates a temporary URL that the blog can use as a reference.</p>
  
  <p><strong>HTML:</strong></p>
  
  <pre><code>&lt;embed src="{{content}}" width="200" height="200"&gt;&lt;/embed&gt;
  </code></pre>
  
  <p>I am not sure how to handle this in Angular, the ideal situation would be to <strong>(1)</strong> assign it to a scope, <strong>(2)</strong> 'prepare/rebuild' the blob to a pdf <strong>(3)</strong> pass it to the HTML using <code>&lt;embed&gt;</code> because I want to display it within the app.</p>
  
  <p>I have been researching for more than a day now but somehow I can't seem to understand how this works in Angular... And let's just assume the pdf viewer libraries out there weren't an option.</p>