Sample ui-router angularjs app with codemirror

<!DOCTYPE html>
<html>

  <head>
    <script data-require="angular.js@*" data-semver="1.6.6" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.6/angular.min.js"></script>
    <script src="//unpkg.com/@uirouter/angularjs/release/angular-ui-router.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/oclazyload/1.1.0/ocLazyLoad.js"></script>
    <style>.active { color: red; font-weight: bold; }</style>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body ng-app="app">
    <a ui-sref="app.main" ui-sref-active="active">Open editor view</a>
    <a ui-sref="about">Open about view</a>

    <ui-view></ui-view>
  </body>

</html>

var myApp = angular.module('app', ['ui.router', 'oc.lazyLoad'])
                   .config(['$ocLazyLoadProvider', function($ocLazyLoadProvider) {

$ocLazyLoadProvider.config({
    debug: true,
    modules: [{ 
        name : 'codeMirror1', 
        files: [
            "https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.36.0/codemirror.min.css",
            "https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.36.0/codemirror.min.js"
    ]},{
        name : 'codeMirror2',
        files: [
            "https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.36.0/mode/xml/xml.min.js",
            "https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.36.0/mode/htmlmixed/htmlmixed.min.js",
            "https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.36.0/mode/css/css.min.js",
            "https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.36.0/mode/javascript/javascript.min.js",
            "https://cdnjs.cloudflare.com/ajax/libs/angular-ui-codemirror/0.3.0/ui-codemirror.min.js"
    ]}]
});
                   }]);
                   
myApp.directive('myeditor', function() {
  return {
    restrict: 'E',
    link: function($scope, $element) {
      var myCodeMirror = CodeMirror($element[0], {
        value: "function myScript(){return 100;}\n",
        mode:  "javascript",
        lineNumbers: true
      });
    }
  };
});


myApp.config(function($stateProvider) {
  var states = [
    {
      name: 'app',
      abstract: true,
      resolve: {
        loadSiteCtrl: ['$ocLazyLoad', function ($ocLazyLoad) {
            return $ocLazyLoad.load(['codeMirror1']).then(function() {
              return $ocLazyLoad.load(['codeMirror2'])
            });
        }]
      }
    },
    {
      name: 'app.main',
      url: '/main',
      template: '<myeditor/>'
    },
    {
      name: 'about',
      url: '/about',
      template: '<h3>This is the about view</h3>'
    }
  ];
  
  states.forEach(function(state) {
    $stateProvider.state(state);
  });
});

/* Styles go here */

.CodeMirror {
  height: auto;
  border: 1px solid #ddd;
}

.CodeMirror pre {
  padding-left: 7px;
  line-height: 1.25;
}