Sharing service between 2 applications on same page not updating bindings

I have a Configuration service

@Injectable()
export class ConfigService {

    private config: PageConfig = new PageConfig({});

    public getConfig = (): PageConfig => {
        return this.config;
    }
}

var configInstance = null;

export function ConfigServiceFactory() {
    if (configInstance == null) {
        configInstance = new ConfigService();
    }

    return configInstance;
}

That uses a factory to return a single instance of the ConfigService, this is my "app.ts"

bootstrap(App, [
    HTTP_PROVIDERS,
    ROUTER_PROVIDERS,
    bind(ConfigService).toFactory(ConfigServiceFactory),
    provide(APP_BASE_HREF, { useValue: '/App/' }),
    provide(LocationStrategy, { useClass: PathLocationStrategy })
])
    .catch(err => console.error(err));

bootstrap(PageConfigComponent, [
    bind(ConfigService).toFactory(ConfigServiceFactory)
])
    .catch(err => console.error(err));

Sadly the Application is in 2 separate components (I cannot change this) and they both need to share specific configuration values, now I have a simple template with a binding to a string

@Component({
    selector: 'pagetitle',
    template: '<span>ABC</span>',
    directives: [CORE_DIRECTIVES]
})

export class PageTitleComponent {
    public pageConfig: PageConfig = null;

    constructor(_configService: ConfigService) {
        this.pageConfig = _configService.getConfig();
    }
}

This binding is being initialized but its not changing the value even though the value stored in the ConfigService is being updated.