JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://code.angularjs.org/1.0.0/angular-1.0.0.js"></script>
<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<div ng-app="myApp">

<div ng-controller="MyCtrl">
    <my-download id="content" get-data="getBlob()" />
</div>
    
</div>

JavaScript

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

module.controller('MyCtrl', function ($scope){
    var data = {a:1, b:2, c:3};
    var json = JSON.stringify(data);
    
    $scope.getBlob = function(){
        return new Blob([json], {type: "application/json"});
    }
});

module.directive('myDownload', function ($compile) {
    return {
        restrict:'E',
        scope:{ getUrlData:'&getData'},
        link:function (scope, elm, attrs) {
            var url = URL.createObjectURL(scope.getUrlData());
            elm.append($compile(
                '<a class="btn" download="backup.json"' +
                    'href="' + url + '">' +
                    'Download' +
                    '</a>'
            )(scope));
        }
    };
});