Użycie biblioteki która zależy od wartości globalnej

Zacząłem używać webpacka w aplikacji Angular 2 i mam głupi problem. Używam biblioteki chosen-js, biblioteka chosen-js działa poprawnie tylko że mam problem w poniższym przykładzie w dropdown list pokazuje się tylko Polska. Nie wiem czemu Ng2 sobie nie potrafi zbindować danych które pojawiają się w trakcie działania. Poniższy przykład odzwierciedla zachowanie kiedy dostaje dane z API które przypisuje do countryList, a w widoku nie mam tych danych.

Jak nie używałem webpacka działało to poprawnie tzn, dane się bindowały w widoku po ich otrzymaniu z API. Macie jakiś pomysł jak to obejść ?
Wiem, że może nie jest to napisane poprawnie: document ready, dostawanie się do obiektu przez $ itp

Wiem że pewnie też niepoprawnie skonfigurowałem webpacka pod kątem użycia chosen-js. Korzystałem z tego:

https://webpack.github.io/docs/shimming-modules.html
http://reactkungfu.com/2015/10/integrating-jquery-chosen-with-webpack-using-imports-loader/

ale jakimś cudem ta biblioteka działa poprawnie. Tylko tych danych nie mam :(

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

// import $ from 'jquery'; //This is ES2015 syntax
// import 'expose?jQuery!jquery';
//declare var jQuery: any;
//var $ = require("jquery")

import * as $ from "jquery";
import "chosen-js";

@Component({
    selector: 'home',
    templateUrl: './home.component.html'
})
export class HomeComponent {

    constructor() {

    }

    counstryList: string[] = ["Poland"];

    ngAfterViewInit() {

        $(document).ready(function () {

            this.counstryList = ["Poland", "Germany", "USA"];

            $(".chosen-select").chosen();
        });
    };

}

Będę wdzięczny za jakieś podpowiedzi

Podpowiedź 1 :
zmień na function() na wywołanie arrow
$(document).ready( () => {

it doesn't wotrk :/

No to jeszcze zobacz to (tam sa 3 sposoby na zmuszenie angulara do zaobserwowania zmiany):
http://stackoverflow.com/questions/34827334/triggering-angular2-change-detection-manually

Ale przede wszystkim sprawdź czy w funkcji zmieniasz to pole co trzeba ,temu obiektowi co trzeba. (Debugger).
Może Ci pomóc to//augury.angular.io/

Przedebagowałem w Augury i na początku zmienna counstryList ma tylko Polske, potem elegancko do tej zmiennej przypisuje się tablica Poland, USA, Germany. W momencie jak wejdzie w funkcje documeny.ready to counstryList robi się undefined. Wyjdzie z tego i znowu ma poprawnie wartości które miała.

Zrobiłem sobie w widoku dwa selecty jeden podpiąłem pod bibliotekę chosen-js a drugi jest zwyczajny, dodalem też przycisk po naciśnięciu którego tablica countryList wypełnia się danymi. Wyrzuciłem z ngAfterViewInit() wypełnianie tablicy dodatkowymi państwami.

 
<select data-placeholder="Choose a country..." style="width:350px;" multiple class="chosen-select">
    <option *ngFor="let i of counstryList">{{i}}</option>
</select>

<select style="width:350px;">
    <option *ngFor="let i of counstryList">{{i}}</option>
</select>

<input type="button" (click)="test()" value="Test"/>

Teraz w momencie jak wczyta mi się widok zarówno w zwykłym select jak i chosen select mamy tylko Polskę. Po naciśnięciu przycisku w zwykłym selekcie pojawiają się dane a w tym drugim dalej mamy tylko Polskę. Wydaje mi się że detekacja zmian nic mi tu nie da bo on nie umie sobie zczytać wartości z komponentu.

Jak nie używaliśmy jeszcze webpaka w projekcie to jQuery było dynamic i to jakoś działało w połączeniu z chosen, nie miało problemu zczytać zaktualizowanych danych. Teraz nie może.

Wydaje mi się że może być to spowodowane tym że niepoprawnie tużywam jQuery w angularze razem z zaimportowanymi innymi bibliotekami (chosen-js)

nie wiem czy poprawne jest napisanie import "chosen-js" albo import * as $ from "jquery" . Próbowałem w różnoraki sposób co widać w pierwszym moim poście (zakomentowane linijki)