var app = angular.module('app', ['ui.ace']);

app.controller('MainCtrl', ['$scope','$timeout','$log', function ($scope,$timeout,console) {
  
  var rows = $scope.rows = [];
  var addRow = function(name,age,desc){rows.push({name:name,age:age,desc:desc});};
  addRow("Bob",43,"My name \nis Bob");
  addRow("Alice",42,"My name \nis Alice");
  addRow("Jen",19,"My \nname \nis Jen");
  addRow("Joe",22,"Hi, I'm Joe");

  var editor;
  $scope.loadValueData = function (_editor) {
    editor = _editor;
    editor.getSession().setUseWorker(false);
    editor.setReadOnly(true);
  };
  
  var enableAndFocusEditor = function() {
    if (editor) {
      editor.focus();
      var session = editor.getSession();
      //Get the number of lines
      var count = session.getLength();
      //Go to end of the last line
      editor.gotoLine(count, session.getLine(count-1).length);
      editor.setReadOnly(false);
    }
  };
  
  $scope.isModal = function (row) {
    $scope.rowObj = row;
    $timeout(enableAndFocusEditor,500);
    //editor.setValue(row.getProperty('value').toString());
  };
  $scope.close = function() {
    $scope.rowObj = null;
    editor && editor.setReadOnly(true);
  };
                
}]);

<!DOCTYPE html>
<html ng-app="app">

  <head>
    <link data-require="bootstrap-css@*" data-semver="3.1.1" rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" />
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
    <script data-require="angular.js@1.2.10" data-semver="1.2.14" src="http://code.angularjs.org/1.2.14/angular.js"></script>
    <script src="http://ace.c9.io/build/src/ace.js" charset="utf-8"></script>
    <script src="https://rawgithub.com/angular-ui/ui-ace/master/src/ui-ace.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script type="text/javascript" src="script.js"></script>
  </head>

   <body ng-app='myApp'>
    <!--[if lt IE 10]>
      <p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
    <![endif]-->

     <div class="container">
      <div class="header">
        <ul class="nav nav-pills pull-right">
          <li class="active"><a href="#">Home</a></li>
          <li><a href="#">About</a></li>
          <li><a href="#">Contact</a></li>
        </ul>
        <h3 class="text-muted">angular router</h3>
      </div>

      <div class="jumbotron">
        <h1>'Allo, 'Allo!</h1>
        <p class="lead">Always a pleasure scaffolding your apps.</p>
        <p><a class="btn btn-lg btn-success" href="#">Splendid!</a></p>
      </div>

      <div class="row marketing">
        <div class="col-lg-6">
          <h4>HTML5 Boilerplate</h4>
          <p>HTML5 Boilerplate is a professional front-end template for building fast, robust, and adaptable web apps or sites.</p>

          <h4>Sass</h4>
          <p>Sass is the most mature, stable, and powerful professional grade CSS extension language in the world.</p>

          <h4>Bootstrap</h4>
          <p>Sleek, intuitive, and powerful mobile first front-end framework for faster and easier web development.</p>
          <h4>Modernizr</h4>
          <p>Modernizr is an open-source JavaScript library that helps you build the next generation of HTML5 and CSS3-powered websites.</p>

        </div>
      </div>

      <div ui-ace="{
          useWrapMode : true,
          showGutter: true,
          theme:'dawn',
          mode: 'xml',
          firstLineNumber: 5,
          onLoad: aceLoaded,
          onChange: aceChanged
        }" ng-controller='MainCtrl'>

            class A \n
            clas B \n
            clas B \n
            clas B \n
            clas B \n
            clas B \n
            clas B \n
            clas B \n

            clas B \n
            clas B \n
            clas B \n
            clas B \n


            a afasdf
            af asdf
            a
            sfasdfas
            dfadfasdf
            afasdf
            adfasdf
            adfasdf
            asdfasd
            asdfasf
            afsdasdf


            asdfasdf


            dsfasdf



            asdfasdf


            asdfasdf





          adsfasdf






            adfasdf





            asdfasdfasdfaasdf






            adsfasdfasf




            adsfasdfasdf



            asdfasdfasdf



            asdfasdfasdf




            adsfasadfasdfasdf






            clas B \n
              clas B \n
              clas B \nclas B \nclas B \n
              clas B \nclas B \n
              clas B \nclas B \nclas B \n
              clas B \nclas B \nclas DDDDD \n

      </div>

      <div class="footer">
        <p>♥ from the Yeoman team</p>
      </div>
    </div>


  </body>

</html>
body {
  padding: 20px;
}

.ace_editor { height: 600px; }