AngularJS module that displays "please wait" message on time-taking actions. First attempt, yet working.

busy-indicator.js

/**
 * Indicator module - fades HTML content and displays "please wait" message on time-taking actions
 * usage:
 *
 * html:
 * <div busy-indicator="main-progress">
 *
 * js:
 * busyIndicator.add("main-progress");
 * // do some time-taking actions...
 * busyIndicator.remove("main-progress");
 *
 */
angular.module('busyIndicator', ['ngAnimate'])
    .service('busyIndicator', function () {
        var tracker, add, remove, get;
        tracker = {};
        add = function (track_id) {
            if (undefined === tracker[track_id]) {
                tracker[track_id] = 0;
            }
            tracker[track_id]++;
        };
        remove = function (track_id) {
            if (tracker[track_id] === undefined) {
                tracker[track_id] = 0;
            } else {
                tracker[track_id]--;
            }
        };
        get = function (track_id) {
            return tracker[track_id] || 0;
        };
        return {
            add: add,
            remove: remove,
            get: get
        };
    })
    .directive('busyIndicator', ['$compile', 'busyIndicator', function ($compile, busyIndicator) {
        return {
            restrict: 'A',
            scope: {
                busyIndicator: '='
            },
            link: function (scope, element, attrs) {
                var track_var = attrs.busyIndicator;

                // used in ng-show
                scope.isActive = function () {
                    return busyIndicator.get(track_var) > 0;
                };

                // element's css `position` value needs to be relative-like
                var position = element.css('position');
                if (position === 'static' || position === '' || typeof position === 'undefined') {
                    element.css('position', 'relative');
                }

                // html to append: backdrop + message "please wait"
                var template = '<div class="busy-indicator busy-indicator-animation" ng-show="isActive()">' +
                    '<div class="busy-indicator busy-indicator-bg"></div>' +
                    '<div class="busy-indicator-message"><span>Please wait...</span></div>' +
                    '</div>';
                var templateElement = $compile(template)(scope);
                element.append(templateElement);

            }
        };
    }]);