ol3 ScaleCombo set Scale with dropdown box

HTML

<script src="http://openlayers.org/en/v3.9.0/build/ol.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://openlayers.org/en/v3.9.0/css/ol.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<body onload="init()">
    <div id="heading">ol3 ScaleCombo set Scale with dropdown box</div>
    <div id="scale">Scale=1:9M</div><div id="combotext">// ScaleCombo: 1:
    </div>   <select id="scalecombo" onchange="scaleCombo(this)">
        <option value="533.181329597654">533</option>
        <option value="1066.362659195308">1066</option>
        <option value="2132.725318390616">2133</option>
        <option value="4265.450636781232">4265</option>
        <option value="8530.901273562464">8531</option>
        <option value="17061.802547124928">17K</option>
        <option value="34123.605094249855">34K</option>
        <option value="68247.21018849971">68K</option>
        <option value="136494.42037699942">136K</option>
        <option value="272988.84075399884">273K</option>
        <option value="545977.6815079977">546K</option>
        <option value="1091955.3630159954">1M</option>
        <option value="2183910.7260319907">2M</option>
        <option value="4367821.452063981">4M</option>
        <option value="8735642.904127963" selected>9M</option>
        <option value="17471285.808255926">17M</option>
    </select>
    <div id="map" class="map"></div>
    <div id="overlay" style="background-color: white; border-radius:10px; border: 1px solid black; padding: 5px 10px;"></div>
    <div id="overlay2" style="background-color: yellow; width: 20px; height: 20px; border-radius: 10px;"></div>
</body>

CSS

#heading {
    text-align:center;
    padding:5px;
    font-weight:bold;
}
#scale,#combotext {
    float:left;
    margin:5px 0px 5px 5px;
}
#scalecombo
{
    margin: 5px; 0px;
}
#map {
    clear:left;
    margin-top:10px;
}

JavaScript

var view, map;

function init() {

    var layer = new ol.layer.Tile({
        source: new ol.source.OSM()
    });

    var center = ol.proj.transform([-1.812, 52.443], 'EPSG:4326', 'EPSG:3857');

    var overlay = new ol.Overlay({
        element: document.getElementById('overlay'),
        positioning: 'bottom-center'
    });


    var overlay2 = new ol.Overlay({
        position: center,
        element: document.getElementById('overlay2')
    });

    view = new ol.View({
        center: center,
        zoom: 6
    });


    map = new ol.Map({
        target: 'map',
        layers: [layer],
        overlays: [overlay2],
        view: view
    });

    map.getCurrentScale = function () {
        //var map = this.getMap();
        var map = this;
        var view = map.getView();
        var resolution = view.getResolution();
        var units = map.getView().getProjection().getUnits();
        var dpi = 25.4 / 0.28;
        var mpu = ol.proj.METERS_PER_UNIT[units];
        var scale = resolution * mpu * 39.37 * dpi;
        return scale;

    };

    map.getView().on('change:resolution', function (evt) {
        var resolution = evt.target.get('resolution');
        console.log(resolution);
        var units = view.getProjection().getUnits();
        var dpi = 25.4 / 0.28;
        var mpu = ol.proj.METERS_PER_UNIT[units];
        var scale = resolution * mpu * 39.37 * dpi;
        console.log(scale);

        var element = document.getElementById('scalecombo');
        element.value = scale;

        if (scale >= 9500 && scale <= 950000) {
            scale = Math.round(scale / 1000) + "K";
        } else if (scale >= 950000) {
            scale = Math.round(scale / 1000000) + "M";
        } else {
            scale = Math.round(scale);
        }
        document.getElementById('scale').innerHTML = "Scale = 1 : " + scale;


    });


    map.on('click', function (event) {
        var coord = event.coordinate;
        var degrees = ol.proj.transform(coord,...