UI.Codemirror better options support demo #61

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

<head>
  <meta name="viewport" content="width=device-width" />
  <meta charset="utf-8" />
  <title>UI.Codemirror better options support demo</title>
  <script>
    document.write('<base href="' + document.location + '" />');
  </script>
  <!-- css -->
  <link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
  <link rel="stylesheet" type="text/css" href="http://codemirror.net/lib/codemirror.css" />
  <link rel="stylesheet" href="http://codemirror.net/addon/lint/lint.css">

  <link href="style.css" rel="stylesheet" type="text/css" />
  <!-- /css -->
</head>

<body>
  <div class="jumbotron">
    <div class="container">
      <h1>UI.Codemirror better options support demo</h1>
    </div>
  </div>
  <section ng-controller="xCtrl as xCtrl">
    <div class="container">
      <ui-codemirror ui-codemirror-opts="xCtrl.scriptEditorOptions">[
 {
  _id: "post 1",
  "author": "Bob",
  "content": "...",
  "page_views": 5
 },
 {
  "_id": "post 2",
  "author": "Bob",
  "content": "...",
  "page_views": 9
 },
 {
  "_id": "post 3",
  "author": "Bob",
  "content": "...",
  "page_views": 8
 }
]</ui-codemirror>
    </div>
  </section>
  <!-- js -->

  <!-- js -->
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.min.js"></script>

  <script src="http://codemirror.net/lib/codemirror.js"></script>
  
  <script src="https://rawgit.com/zaach/jsonlint/79b553fb65c192add9066da64043458981b3972b/lib/jsonlint.js"></script>
  <script src="http://codemirror.net/mode/javascript/javascript.js"></script>
  <script src="http://codemirror.net/addon/lint/lint.js"></script>
  <script src="http://codemirror.net/addon/lint/json-lint.js"></script>

  <script src="https://cdn.rawgit.com/angular-ui/ui-codemirror/f5061497f465090be4bb53a4b4b6c534c586d214/src/ui-codemirror.js"></script>

  <script src="app.js"></script>
  <!-- /js -->
</body>

</html>

angular.module('x', ['ui.codemirror'])
  .controller('xCtrl', function() {
    var xCtrl = {};

    xCtrl.scriptEditorOptions = {
      lineNumbers: true,
       mode: "application/json",
      gutters: ['CodeMirror-lint-markers'],
      lint: true
    };

    return xCtrl;
  });



.jumbotron {
  position: relative;
  font-size: 16px;
  color: #fff;
  color: rgba(255,255,255,.75);
  text-align: center;
  background-color: hsla(10, 50%, 50%,.75);
  border-radius: 0;
}

# UI.Codemirror better options support demo

Following https://github.com/angular-ui/ui-codemirror/issues/61