title: Directive to create a[download] button
body: <p>I got help to save json as file in client side <a href="https://stackoverflow.com/questions/16329293/save-json-string-to-client-pc-using-html5-api">here</a>. Code is very short as in this fiddle.</p>
  
  <pre><code>var a = document.createElement('a');
  a.download    = "backup.json";
  a.href        = url;
  a.textContent = "Download backup.json";
  
  document.getElementById('content').appendChild(a);
  </code></pre>
  
  <p>I was trying to create an angularjs directive so that it calls a method in scope to get the data. Along this line. </p>
  
  <pre><code>module.directive('myDownload', function ($compile) {
      return {
          restrict:'E',
          scope:{ getData:'&amp;getData'},
          link:function (scope, elm, attrs) {
              elm.append($compile(
                  '&lt;a class="btn" download="backup.json"' +
                      'href=' + scope.getData() + '&gt;' +
                      'Download' +
                      '&lt;/a&gt;'
              )(scope));
          }
      };
  });
  </code></pre>
  
  <p>This doesn't work. How can make the <a href="http://jsfiddle.net/potatosalad/yuM2N/" rel="nofollow noreferrer">linked fiddle</a> into a directive?</p>