Javascript 将Google Earth JS API与AngularJS集成

我对angular比较陌生，并尝试将其与google earth的javascript API集成

我在这两方面都做了一些工作，但从未尝试将它们结合使用。我的动机是以角度的方式使用google earth模块，使用控制器等来操纵地图

我希望google模块能够像上面链接中的d3模块一样，通过一个加载脚本的工厂提供。然后，在加载脚本时可以使用google模块

我已经将其用于d3模块：

angular.module('d3', [])
.factory('d3Service', ['$document', '$window', '$q', '$rootScope',
    function($document, $window, $q, $rootScope) {
        var d = $q.defer(),
            d3service = {
                d3: function() { return d.promise; }
            };
        function onScriptLoad() {
            // Load client in the browser
            $rootScope.$apply(function() { d.resolve($window.d3); });
        }
        var scriptTag = $document[0].createElement('script');
        scriptTag.type = 'text/javascript';
        scriptTag.async = true;
        scriptTag.src = 'http://d3js.org/d3.v3.min.js';
        scriptTag.onreadystatechange = function () {
            if (this.readyState == 'complete') onScriptLoad();
        }
        scriptTag.onload = onScriptLoad;

        var s = $document[0].getElementsByTagName('body')[0];
        s.appendChild(scriptTag);

        return {
            d3: function(){ return d.promise; }
        };
    }]);

然后可通过指令获得：

    .directive('d3Bars', ['$window', '$timeout', 'd3Service',
    function($window, $timeout, d3Service) {
        return {
            restrict: 'A',
            scope: {
                data: '=',
                label: '@',
                onClick: '&'
            },
            link: function(scope, ele, attrs) {
                d3Service.d3().then(function(d3) {
                    //code...
            }}
    }]);

我试图重写此代码以加载google loader JS模块：

然后用“谷歌”替换“d3”。ofc是scripTag.src变量。这应该是正确的吗

function onScriptLoad() {
// Load client in the browser
      $rootScope.$apply(function() { d.resolve($window.google); });
}

然后我有一个简单的指令，我想使用GoogleJS对象来加载EarthAPI。 “getApi”模块类似于上面d3工厂中的“d3service”

    .directive('mapFrame' ['$window', '$timeout', 'getApi',
    function($window, $timeout, getApi) {
        return {
            restrict: 'E',
            scope: {},
            link: function(scope, elements, attrs) {
                getApi.google().then(function(google) {
                    console.log(google);
                    google.load("earth", "1");
                    //more code..
                });
            }
        }
}])

在html文件中：

<div map-frame></div>

这种方法适用于d3。我将脚本加载到DOM中，并可以显示一些图表，这在google模块中似乎不会发生。看起来该指令从未调用工厂，因为javascript从未加载到DOM中

我错过了什么，或者说这不可能吗

谢谢