Angular 2: Use LOCAL_ID from remote

Question

In my angular app, I want to set LOCALE_ID for currency and other pipes. I receive LOCAL_ID from remote service. I need to set it to my angular app. This is how I am doing it:

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { LocaleService } from './locale.service';
import { LOCALE_ID } from '@angular/core';
import { AppComponent }   from './app.component';

@NgModule({
  imports:      [ BrowserModule ],
  declarations: [ AppComponent ],
  providers: [
    LocaleService,
    { 
          provide: LOCALE_ID,
          deps: [LocaleService],
          useFactory: (localeService: LocaleService) => {
            return localeService.getLocal().then(local => {
              console.log(local);
              return local;
            })
          }
    },
  ],
  bootstrap:    [ AppComponent ]
})

export class AppModule { }

LocaleService is my service get the local from backend. Here's a sample snapshot of my LocalService:

import { Injectable } from '@angular/core';

@Injectable()
export class LocaleService {

    constructor() { }

    getLocal() {
        //return 'en-In';
        return new Promise(resolve => {
            setTimeout(() => {
                resolve('en-In');
            }, 3000);
        });
    }
}

The challenge, is when getLocal method is synchronous i.e. when I hard code the value, it works fine but when I make it async it's not working. I need to use local returned by getLocal service. Not sure what I am missing. As explained here I should be able to use it. Here's the plunkr to play. Thanks.