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: 
You need to figure out the moment at which the editor becomes visible (it is apparently not visible when initialized), and at *that* point call its `refresh` method.
There was a directive called ui-refresh described on [ui-refresh-directive](https://github.com/angular-ui/ui-codemirror#ui-refresh-directive "ui-refresh directive") so the following code worked. Thanks for the comments!

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

```