Generating JSON-LD with AngularJS

I am generating JSON-LD in a script tag in the body section using this solution in AngularJS 1.4.8. The directive is defined as

myApp.directive('jsonld', ['$filter', '$sce', function($filter, $sce) {
  return {
    restrict: 'E',
    template: function() {
      return '<script type="application/ld+json" ng-bind-html="onGetJson()"></script>';
    },
    scope: {
      json: '=json'
    },
    link: function(scope, element, attrs) {
      scope.onGetJson = function() {
        return $sce.trustAsHtml($filter('json')(scope.json));
      }
    },
    replace: true
  };
}]);

And jsonId is defined in the controller

myApp.controller('MyWorkCtrl',['$scope', '$routeParams', '$http', function($scope, $routeParams, $http){
    $http.get('/works/' + $routeParams.workId + '.json').success(function(data) {   
        $scope.work = data;
        $scope.jsonId = {
            "@context": "http://schema.org",
            "@type": "Book",
            "creator": data['authors'],
            "name": data['title'],
            "isbn": data['isbn'],
            "bookFormat": data['page_size'],
            "numberOfPages": data['pages'],
            "translator": data['translators'],
            "image": data['image']
        };
    });    
}]);

Then it's just a matter of placing the directive

  <jsonld data-json="jsonId"></jsonld>

It works fine, except that the script tag with Json-LD is generated in the body. How could I move it to head section as Google recommends?