Angular-translational custom filter

I am using Pascal Precht angular-translate module . I have translated my translations, for example.

{
  "customer.account.header.main": "stgsdefghdsf",
  "customer.account.column.name": "sdfszdfs"
  "customer.account.column.address": "dsghfg",
  "customer.account.enum.VALUE1": "dfsgsdf",
  "customer.account.enum.VALUE2": "sdfgsdfg"
}

      

        
        
        
      

    

and I use them in templates like this:

{{ "customer.account.enum.VALUE1" | translate }}

      

        
        
        
      

    

Works great, but I need to create my own translation filter to use translate

at the bottom. I need to pass in a namespace prefix for example.

{{ enumValue | translateEnum:"customer.account.enum" }}

      

        
        
        
      

    

which enumValue

may be VALUE1

, VALUE2

coming directly from the API.

Unfortunately, the following is NOT a solution, as this mechanism will be used by several higher level mechanisms and only needs to accept the filter (and possibly filter parameters), but not an expression such as ... + ... | filter

{{ "customer.account.enum." + enumValue | translate }}

      

        
        
        
      

    

The problem is what translate

is asynchronous since the fetch is asynchronous. I don't know how I can handle this because I have no object reference that can be assigned after the promise then

. I only have value. Just like the original uses translate

.

So far I have tried:

module.filter('translateEnumInstant', [
  '$translate', function($translate) {
    return function(input, namespace) {
      return $translate.instant(namespace + '.' + input);
    };
  }
]).filter('translateEnumFilter', [
  '$filter', function($filter) {
    var translateFilter;
    translateFilter = $filter('translate');
    return function(input, namespace) {
      return translateFilter(namespace + '.' + input);
    };
  }
]).filter('translateEnumPromise', [
  '$translate', function($translate) {
    return function(input, namespace) {
      return $translate(namespace + '.' + input);
    };
  }
]);

      

        
        
        
      

    

but none of them work fine. The first two are synchronous and they load the previous language as they don't wait for the new language to be loaded via json. The latter returns a promise, so it just shows {}

what's worse.

Please tell me what I can do to write such a directive.