ACE editor refreshing editor.setValue() only when clicking editor

I have been implementing ace code editor into a restful api I have been working on and the editor works fine although it has one small bug. When I open the location of the ace editor on my website it will appear blank but once I click on the editor, the file that is specified to read appears. The same bug has been discussed in this post http://ift.tt/1zQNwZH although the solutions posted there have not worked entirely for me. I will post relevant code:

    //Loading ace editor in relevant controller
    $scope.aceLoaded = function(_editor) {
        // Options
        _editor.setReadOnly(false);

        self.editor = _editor;
        _editor.getSession().setMode("ace/mode/javascript");
        _editor.setTheme("ace/theme/eclipse");




        _editor.setOptions({
            fontSize: "16px"
        });

        $scope.readOperation();
        // var oid = $route.current.params.oid;
        // $http.get('Operations/'+oid+'.js').success(function(data) {
        //   _editor.setValue(data);       

        // })

        // _editor.setValue(_editor.getValue);

    };

    //reading file and setting it in the ace editor
    $scope.readOperation = function() {
        // $http.get('Operations/'+oid+'.js').success(function(data) {
        // 
        var oid = $route.current.params.oid;
        $http.get('Operations/'+oid+'.js').success(function(data) {
                 self.editor.setValue(data);
        })

        self.editor.resize();
        self.editor.setValue(self.editor.getValue);
    }; 

     //place where the ace editor is loaded in html partial
     <div style="clear: both" ng-show="selectedTab==='behavior'">
         <div class="aw-ace" ui-ace="{ onLoad : aceLoaded }"  ></div>
    </div>

Any help would be greatly appreciated as I have been trying to tackle this problem for a couple of days, thank you.