Codemirror editor is not loading content until clicked using angularjs

Question

I have 3 buttons in tab1 and in tab2 i have 3 codemirror text area. Now Acctually what i want is to update codemirror on each button click. And it is updating also but after i go in 2nd tab and click on codemirror area. I want it to be update on button click only.

Here is my code for codemirror. Html Code

           <div id="aCDialog" class="col-lg-12">
           <div class="comment-tabs">
            <ul>
            <li class="active" id=""><a role="tab" data-toggle="tab" data-target="#aButton">Buttons</a></li>
            <li class="" id=""><a role="tab" data-toggle="tab" data-target="#aData">Data</a></li>

            </ul>
            <div class="tab-content">
            <div class="tab-pane active" id="aButton">
                    <button id="b1" ng-click="selectButton('f1')"></button>
                     <button id="b2" ng-click="selectButton('f2')"></button>
                     <button id="b3" ng-click="selectButton('f3')"></button>   
             </div>    
                <div class="tab-pane active" id="aData">
    <ui-codemirror ui-codemirror="editorOptions" id="htmlRefresh" ui-refesh="true" ng-model="uiCode.htmlcodeModel"></ui-codemirror>
    <ui-codemirror ui-codemirror-opts="jsEditorOptions" ui-refesh="true"  ng-model="uiCode.jsACCodeModel"></ui-codemirror>
    <ui-codemirror ui-codemirror-opts="cssEditorOptions" ui-refesh="true"  ng-model="uiCode.cssCode"></ui-codemirror>
     </div>
     </div>
     </div>
      </div>

js Code

    $scope.editorOptions = { 
            mode: mixedMode,
              lineNumbers: true,
              lineWrapping : true,
              autoRefresh:true,
              gutters: ["CodeMirror-lint-markers"],
              lint: true, 
    };
    $scope.jsEditorOptions = { 
            mode: 'text/javascript',
            lineNumbers: true,
              lineWrapping : true,
              autoRefresh:true,
              gutters: ["CodeMirror-lint-markers"],
              lint: true,
    };
    $scope.cssEditorOptions= { 
            mode: 'text/css',
            lineNumbers: true,
              lineWrapping : true,
              autoRefresh:true,
              gutters: ["CodeMirror-lint-markers"],
              lint: true,
    };
    $scope.selectButton = function(filename){


          commonCall.getSelectedData(filename).success(function(data) {  
              $scope.uiCode.htmlcodeModel=data.html;
              $scope.uiCode.jsACCodeModel=data.js;
              $scope.uiCode.cssCode=data.css;
          });
      };

Answer 1

I know that it's an old thread but i ran into the same problem and this helped me: https://mycyberuniverse.com/how-to-fix-codemirror-editor-is-not-loading-content-until-clicked.html .

Basically, I had to call editor.refresh() like this:

var editor = CodeMirror.fromTextArea(document.getElementById('editor'), {
    lineNumbers: true,
    matchBrackets: true,
    mode: 'application/x-httpd-php',
    indentUnit: 4
});
setTimeout(function() {
    editor.refresh();
},1);

Hope it helps someone with the same problem.