pascalprecht.translate does not work on an attribute of an bootstrap-filestyled-file-form-element

Question

I've prepared a plunker here, to see the problem: Angular Translate Example

The translation is working in general, the only one exception is an attribute field of an bootstrap-filestyled form-file-element.

      <div class="form-group">
        <!-- APP_USER_IMAGE -> WORKS -->
        <label class="control-label col-sm-3" for="image">
              "{{ 'APP_USER_IMAGE' | translate }}"
        </label>
        <div class="col-md-6">
          <!-- APP_FILE_UPLOAD_TXT -> DOES NOT WORK --> 
          <input type="file" filestyle="" 
              id="image" 
              name="image" 
              ng-model="tempData.image" 
              data-button-text="{{ 'APP_FILE_UPLOAD_TXT' | translate }}" 
              data-class-button="btn btn-default" 
              data-classinput="form-control inline" 
              nv-file-select="" 
              class="form-control" />
        </div>
      </div>

What am I doing wrong?

Answer 1

Was able to get the translated value in the filestyle directive:

function link(scope, element) {
    var options = element.data();
    $translate('APP_FILE_UPLOAD_TXT').then(function (text) {
      options.buttonText = text;
      element.filestyle(options);
    });
}

See updated plunker