Ignite UI combo box datasource updates with knockout

For stackoverflow question: http://stackoverflow.com/questions/20010926/igniteui-combo-box-datasource-updates-with-knockout

HTML

<script src="http://cdn-na.infragistics.com/jquery/20132/latest/js/infragistics.loader.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/knockout/knockout-2.2.1.js"></script>
<div id="dataSource" data-bind="igCombo: { 
                allowCustomValue: false,
                showDropDownButton: true,
                enableClearButton: false,
                dataSource: sourceListArray,
                nullText: 'Select Data Source',
                selectionChanged: dataSourceChanged
              }"></div>
<p id="selected"></p>
<button onclick="PopulateSourceList([])">populate DS</button>

JavaScript

$.ig.loader({
    scriptPath: 'http://cdn-na.infragistics.com/jquery/20132/latest/js/',
    cssPath: 'http://cdn-na.infragistics.com/jquery/20132/latest/css/',
    theme: 'metro',
    resources: "igCombo,igShared,extensions/infragistics.ui.combo.knockout-extensions.js"
});

var viewModel = new ViewModel();

function ViewModel() {
    self.sourceListArray = ko.observableArray([]);
}

$.ig.loader(function () {
    ko.applyBindings(viewModel);
});

function PopulateSourceList(sourceList) {
    // dummy values....
    sourceList = ["ServiceTest", "ServiceTest2", "ServiceTest3", "ServiceTest4"];
    for (var i = 0; i < sourceList.length; i++) {
        self.sourceListArray.push(sourceList[i]);
    }
}

self.dataSourceChanged = function (evt, ui) {
    $("#selected").text("Selection Changed: " + ui.items[0].value + " at " + ui.items[0].index);
}