ionic list modal box

<!DOCTYPE html>
<html>

  <head>
    <link data-require="ionic@1.0.0-beta.1" data-semver="1.0.0-beta.1" rel="stylesheet" href="http://code.ionicframework.com/1.0.0-beta.1/css/ionic.css" />
    <link rel="stylesheet" href="style.css" />
    
    <script data-require="ionic@1.0.0-beta.1" data-semver="1.0.0-beta.1" src="http://code.ionicframework.com/1.0.0-beta.1/js/ionic.bundle.js"></script>
    
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body ng-app="MyApp">
    <div ng-controller="MyCtrl">
      <ion-header-bar>
        <button class="button button-stable" ng-click="showLocationsModal()">
          Choose
        </button>
      </ion-header-bar>
    </div>
  </body>

</html>

// Code goes here

angular.module('MyApp', ['ionic'])
  .controller('MyCtrl', function($scope, $ionicModal) {

    $scope.locations = [
      { ID: 109, Nome: 'Aeroporto Internacional Hercilio Luz' },
      { ID: 161, Nome: 'Koxixos' },
      { ID: 109, Nome: 'Aeroporto Internacional Hercilio Luz' },
      { ID: 161, Nome: 'Koxixos' },
      { ID: 109, Nome: 'Aeroporto Internacional Hercilio Luz' },
      { ID: 161, Nome: 'Koxixos' },
      { ID: 109, Nome: 'Aeroporto Internacional Hercilio Luz' },
      { ID: 161, Nome: 'Koxixos' },
      { ID: 109, Nome: 'Aeroporto Internacional Hercilio Luz' },
      { ID: 161, Nome: 'Koxixos' },
      { ID: 109, Nome: 'Aeroporto Internacional Hercilio Luz' },
      { ID: 161, Nome: 'Koxixos' },
      { ID: 109, Nome: 'Aeroporto Internacional Hercilio Luz' },
      { ID: 161, Nome: 'Koxixos' },
      { ID: 109, Nome: 'Aeroporto Internacional Hercilio Luz' },
      { ID: 161, Nome: 'Koxixos' },
      { ID: 109, Nome: 'Aeroporto Internacional Hercilio Luz' },
      { ID: 161, Nome: 'Koxixos' },
      { ID: 109, Nome: 'Aeroporto Internacional Hercilio Luz' },
      { ID: 161, Nome: 'Koxixos' },
      { ID: 109, Nome: 'Aeroporto Internacional Hercilio Luz' },
      { ID: 161, Nome: 'Koxixos' },
      { ID: 109, Nome: 'Aeroporto Internacional Hercilio Luz' },
      { ID: 161, Nome: 'Koxixos' },
      { ID: 109, Nome: 'Aeroporto Internacional Hercilio Luz' },
      { ID: 161, Nome: 'Koxixos' },
      { ID: 109, Nome: 'Aeroporto Internacional Hercilio Luz' },
      { ID: 161, Nome: 'Koxixos' },
      { ID: 109, Nome: 'Aeroporto Internacional Hercilio Luz' },
      { ID: 161, Nome: 'Koxixos' },
      { ID: 109, Nome: 'Aeroporto Internacional Hercilio Luz' },
      { ID: 161, Nome: 'Koxixos' },
      { ID: 109, Nome: 'Aeroporto Internacional Hercilio Luz' },
      { ID: 161, Nome: 'Koxixos' },
      { ID: 109, Nome: 'Aeroporto Internacional Hercilio Luz' },
      { ID: 161, Nome: 'Koxixos' },
      { ID: 109, Nome: 'Aeroporto Internacional Hercilio Luz' },
      { ID: 161, Nome: 'Koxixos' },
      { ID: 109, Nome: 'Aeroporto Internacional Hercilio Luz' },
      { ID: 161, Nome: 'Koxixos' },
      { ID: 184, Nome: 'Praça XV de Novembro' }
    ];

    $scope.showLocationsModal = function() {
      $scope.openLocationsModal();
    }

    $ionicModal.fromTemplateUrl('locations-modal.html', {
      scope: $scope,
      animation: 'slide-in-up'
    }).then(function(modal) {
      $scope.locationsModal = modal;
    });

    $scope.openLocationsModal = function() {
      $scope.locationsModal.show();
    };

    $scope.closeLocationsModal = function() {
      $scope.locationsModal.hide();
    };

    $scope.$on('$destroy', function() {
      $scope.locationsModal.remove();
    });

    $scope.$on('locationsModal.hidden', function() {
      // Execute action
    });

    $scope.$on('locationsModal.removed', function() {
      // Execute action
    });
    
    $scope.clickLocationItem = function(id) {
      alert('selected item id: ' + id);
      $scope.closeLocationsModal();
    }
  });

/* Styles go here */

<div class="modal">
  <ion-header-bar>
    <h1 class="title">Choose </h1>
    <a ng-click="closeLocationsModal()" class="button button-icon icon ion-close"></a>
  </ion-header-bar>
  <ion-content>
    <ul class="list">
      <li class="item" ng-click="clickLocationItem(item.ID)" ng-repeat="item in locations" ng-bind-html="item.Nome"></li>
    </ul>
  </ion-content>
</div>