Experiment: show order of translation keys with angular-translate without changing all the application or necessity to implement Angular-Decorating logic

mark-angular-translate-translation-keys-with-number-from-file.css

[data-translate]::after {
    content: attr(data-key-num) " ";
    display: block;
    position: absolute;
    right: 0;
    top: -8px;
    font-size: 15px;
    font-family: verdana;
    background: #aaa;
    color: #000;
    font-weight: bold;
    padding: 1px 5px;
    margin: 0;
    z-index: 10000 !important;
}

[data-translate] {
    outline: 2px solid orange;
}

mark-angular-translate-translation-keys-with-number-from-file.js

/**
 * Please note: this is an experiment. 
 * You need to use mordern browser with 
 *   - CSS3 attr() function support (like Chrome 59)
 *   - ES6 arrow functions support
 *   - ES6 let
 *   - document.querySelectorAll
 *   - dataset support: https://developer.mozilla.org/de/docs/Web/API/HTMLElement/dataset
 *
 * @author Dennis Sterzenbach <dennis.sterzenbach@gmail.com>
 */
/**
    Tool function used to flatten a hierarchical JSON from:
{
    "somekey": {
        "subkey": "text"
        ...
    },
    "otherkey": "Yo!"
    ...
}
    to:
{
    "somekey.subkey": "text"
    ...
    "otherkey": "Yo!"
    ...
}
*/
function flattenJSON(json, prefix, result) {
    Object
        .keys(json)
        .forEach((key) => {
            let value = json[key];
            let fullKey = prefix !== '' ? prefix + '.' + key : key;

            if (typeof value !== 'string') {
                // we actually return nothing we use,
                // but that return here makes sense to understand/see the recursion better
                return flattenJSON(value, fullKey, result);
            } else {
                result[fullKey] = value;
            }
        });
}

function createMapOfKeysInOrder(resultObj) {
    let keyMap = {};

    Object
        .keys(resultObj)
        .forEach((item, key) => {
            // console.log('###', key, item);

            keyMap[item] = key;
        });

    return keyMap;
}

function addOrderAttributesForTranslationKeys(keyMap) {
    Object
        .keys(keyMap)
        .forEach((offset, key) => {
            // console.log('###', offset, key);

            // find all DOM elements which use data-translate with the given key
            // and to each add the "key" = offset/order inside the JSON translation file
            //
            // this then gets used by the CSS to show the number attached
            document
                .querySelectorAll(`[data-translate="${key}"]`)
                .forEach((elem) => {
                    elem.dataset.keyNum = key;
                });
        });
}

var resultObj = {};
var keyMap = {};

// simply store your translations into a variable and let that run through flattenJSON
flattenJSON(translationsAvailable, '', resultObj);

// as soon as the structure of the translation JSON is flat,
// map all keys to their order
keyMap = createMapOfKeysInOrder(resultObj);
addOrderAttributesForTranslationKeys(keyMap);