title: How can I get ui-keypress working in my Angular JS app?
body: <p>My app has a login form consisting of a username, password, and a button to click to log in. However, for some reason I just can't get <code>ui-keypress</code> to work on the login button. I'm using <code>ui-bootstrap</code> and <code>ui-utils</code>. <code>ui-utils</code> has the keypress directive included.</p>
  
  <p>Here's what I have so far:</p>
  
  <p>My login partial:</p>
  
  <p></p>
  
  <pre><code>&lt;div id="loginForm"&gt;
  
      &lt;img id="logo" src="img/login_logo.png"/&gt;
  
      &lt;alert ng-repeat="alert in alerts" type="alert.type" close="closeAlert($index)"&gt;
          {{alert.msg}}
      &lt;/alert&gt;
  
      &lt;input type="text" id="username" ng-model="username" placeholder="Username"/&gt;
      &lt;input type="password" id="password" ng-model="password" placeholder="Password"/&gt;
  
      &lt;button type="button" id="loginBtn" class="btn btn-primary" ng-model="loginModel" ng-click="login()" ui-keypress="{13:'keypressLogin($event)'}"&gt;
          Login
      &lt;/button&gt;
  
  &lt;/div&gt;
  </code></pre>
  
  <p></p>
  
  <p>My login controller:
  </p>
  
  <pre><code>ClutchControllers.controller("LoginController", [
  
  '$scope', 
  '$http', 
  '$location',
  '$cookieStore',
  'Auth', 
  
  function($scope, $http, $location, $cookieStore, Auth) {
  
      // Redirect if already logged in
      if(Auth.isLoggedIn()) {
          $location.path('/dashboard');
      }
  
      $scope.alerts = [];
  
      $scope.closeAlert = function(index) {
          $scope.alerts.splice(index, 1);
      }
  
      $scope.login = function() {
  
          Auth.login({
              username: $scope.username,
              password: $scope.password
          }, function(err, user) {
              if(err) {
                  console.log(err);
                  $scope.alerts = [err];
              } else {
                  console.log(user);
                  console.log(Auth.isLoggedIn());
  
                  //this this if you want to change the URL and add it to the history stack
                  $location.path('/dashboard');
              }
          });
  
      }
  
      $scope.keypressLogin = function($event) {
          console.log($event);
          console.log($scope.username);
      }
  
  }
  ]);
  </code></pre>
  
  <p>And finally, my app routing:</p>
  
  <pre><code>angular.module('myApp', [ 
  'ngCookies', 
  'ui.utils', 
  'ui.bootstrap',
  'ui.utils',
  'clutch.services', 
  'clutch.controllers' 
  ])
  .config(['$routeProvider', '$httpProvider', function($routeProvider, $httpProvider) {
  
  $routeProvider
      .when('/login', {
          controller: "LoginController",
          templateUrl: "partials/login.html",
          auth: false
      })
      .when('/dashboard', {
          controller: "DashboardController",
          templateUrl: "partials/dashboard.html",
          auth: true
      })
      .otherwise({ redirect: "/login" });
  
  }]);
  
  ClutchControllers = angular.module('clutch.controllers', ['ui.bootstrap']);
  ClutchServices = angular.module('clutch.services', ['ngResource']);
  </code></pre>