Angular caps lock checker directive

<html>

<head>
  <title>Custom Table Demo</title>
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <meta name="viewport" content="width=device-width" />
  <script type='text/javascript' src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
  <script type='text/javascript' src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular.min.js"></script>
  <script type='text/javascript' src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular-animate.min.js"></script>
  <script type='text/javascript' src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular-loader.min.js"></script>
  <script type='text/javascript' src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular-sanitize.min.js"></script>
  <script type='text/javascript' src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular-cookies.min.js"></script>
  <script type='text/javascript' src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular-touch.min.js"></script>
  <script type='text/javascript' src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular-resource.min.js"></script>
  <script type='text/javascript' src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.14.3/ui-bootstrap.min.js"></script>
  <script type='text/javascript' src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.14.3/ui-bootstrap-tpls.min.js"></script>
  <script type='text/javascript' src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.13/angular-ui-router.min.js"></script>
  <script type='text/javascript' src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui/0.4.0/angular-ui-ieshiv.min.js"></script>
  <script type='text/javascript' src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui/0.4.0/angular-ui.min.js"></script>
  <script type='text/javascript' src="script.js"></script>
  <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/css/bootstrap.css">
  <link rel="stylesheet" type="text/css" href="style.css">
</head>

<body ng-app="myApp">
  <div ng-controller="myCtrl as vm">
    <h1>Hello User!</h1>
    <label>Username</label>
    <input id="username" type="text" />
    <br />
    <label>Password 1</label>
    <input id="password1" type="password" caps-lock />

    <br/>

    <label>Password 2</label>
    <input id="password2" type="password" caps-lock caps-lock-warning="#custom" />
    <div id="custom" class="warning">This is a custom warning.  Your caps lock is on!</div>

    <br/>
    <label>Password 3</label>
    <input id="password3" type="password" caps-lock />
  </div>
</body>

(function() {
  angular.module('myApp.controllers', []);
  angular.module('myApp.directives', []);
  angular.module('myApp.services', []);

  var myApp = angular.module('myApp', [
    'myApp.controllers',
    'myApp.directives',
    'myApp.services',
    'ngSanitize',
    'ui.bootstrap',
    'ui.router',
    'ui'
  ]);

  var capslockService = function($rootScope, $document, $log) {
    var capsLockEnabled = null;
    $document[0].msCapsLockWarningOff = true; // Set this to true to turn off default IE behavior. 
    var isCheckEnabled = $document[0].msCapsLockWarningOff === undefined || $document[0].msCapsLockWarningOff;

    var checkWarning = function() {
      return capsLockEnabled;
    }

    if (isCheckEnabled) {
      $document.keydown(function(e) {
        if (e.which == 20 && capsLockEnabled !== null) {
          capsLockEnabled = !capsLockEnabled;
          console.log("Keydown. CapsLock enabled: " + capsLockEnabled.toString());
          $rootScope.$broadcast('capslockToggle');
        } else if (e.which == 20) {
          $log.log("Keydown. Initial state not set.");
        }
      });

      $document.keypress(function(e) {
        var str = String.fromCharCode(e.which);
        if (!str || str.toLowerCase() === str.toUpperCase()) {
          $log.log("Keypress. Some control key pressed.");
          return;
        }
        capsLockEnabled = (str.toLowerCase() === str && e.shiftKey) || (str.toUpperCase() === str && !e.shiftKey);
        console.log("Keypress. CapsLock enabled: " + capsLockEnabled.toString());
        $rootScope.$broadcast('capslockToggle');
      });
    }

    return {
      checkWarning: checkWarning
    };
  };

  capslockService.$inject = ['$rootScope', '$document', '$log'];
  angular.module('myApp.services')
    .factory('capslockService', capslockService);

  var capsLock = function($document, $log, capslockService) {
    var directive = {
      restrict: 'A',
      link: function(scope, el, attrs) {
        var warningElement;
        if (attrs.capsLockWarning) {
          $document.ready(function() {
            warningElement = $(attrs.capsLockWarning);
            $log.log("Using custom element " + attrs.capsLockWarning);
          });
        } else {
          var warningId = 'warning-' + scope.$id + '-' + Math.floor(Math.random() * 10000);
          warningElement = $('<div id=\"' + warningId + '\" class=\"warning\">Caps lock is on!!</div>');
          el.after(warningElement);
        }
        var hideOrShow = function() {
          var isEnabled = capslockService.checkWarning();
          if (isEnabled && el.is(":focus")) {
            warningElement.show();
            $log.log("Show warning");
          } else {
            warningElement.hide();
            $log.log("Hide warning");
          }
        }
        el.keyup(function(e) {
          $log.log("Keyup");
          hideOrShow();
        });

        el.on("focus", function(e) {
          $log.log("Focus");
          hideOrShow();
        });

        el.on("blur", function(e) {
          $log.log("Blur");
          hideOrShow();
        });
      }
    };
    return directive;
  };

  capsLock.$inject = ['$document', '$log', 'capslockService'];
  angular.module("myApp.directives")
    .directive('capsLock', capsLock);

  var myController = function($scope, $timeout, $animate, $log) {
    var vm = this;
  };

  myController.$inject = ['$scope', '$timeout', '$animate', '$log'];
  angular.module('myApp.controllers')
    .controller('myCtrl', myController);

  myApp.config(['$locationProvider',
    function($locationProvider) {
      $locationProvider.html5Mode(false);
    }
  ]);

  myApp.run(['$log', function($log) {
    $log.log("Start.");
  }]);
})()

/* Styles go here */
label {
  display:inline-block;
  width: 80px;
  margin-bottom:10px;
}

.warning {
  display:none;
  color: red;
}