Loading Javascript when needed using AngularJS

If you are using third party libraries, you can load them when needed using a lazy load option like this:

Create a service:

.service('lazyLoad', ['$document', '$q', '$timeout', function ($document, $q, $timeout) {

    function loader(createElement) {
        var promises = {};

        return function (url) {
            if (typeof promises[url] === 'undefined') {
                var deferred = $q.defer();
                var element = createElement(url);

                element.onload = element.onreadystatechange = function (e) {
                    $timeout(function () {
                        deferred.resolve(e);
                    });
                };
                element.onerror = function (e) {
                    $timeout(function () {
                        deferred.reject(e);
                    });
                };

                promises[url] = deferred.promise;
            }

            return promises[url];
        };
    }


    this.loadScript = loader(function (src) {
        var script = $document[0].createElement('script');

        script.src = src;

        $document[0].body.appendChild(script);
        return script;
    });


    this.loadCSS = loader(function (href) {
        var style = $document[0].createElement('link');

        style.rel = 'stylesheet';
        style.type = 'text/css';
        style.href = href;

        $document[0].head.appendChild(style);
        return style;
    });
}])

Then on your Angular Module add a service for your third party library:

.service('ckeditorService', function ($window, $q, lazyLoad) {
    this.CKEDITOR = function () {
        var deferred = $q.defer();

        if (typeof $window.CKEDITOR === "undefined") {
            lazyLoad.loadScript('lib/ckeditor/ckeditor.js').then(function () {
                deferred.resolve($window.CKEDITOR);
            }).catch(function () {
                console.log('Error loading : lib/ckeditor/ckeditor.js');
                deferred.resolve($window.CKEDITOR);
            });
        } else {
            deferred.resolve($window.CKEDITOR);
        }

        return deferred.promise;
    }

})

Then in your Controller where you want to use the service:

.controller('maintainItemDetailsController', function (ckeditorService) {

     ckeditorService.CKEDITOR().then(function (CKEDITOR) {
        self.editable = true;
        CKEDITOR.inline('description');
        CKEDITOR.inline('additional_info');
    });

})

In this example I am using the ckeditor library but in your case it will be the Google maps library

You should split your scripts into entry-specific modules, for that task you can use browserify with fuctor-bundle or partion-bundle for more flexibility.

That's about gathering your scripts, and about gathering angular modules (which are not the same) you can look at this answer.