bindTranslate.js

// When using angular-translate it's impossible to make two-way data binding translations yet,
// and this sometimes can be a headache. So I've developed this directive to save some time.
// The view goes like this: <TAG data-bind-translate="scopeObjToTranslate.item.text"></TAG>.

app.directive('bindTranslate', [
    '$translate',
    '$parse',

    function($translate, $parse) {

        return {
            restrict: 'A',
            link: function($scope, iElm, iAttrs) {

                var arrayToTranslate = iAttrs.bindTranslate.split('.'),
                    objToTranslate = '';

                for (var i = 0; i < arrayToTranslate.length; i++) {

                    if (objToTranslate.length > 0) {
                        objToTranslate = objToTranslate + '.' + arrayToTranslate[i];
                    } else {
                        objToTranslate = arrayToTranslate[i];
                    }

                };

                $scope.$watch(objToTranslate, function(new_val) {

                    $translate(new_val).then(function (translation) {

                        iElm.html(translation);
                    });

                });

            }

        };
    }

]);