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">
    JSON: <input type="text" ng-model="json" />
    <br/>
    <my-download id="content" data="json" />
</div>
    
</div>

JavaScript

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

module.controller('MyCtrl', function ($scope){
    $scope.json = JSON.stringify({a:1, b:2});
});

module.directive('myDownload', function ($compile) {
    return {
        restrict:'E',
        scope:{ data: '=' },
        link:function (scope, elm, attrs) {
            function getUrl(){
                return URL.createObjectURL(new Blob([JSON.stringify(scope.data)], {type: "application/json"}));
            }
            
            elm.append($compile(
                    '<a class="btn" download="backup.json"' +
                    'href="' + getUrl() + '">' +
                    'Download' +
                    '</a>'
            )(scope));                    
     
            scope.$watch(scope.data, function(){
                elm.children()[0].href = getUrl();
            });
        }
    };
});