title: Add authorization header to clicked link
body: <p>I am new to Angular and inherit an old version so bear with me.</p>
  
  <p>My Angular 1.5.7 application needs to get files from my API server that is protected by Bearer Token Authentication <code>https://somedomain.com/api/doc/somefile.pdf</code>. So I need to set a header like this: <code>Authorization: Bearer xxxxxxxxxxxx</code>.</p>
  
  <p>I have tried to request files with <a href="https://www.getpostman.com/" rel="noreferrer">Postman</a> and setting the header <code>Authorization: Bearer xxxxxxxxxxxx</code> and that works.</p>
  
  <p>In Angular 1.5.7 I have in a view.html a link like this <code>&lt;a href="{{url}}" ng-show="url" target="_blank"&gt; PDF&lt;/a&gt;</code> where <code>{{url}}</code> = <code>https://somedomain.com/api/doc/somefile.pdf</code>.</p>
  
  <p>The problem is that I don't know how to add a header to the link. I think it is not possible. I have to make a link like this: <code>&lt;a&gt;PDF&lt;/a&gt;</code> and when clicked Angular takes over, open a new window and load the file there.</p>
  
  <p>I have looked at these Stack overflow questions that might solve my problem, but honestly I don't know how to implement the solutions:</p>
  
  <ul>
  <li><a href="https://stackoverflow.com/questions/21841426/add-http-header-in-javascript-to-requests-for-images">Add HTTP Header in JavaScript to requests for images</a></li>
  <li><a href="https://stackoverflow.com/questions/11876777/set-http-header-for-one-request">Set HTTP header for one request</a></li>
  </ul>
  
  <p><strong>UPDATE</strong></p>
  
  <p>My solution was to make a directive with the code below. It works because when clicking the link the <em>current</em> window already has set the authorization header and therefore access to the file is granted.</p>
  
  <pre><code>&lt;a href="https://somedomain.com/api/doc/somefile.pdf" ng-click="openPdf($event)"&gt;PDF&lt;/a&gt;
  
  function openPdf($event) {
      // Prevent default behavior when clicking a link
      $event.preventDefault();
  
      // Get filename from href
      var filename = $event.target.href;
  
      $http.get(filename, {responseType: 'arraybuffer'})
      .success(function (data) {
          var file = new Blob([data], {type: 'application/pdf'});
          var fileURL = URL.createObjectURL(file);
  
          // Open new windows and show PDF
          window.open(fileURL);
      });
  }
  </code></pre>