title: How to close ui-bootstrap modal when press back button on android phone?
body: <p>I have a sample ui-bootstrap modal (from ui-bootstrap document)</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>angular.module('ui.bootstrap.demo', ['ui.bootstrap']);
  angular.module('ui.bootstrap.demo').controller('ModalDemoCtrl', function ($scope, $modal, $log) {
  
    $scope.items = ['item1', 'item2', 'item3'];
  
    $scope.animationsEnabled = true;
  
    $scope.open = function (size) {
  
      var modalInstance = $modal.open({
        animation: $scope.animationsEnabled,
        templateUrl: 'myModalContent.html',
        controller: 'ModalInstanceCtrl',
        size: size,
        resolve: {
          items: function () {
            return $scope.items;
          }
        }
      });
  
      modalInstance.result.then(function (selectedItem) {
        $scope.selected = selectedItem;
      }, function () {
        $log.info('Modal dismissed at: ' + new Date());
      });
    };
  
    $scope.toggleAnimation = function () {
      $scope.animationsEnabled = !$scope.animationsEnabled;
    };
  
  });
  
  // Please note that $modalInstance represents a modal window (instance) dependency.
  // It is not the same as the $modal service used above.
  
  angular.module('ui.bootstrap.demo').controller('ModalInstanceCtrl', function ($scope, $modalInstance, items) {
  
    $scope.items = items;
    $scope.selected = {
      item: $scope.items[0]
    };
  
    $scope.ok = function () {
      $modalInstance.close($scope.selected.item);
    };
  
    $scope.cancel = function () {
      $modalInstance.dismiss('cancel');
    };
  });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!doctype html&gt;
  &lt;html ng-app="ui.bootstrap.demo"&gt;
    &lt;head&gt;
      &lt;script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.13/angular.js"&gt;&lt;/script&gt;
      &lt;script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.13.0.js"&gt;&lt;/script&gt;
      &lt;script src="example.js"&gt;&lt;/script&gt;
      &lt;link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet"&gt;
    &lt;/head&gt;
    &lt;body&gt;
  
  &lt;div ng-controller="ModalDemoCtrl"&gt;
      &lt;script type="text/ng-template" id="myModalContent.html"&gt;
      
          &lt;div class="modal-header"&gt;
              &lt;h3 class="modal-title"&gt;I'm a modal!&lt;/h3&gt;
          &lt;/div&gt;
          &lt;div class="modal-body"&gt;
              &lt;ul&gt;
                  &lt;li ng-repeat="item in items"&gt;
                      &lt;a ng-click="selected.item = item"&gt;{{ item }}&lt;/a&gt;
                  &lt;/li&gt;
              &lt;/ul&gt;
              Selected: &lt;b&gt;{{ selected.item }}&lt;/b&gt;
          &lt;/div&gt;
          &lt;div class="modal-footer"&gt;
              &lt;button class="btn btn-primary" ng-click="ok()"&gt;OK&lt;/button&gt;
              &lt;button class="btn btn-warning" ng-click="cancel()"&gt;Cancel&lt;/button&gt;
          &lt;/div&gt;
      &lt;/script&gt;
  
      &lt;button class="btn btn-default" ng-click="open()"&gt;Open me!&lt;/button&gt;
      &lt;button class="btn btn-default" ng-click="open('lg')"&gt;Large modal&lt;/button&gt;
      &lt;button class="btn btn-default" ng-click="open('sm')"&gt;Small modal&lt;/button&gt;
      &lt;button class="btn btn-default" ng-click="toggleAnimation()"&gt;Toggle Animation ({{ animationsEnabled }})&lt;/button&gt;
      &lt;div ng-show="selected"&gt;Selection from a modal: {{ selected }}&lt;/div&gt;
  &lt;/div&gt;
    &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>After I open one modal, when I press back button on android device, it just go to previous page, how can I close the modal instead of go to previous page?</p>
  
  <p>I spent many hours and found many posts like this (<a href="https://stackoverflow.com/q/16870007/1686094">how to close a bootstrap modal with the browser back button instead of going back a page?`</a>), but it didn't work.</p>
  
  <p>Any solutions?</p>
  
  <p>Thanks in advance.</p>