diff --git a/dist/js/ionic-angular.js b/dist/js/ionic-angular.js
index 4952dbf113..bc3b81c618 100644
--- a/dist/js/ionic-angular.js
+++ b/dist/js/ionic-angular.js
@@ -416,26 +416,46 @@ angular.module('ionic.service.templateLoad', [])
 
 angular.module('ionic.ui.actionSheet', [])
 
-.directive('actionSheet', function() {
+.directive('actionSheet', function($document) {
   return {
     restrict: 'E',
     scope: true,
     replace: true,
     link: function($scope, $element){
+      var keyUp = function(e) {
+        if(e.which == 27) {
+          $scope.cancel();
+          $scope.$apply();
+        }
+      };
+
+      var backdropClick = function(e) {
+        if(e.target == $element[0]) {
+          $scope.cancel();
+          $scope.$apply();
+        }
+      };
       $scope.$on('$destroy', function() {
         $element.remove();
+        $document.unbind('keyup', keyUp);
+        $element.unbind('click', backdropClick);
       });
+
+      $document.bind('keyup', keyUp);
+      $element.bind('click', backdropClick);
     },
-    template: '<div class="action-sheet slide-in-up">' +
-                '<div class="action-sheet-group">' +
-                  '<div class="action-sheet-title" ng-if="titleText">{{titleText}}</div>' +
-                  '<button class="button" ng-click="buttonClicked($index)" ng-repeat="button in buttons">{{button.text}}</button>' +
-                '</div>' +
-                '<div class="action-sheet-group" ng-if="destructiveText">' +
-                  '<button class="button destructive" ng-click="destructiveButtonClicked()">{{destructiveText}}</button>' +
-                '</div>' +
-                '<div class="action-sheet-group" ng-if="cancelText">' +
-                  '<button class="button" ng-click="cancel()">{{cancelText}}</button>' +
+    template: '<div class="action-sheet-backdrop">' +
+                '<div class="action-sheet action-sheet-up">' +
+                  '<div class="action-sheet-group">' +
+                    '<div class="action-sheet-title" ng-if="titleText">{{titleText}}</div>' +
+                    '<button class="button" ng-click="buttonClicked($index)" ng-repeat="button in buttons">{{button.text}}</button>' +
+                  '</div>' +
+                  '<div class="action-sheet-group" ng-if="destructiveText">' +
+                    '<button class="button destructive" ng-click="destructiveButtonClicked()">{{destructiveText}}</button>' +
+                  '</div>' +
+                  '<div class="action-sheet-group" ng-if="cancelText">' +
+                    '<button class="button" ng-click="cancel()">{{cancelText}}</button>' +
+                  '</div>' +
                 '</div>' +
               '</div>'
   };
diff --git a/js/ext/angular/src/directive/ionicActionSheet.js b/js/ext/angular/src/directive/ionicActionSheet.js
index 756a05dfcb..11fd4ab077 100644
--- a/js/ext/angular/src/directive/ionicActionSheet.js
+++ b/js/ext/angular/src/directive/ionicActionSheet.js
@@ -3,26 +3,46 @@
 
 angular.module('ionic.ui.actionSheet', [])
 
-.directive('actionSheet', function() {
+.directive('actionSheet', function($document) {
   return {
     restrict: 'E',
     scope: true,
     replace: true,
     link: function($scope, $element){
+      var keyUp = function(e) {
+        if(e.which == 27) {
+          $scope.cancel();
+          $scope.$apply();
+        }
+      };
+
+      var backdropClick = function(e) {
+        if(e.target == $element[0]) {
+          $scope.cancel();
+          $scope.$apply();
+        }
+      };
       $scope.$on('$destroy', function() {
         $element.remove();
+        $document.unbind('keyup', keyUp);
+        $element.unbind('click', backdropClick);
       });
+
+      $document.bind('keyup', keyUp);
+      $element.bind('click', backdropClick);
     },
-    template: '<div class="action-sheet slide-in-up">' +
-                '<div class="action-sheet-group">' +
-                  '<div class="action-sheet-title" ng-if="titleText">{{titleText}}</div>' +
-                  '<button class="button" ng-click="buttonClicked($index)" ng-repeat="button in buttons">{{button.text}}</button>' +
-                '</div>' +
-                '<div class="action-sheet-group" ng-if="destructiveText">' +
-                  '<button class="button destructive" ng-click="destructiveButtonClicked()">{{destructiveText}}</button>' +
-                '</div>' +
-                '<div class="action-sheet-group" ng-if="cancelText">' +
-                  '<button class="button" ng-click="cancel()">{{cancelText}}</button>' +
+    template: '<div class="action-sheet-backdrop">' +
+                '<div class="action-sheet action-sheet-up">' +
+                  '<div class="action-sheet-group">' +
+                    '<div class="action-sheet-title" ng-if="titleText">{{titleText}}</div>' +
+                    '<button class="button" ng-click="buttonClicked($index)" ng-repeat="button in buttons">{{button.text}}</button>' +
+                  '</div>' +
+                  '<div class="action-sheet-group" ng-if="destructiveText">' +
+                    '<button class="button destructive" ng-click="destructiveButtonClicked()">{{destructiveText}}</button>' +
+                  '</div>' +
+                  '<div class="action-sheet-group" ng-if="cancelText">' +
+                    '<button class="button" ng-click="cancel()">{{cancelText}}</button>' +
+                  '</div>' +
                 '</div>' +
               '</div>'
   };