Angular 1.4.1 sample, lazy loading css.

<!DOCTYPE html>
<html ng-app="myPlunk">

<head>
    <link se-lazy rel="stylesheet" ng-href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" />
    <link se-lazy rel="stylesheet" ng-href="style.css" />
    <style>
        [ng\:cloak],
        [ng-cloak],
        [data-ng-cloak],
        [x-ng-cloak],
        .ng-cloak,
        .x-ng-cloak {
            display: none !important;
        }
        
        .spinner {
            height: 60px;
            width: 60px;
            margin: 94px auto 0 auto;
            position: relative;
            -webkit-animation: rotation .6s infinite linear;
            -moz-animation: rotation .6s infinite linear;
            -o-animation: rotation .6s infinite linear;
            animation: rotation .6s infinite linear;
            border-left: 6px solid rgba(0, 174, 239, 0.15);
            border-right: 6px solid rgba(0, 174, 239, 0.15);
            border-bottom: 6px solid rgba(0, 174, 239, 0.15);
            border-top: 6px solid rgba(0, 174, 239, 0.8);
            border-radius: 100%;
        }
        
        @-webkit-keyframes rotation {
            from {
                -webkit-transform: rotate(0deg);
            }
            to {
                -webkit-transform: rotate(359deg);
            }
        }
        
        @-moz-keyframes rotation {
            from {
                -moz-transform: rotate(0deg);
            }
            to {
                -moz-transform: rotate(359deg);
            }
        } 
        
        @-o-keyframes rotation {
            from {
                -o-transform: rotate(0deg);
            }
            to {
                -o-transform: rotate(359deg);
            }
        }
        
        @keyframes rotation {
            from {
                transform: rotate(0deg);
            }
            to {
                transform: rotate(359deg);
            }
        }
    </style>
</head>

<body ng-controller="AppController as vm">
    <div ng-hide="vm.appReady">

        <div class="spinner"></div>

    </div>
    <div ng-show="vm.appReady" ng-cloak>
        <h1>Hello angular {{vm.version}}</h1>
        <p>Here comes your apps meat.</p>
        <p>In this case, just an <a href="http://softwarewhoos.blogspot.com/2015/07/non-blocking-css-loading-using-angularjs.html">link</a> to my blog article about it</p>
    </div>


    <script defer src="https://code.angularjs.org/1.4.1/angular.js"></script>
    <script defer src="cssPreloadFactory.js"></script>
    <script defer src="cssPreloadDirective.js"></script>
    <script defer src="script.js"></script>
</body>

</html>

(function() {
    "use strict";
    //Use an IIFE

    function AppController(PreloadRegistery, $timeout, $q) {
        var vm = this;
        vm.version = angular.version.full + " " + angular.version.codeName;

        $q
            .all([
                PreloadRegistery.loadDone,
                // added a timeout as dummy
                $timeout(function() {}, 1500)
            ])
            .then(activate);

        return;

        function activate() {
            console.log('ready to go!')
            vm.appReady = true;
        }
    }



    //Hook up all my function into angular
    angular.module('myPlunk', ["sePreloadCss"])
        .controller('AppController', AppController);

}());

/* Styles go here */

(function () {
    'use strict';

    angular
        .module('sePreloadCss', ['sePreload'])
        .directive('seLazy', seLazy);

    /* @ngInject */
    function seLazy (PreloadRegistery) {
        var directive = {
            controller: LazyController,
            restrict:   '',
            // make sure this is ready before the src kicks in.
            priority:   1000
        };
        return directive;

        /* ngInject */
        function LazyController($element,$attrs) {
            var rel = $attrs.rel;
            var elm = $element[0];
            if (typeof rel !== 'string' || 
                rel.toLowerCase()!=='stylesheet' ||
                typeof $attrs.ngHref !== 'string') {
                return;
            }
            PreloadRegistery.register(elm);

            this.loaded = function loaded() {
                console.log(elm.href + " finished loading!")
                PreloadRegistery.done(elm);
            };
            
            elm.addEventListener("load", this.loaded);

        }
    }
}());

(function () {
    'use strict';

    angular
        .module('sePreload', [])
        .factory('PreloadRegistery', PreloadRegistery);

    /* @ngInject */
    function PreloadRegistery($q) {
        var map      = new Map();
        var loadDone = $q.defer();
        var service  = {
            register: register,
            done:     done,
            loadDone: loadDone.promise,
            has:      has
        };
        return service;

        ////////////////

        function register(elm) {
            map.set(elm, false);
        }

        function has(elm) {
            return map.has(elm);
        }

        function done(elm) {
            var allDone = true;
            map.set(elm, true);
            map.forEach(function (isDone, key) {
                if (!isDone) {allDone = false; }
            });
            if (allDone) {
                loadDone.resolve(true);
            }
        }
    }
}());