Adding ld+json structured data to AngularJs app

AppleLdJsonExample.js

/*  visit www.apple.com and look at
    the source code to find it.
*/
<script type="application/ld+json">
	{
		"@context": "http://schema.org",
		"@id": "https://www.apple.com/#organization",
		"@type": "Organization",
		"name": "Apple",
		"url": "https://www.apple.com/",
		"logo": "https://www.apple.com/ac/structured-data/images/knowledge_graph_logo.png?201703170823",
		"contactPoint": [
			{
				"@type": "ContactPoint",
				"telephone": "+1-800-692-7753",
				"contactType": "sales",
				"areaServed": [ "US" ]
			}
		],
		"sameAs": [
			"http://www.wikidata.org/entity/Q312",
			"https://www.youtube.com/user/Apple",
			"https://www.linkedin.com/company/apple",
			"https://www.facebook.com/Apple",
			"https://www.twitter.com/Apple"
		]
	}
</script>

Controller.js

app.controller('homeController', ['$scope', function ($scope) {
   
    $scope.$root.ld = {
        "@context": "http://schema.org/",
        "@type": "WebSite",
        "name": 'My Wonderful Site',
        "image": "https://mywonderfulsite.com/logo.png",
        "description": 'We have the best content in the world',
        "url": 'https://mywonderfulsite.com/'
    }
  
}]);

RichCardDirective.js

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

app.directive('richcard', ['$sce', '$filter', function ($sce, $filter) {
    return {
        restrict: 'EA',
        link: function (scope, element) {
            scope.$watch('ld', function (val) {
                var val = $sce.trustAsHtml($filter('json')(val));
                element[0].outerHTML = '<script type="application/ld+json">'+ val + '</script>'
            });
        }
    };
}]);

checking