Select Box value changed programmatically doesn't trigger change event

HTML

<select id='my_select' title='abc'>
    <option value="whea">Whea</option>
    <option value="whoa">Whoa</option>
    <option value="whee">Whee</option>
    <option value="whaa">Whaa</option>
</select>

JavaScript

~function(doc, $) {
    var MutationObserver = window.MutationObserver ||
                           window.WebKitMutationObserver ||
                           window.MozMutationObserver;
 
    var select = $('select'); // this is just DOM element, no jQuery

    // http://www.w3.org/TR/dom/#mutation-observers
    var observer = new MutationObserver(function(mutations) {
        alert(mutations.length + " mutations happened");
    });
    
    observer.observe(select, {
        // monitor descendant elements – changing `selected` attr on options
        subtree: true,
        attributes: true
    });

    // this triggers Observer's reaction, but doesn't update select box UI
    setTimeout(function () {
        select.setAttribute('value', 'whoa');
    }, 1000);

    // this updates select box UI, but doesn't trigger mutation observer's callback
    setTimeout(function () {
         select.value = "whee";
    }, 2000);

    // this also updates the UI, but doesn't trigger mutation observer's callback
    setTimeout(function () {
        select.getElementsByTagName('option')[3].selected = true;
    }, 3000);

    // neither does manual selecting of options trigger mutation observer unfortunately :(
    
    setTimeout(function () {
        document.getElementByID('my_select').setAttribute("title", "new");
        select.value = "whee";
    }, 5000);

}(document, function(selector) { return document.querySelector(selector); });