title: How can I download a file using AngularJS?
body: <p>I want to list all the files(from a directory) in the view. When I click anyone of them. Then the corresponding file must be downloaded.
  <strong>Note</strong>: I am working in a windows machine.</p>
  
  <p>I have the following code,</p>
  
  <h2>Controller code:</h2>
  
  <pre><code>$scope.files = [{"name":"aaa.txt", "path":"C:\\Documents and Settings\\Administrator\\Desktop\\MyFolder\\aaa.txt"},
                  {"name":"bbb.PNG", "path":"C:\\Documents and Settings\\Administrator\\Desktop\\MyFolder\\bbb.PNG"},
                  {"name":"ccc.xlsx", "path":"C:\\Documents and Settings\\Administrator\\Desktop\\MyFolder\\ccc.xlsx"}];
  </code></pre>
  
  <h2>MyFile.tpl.html</h2>
  
  <pre><code>&lt;div ng-repeat="file in files"&gt; 
       &lt;a target="_self" download="{{file.name}}" href="{{file.path}}"&gt;{{file.name}} &lt;/a&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>But Its not working as expect.</p>
  
  <p>If I use <code>href="{{file.path}}"</code> or <code>ng-href="{{file.path}}"</code>, <code>unsafe:</code> is automatically appended with the href url.</p>
  
  <p>My angular version is 1.2.7, So i tried with adding the following code in my controller</p>
  
  <pre><code>angular.module('myModule', [], function ($compileProvider) {
  
      $compileProvider.aHrefSanitizationWhitelist(/^\s*(https?|ftp|mailto|file):/);
  
  });
  </code></pre>
  
  <p>Still <code>unsafe:</code> exists in the href.</p>
  
  <p>I don't think I can download if I remove <code>unsafe:</code></p>
  
  <p>Since I tried with hard-coded path for eg: <code>href or ng-href="C:\\Documents and Settings\\Administrator\\Desktop\\MyFolder\\bbb.PNG"</code> but not able to download the file.</p>
  
  <p><strong>Note:</strong> Its not a matter whether its <code>\\</code> or <code>/</code>. Both are not working 
  Whats wrong with my code. How can achieve this?</p>