complex types is not binding

[Agah Özer]

       <div class="container" data-bind="template: { name: 'basket-item-template', foreach: Basket}" id="basket">
        </div>




<script type="text/html" id="basket-item-template">
            <div class="row">        
            <div class="col-lg-3">
                    <select data-bind="value: SelectedCategory, select2: { data: ProductCategories, placeholder: 'Product Category', allowClear: true }" class="select2" style="width: 100%;"></select>
                </div>
     </div>

var ViewModel = function () {


    var self = this;


    self.Basket = ko.observableArray();


    self.Basket.push(new Product());


};


ko.applyBindings(new ViewModel());

and Product.....

var ProductCategory= function (id, name) {
    this.id = id;
    this.name= name;
}






var Product= function () {


    var self = this;


    self.id = ko.observable();


    self.ProductCategories = ko.observableArray();
    self.SelectedCategory = ko.observable();




    self.ProductCategories.push(new ProductCategory(1, 'bla1'));
    self.ProductCategories.push(new ProductCategory(2, 'bla2'));
    self.ProductCategories.push(new ProductCategory(3, 'bla3'));
    self.ProductCategories.push(new ProductCategory(4, 'bla4'));


}

the select2 say  no result found

what am i doing wrong ?