How can I get ui-keypress working in my Angular JS app?


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 ui-keypress to work on the login button. I'm using ui-bootstrap and ui-utils. ui-utils has the keypress directive included.

Here's what I have so far:

My login partial:

<div id="loginForm">

    <img id="logo" src="img/login_logo.png"/>

    <alert ng-repeat="alert in alerts" type="alert.type" close="closeAlert($index)">

    <input type="text" id="username" ng-model="username" placeholder="Username"/>
    <input type="password" id="password" ng-model="password" placeholder="Password"/>

    <button type="button" id="loginBtn" class="btn btn-primary" ng-model="loginModel" ng-click="login()" ui-keypress="{13:'keypressLogin($event)'}">


My login controller:

ClutchControllers.controller("LoginController", [


function($scope, $http, $location, $cookieStore, Auth) {

    // Redirect if already logged in
    if(Auth.isLoggedIn()) {

    $scope.alerts = [];

    $scope.closeAlert = function(index) {
        $scope.alerts.splice(index, 1);

    $scope.login = function() {

            username: $scope.username,
            password: $scope.password
        }, function(err, user) {
            if(err) {
                $scope.alerts = [err];
            } else {

                //this this if you want to change the URL and add it to the history stack


    $scope.keypressLogin = function($event) {


And finally, my app routing:

angular.module('myApp', [ 
.config(['$routeProvider', '$httpProvider', function($routeProvider, $httpProvider) {

    .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('', ['ngResource']);
Problem courtesy of: jrthib


Taking a wild guess -- you've got the ui-keypress attribute on your button and not your two input tags..

Took me a bit to reproduce in jsfiddle w/ all your dependencies:

Solution courtesy of: Langdon


Just a thought, why would you want to use ui-keypress. IMHO using a form is better solution in this case. Consider this...

<form ng-submit="login()">
  <input type="text"/>
  <input type="password"/>
  <button type="submit">Login</button>
Discussion courtesy of: skeep

This recipe can be found in it's original form on Stack Over Flow.