i18n with Angular

gistfile1.js

/**
 * i18nLoad directive
 * Load a translation from a click on a button with the attr i18n-load
 */
module.exports = ['localize', function(localize) {

    return {
        restrict: "A",
        link: function(scope,el,attr) {
            el.on('click',function() {
                scope.$apply(function() {
                    localize.update(attr.i18nLoad);
                });
            });
        }
    }

}];


/**
 * I18n Service
 * Load your translations and update $rootScope
 * It gives you access to your translation.
 */
module.exports = ['$rootScope', '$http', function($rootScope, $http) {

    var i18n = {
        current: "",
        data: {},
        available: []
    };

    /**
     * Load a translation to the $scope
     * - doc BCP 47 {@link http://tools.ietf.org/html/bcp47}
     * - doc Value of HTML5 lang attr {@link http://webmasters.stackexchange.com/questions/28307/value-of-the-html5-lang-attribute}
     * @param {String} lang Your language cf BCP 47
     */
    function setTranslation(lang) {

        if(!lang) {
            lang =  (document.documentElement.lang + '-' + document.documentElement.lang.toUpperCase()) || 'en-EN';
        }else {
            document.documentElement.lang = lang.split('-')[0];
        }

        i18n.current = lang;
        angular.extend(i18n.data[lang], {languages: i18n.available});
        angular.extend($rootScope, i18n.data[lang]);

        console.log("[i18n-i18n@setTranslation] Load your translation with the current lang : ",i18n.current);

    }

    return {
        load: function load() {
            return $http.get('/i18n/languages.json')
                .error(function() {
                    alert("Cannot load i18n translation file");
                })
                .success(function (data) {
                    i18n.data = data;
                    i18n.current = document.documentElement.lang + '-' + document.documentElement.lang.toUpperCase();
                    i18n.available = Object.keys(i18n.data);
                    setTranslation();
                });
        },

        get: function get(lang) {
            return i18n.data[lang || i18n.current];
        },

        update: setTranslation
    }
}];

/**
 * I18n module
 * Translate your application
 */
angular.module('i18n', [])
    .factory('localize', require('./services/i18n'))
    .directive('i18nLoad', require('./directives/i18nLoad'))
    .run(['localize', function(localize) {
        localize.load();
    }]);


/**
*  i18n file
*/

{
  "en-EN": {
    "title": "Hi little butterfly !",
    "baseline": "Welcome to",
    "baselineInfo": "Serval Boilerplate with Backbone.js",
    "includes": "You're ready to code. It includes",
    "launchApp": "Open a terminal and run",
    "aboutTpl": "It uses a custom lodash templating cf:",
    "aboutTpl2": "You can of course remove these templateSettings, it's located inside",
    "aboutLink": "You can access to another page here ",
    "aboutLink2": "or, use a button with an event listener.",
    "aboutAnchor": "with an anchor",
    "buttonMsg": "Next page"
  },
  "fr-FR": {
    "title": "Bienvenue petit papillon de lumière !",
    "baseline": "Bienvenue sur",
    "baselineInfo": "Serval-boilerplate avec Backbone.js",
    "includes": "Tu peux désormais coder. Tu disposes de :",
    "launchApp": "Ouvre une console et saisi cette commande :",
    "aboutTpl": "On utilise une  version customisée du template lodash cf:",
    "aboutTpl2": "Tu peux modifier ça dans la variable templateSettings, on trouve ça dans ce fichier",
    "aboutLink": "Tu peux aller à la page suivante avec ce lien : ",
    "aboutLink2": "ou, en utilisant ce bouton avec un event",
    "aboutAnchor": "avec une ancre",
    "buttonMsg": "Page suivante"
  }
}

Latest version available on npm or bower -> https://github.com/dhoko/serval-i18n

$ npm install serval-i18n
$ bower install serval-i18n