Ace Editor Bootstrap

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/ace/1.1.01/ace.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.0/css/bootstrap.min.css">
<div class="container">
    <div class="panel panel-default">
        <div class="panel-heading">
             <h3 class="panel-title">Editor</h3>
        </div>
        <div class="panel-body">
<div id="editor">function foo(items) {
    var x = "All this is syntax highlighted";
    return x;
}</div>
        </div>
    </div>
    <div class="text-center">---End of editor---</div>
</div>
<button id="hide">Hide</button>
<button id="setValue">Set Value</button>
<button id="Show">Show</button>

CSS

#editor {
    /** Setting height is also important, otherwise editor wont showup**/
    height: 300px;
}

#setValue {
    display : none;
}

#Show {
    display : none;
}

JavaScript

var editor = ace.edit("editor");
editor.setTheme("ace/theme/monokai");
editor.getSession().setMode("ace/mode/javascript");

$('#hide').click(function(){
    $('.panel-body').hide();
    $('#hide').hide();
    $('#Show').hide();
    $('#setValue').show();
});

$('#Show').click(function(){
    $('.panel-body').show();
    $('#setValue').hide();
    $('#Show').hide();
    $('#hide').show();
});

$('#setValue').click(function(){
    editor.getSession().setValue('function foo(items) {}');
    $('.panel-body').hide();
    $('#setValue').hide();
    $('#Show').show();
    $('#hide').hide();
});


////// -------------------------- Click on Hide -> SetValue -> Show
/// Why ace editor did not updated the content and how to update in such scenario?