JSFiddle - React, Tailwind, and code Playground

HTML

<div ng-app="app" ng-controller="main">
    <div ng-controller="main"  ui-i18n="language" >
<button ng-click="changeLanguage()">toggle lang</button>
    <span>{{language}}</span>
    <h1>{{hello}}</h1>
    
    
    <h3>Using attribute:</h3>
    <p ui-t="groupPanel.description"></p>
    
    <p ui-t="example"></p>
    
    <p ui-t>groupPanel.description</p>
    
    <p ui-t>example</p>
    
    <p ui-t="invalid.translation.path"></p>
    
    <p ui-t>invalid.path</p>
    
    <p ui-t>invalid.translation.again</p>
    
    
    <h3>Using element:</h3>
    <ui-t>example</ui-t>
    <br/>
    <ui-translate>groupPanel.description</ui-translate>
    <br/>
    <ui-t>invalid.path</ui-t>
    <br/>
    <ui-t>invalid.translation.again</ui-t>
    
    <h3>Using Translate Filters:</h3>
        <h3>Using attribute:</h3>
    <p ui-t="groupPanel.description"></p>
    
    <p ui-t="example"></p>
    
    <p ui-t>groupPanel.description</p>
    
    <p ui-t>example</p>
    
    <p ui-t="invalid.translation.path"></p>
    
    <p ui-t>invalid.path</p>
    
    <p ui-t>invalid.translation.again</p>
    
    
    <h3>Using element:</h3>
    <ui-t>example</ui-t>
    <br/>
    <ui-translate>groupPanel.description</ui-translate>
    <br/>
    <ui-t>invalid.path</ui-t>
    <br/>
    <ui-t>invalid.translation.again</ui-t>
    
    <h3>Using Translate Filters:</h3>    <h3>Using attribute:</h3>
    <p ui-t="groupPanel.description"></p>
    
    <p ui-t="example"></p>
    
    <p ui-t>groupPanel.description</p>
    
    <p ui-t>example</p>
    
    <p ui-t="invalid.translation.path"></p>
    
    <p ui-t>invalid.path</p>
    
    <p ui-t>invalid.translation.again</p>
    
    
    <h3>Using element:</h3>
    <ui-t>example</ui-t>
    <br/>
    <ui-translate>groupPanel.description</ui-translate>
    <br/>
    <ui-t>invalid.path</ui-t>
    <br/>
    <ui-t>invalid.translation.again</ui-t>
    
    <h3>Using Translate Filters:</h3>    <h3>Using attribute:</h3>
    <p...

JavaScript

/**
 * Created by Tim on 2/1/14.
 */
(function(){

    // adding deep copy method until angularjs supports deep copy like everyone else.
    // https://github.com/angular/angular.js/pull/5059
    function deepExtend(destination, source) {
        for (var property in source) {
            if (source[property] && source[property].constructor &&
                source[property].constructor === Object) {
                destination[property] = destination[property] || {};
                arguments.callee(destination[property], source[property]);
            } else {
                destination[property] = source[property];
            }
        }
        return destination;
    }
    'use strict';
    var MISSING = '[MISSING]: ';
    var uiI18n = angular.module('ui.i18n', []);

    var langCache = {
        _langs: {},
        current: null
    };
    langCache.get = function(lang){
        return langCache._langs[lang.toLowerCase()];
    };
    langCache.add = function(lang, strings){
        var lower = lang.toLowerCase();
        var cache = langCache._langs;
        cache[lower] = deepExtend(cache[lower] || {}, strings);
    };
    langCache.setCurrent = function(lang){
        langCache.current = lang.toLowerCase();
    };
    langCache.getCurrent = function(){
        return langCache.get(langCache.current);
    };

    uiI18n._cache = langCache;
    uiI18n.$broadcast = function(lang){
        if (lang && this.$root){
            uiI18n.$root.$broadcast('$uiI18n', lang);
        }
    };
    uiI18n.add =  function(langs, strings){
        if (typeof(langs) === 'object'){
            angular.forEach(langs, function(lang){
                if (lang){
                    langCache.add(lang, strings);
                }
            });
        } else {
            langCache.add(langs, strings);
        }
    };
    uiI18n.set = function(lang){
        if (lang){
            langCache.setCurrent(lang);
            uiI18n.$broadcast(lang);
        }
    };

   ...