Question: I have a modal that needs to display some code using codemirror and I am developing the app in AngularJS. The html looks like the following:

```
<div class="modal-body">
    <div ui-codemirror="{onLoad:codemirrorLoaded}" ui-codemirror-opts="viewEventEditorOptions" data-ng-model="event.text"></div>
</div>

```

The problem I am having is that the code displays in the div only after I click inside it. I have tried refreshing the editor using an event like the following but it is not working:

```
$scope.codemirrorLoaded = function(_editor){
    // Events
    _editor.on("beforeChange", function(){ _editor.refresh() });
    _editor.on("change", function(){ _editor.refresh() });
};

```

Any help is appreciated. Thanks.

Answer: 
Add onload action to your options and refresh the codemirror after some milliseconds. Ex :

```
modalScope.editorOptions = {
    lineWrapping : true,
    lineNumbers: true,
    readOnly: 'nocursor',
    mode: 'yaml',
    onLoad: function(_editor){
        modalScope.editor = _editor;

        // Load without click
        setTimeout(function(){
            modalScope.editor.refresh();
        }, 100);
    }
  };

```
I use ui-refresh="true", but it only show after click to it.

```
<div ui-refesh="true" ui-codemirror-opts="jsonEditorOption" data-ng-model="user.UserJsonDataParse"></div>

```