jquery - angularjsを使用してクリックするまでCodemirrorエディタがコンテンツをロードしない

Question

tab1 には 3 つのボタンがあり、tab2 には 3 つの codemirror テキスト領域があります。今私が欲しいのは、ボタンをクリックするたびにコードミラーを更新することです。また、更新中ですが、2番目のタブに移動してコードミラー領域をクリックした後です。ボタンのクリックのみで更新したい。

コードミラーのコードは次のとおりです。HTMLコード

           <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 コード

    $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;
          });
      };