modal.html

<!doctype html>
<html ng-app="ui.bootstrap.demo">
  <head>
    <script src="libs/angular.js"></script>
    <script src="libs/ui-bootstrap-tpls-0.12.0.js"></script>
    <script src="js/modal.js"></script>
    <link href="css/bootstrap.css" rel="stylesheet">
    <style>
      body {
        margin: 20px;
      }
    </style>
    <!--[if !IE]><!-->
    <style>
    .modal.center .modal-dialog {
      position: fixed;
      top: 40%;
      left: 50%;
      min-width: 300px;
      max-width: 600px;
      width: 50%;
      -webkit-transform: translateX(-50%) translateY(-50%);
      -ms-transform: translateX(-50%) translateY(-50%);
      transform: translateX(-50%) translateY(-50%)
    }
    </style>
    <!--<![endif]-->
  </head>
  <body>

<div ng-controller="ModalDemoCtrl">
    <script type="text/ng-template" id="myModalContent.html">
        <div class="modal-header">
            <h3 class="modal-title">I'm a modal!</h3>
        </div>
        <div class="modal-body">
            <ul>
                <li ng-repeat="item in items">
                    <a ng-click="selected.item = item">{{ item }}</a>
                </li>
            </ul>
            Selected: <b>{{ selected.item }}</b>
        </div>
        <div class="modal-footer">
            <button class="btn btn-primary" ng-click="ok()">OK</button>
            <button class="btn btn-warning" ng-click="cancel()">Cancel</button>
        </div>
    </script>

    <button class="btn btn-default" ng-click="open()">Open me!</button>
    <button class="btn btn-default" ng-click="open('lg')">Large modal</button>
    <button class="btn btn-default" ng-click="open('sm')">Small modal</button>
    <div ng-show="selected">Selection from a modal: {{ selected }}</div>
</div>
  </body>
</html>