Untitled

<html>
    <head>
    <link rel="stylesheet" href="bower_components/bootstrap/css/bootstrap.css">
    <script src="bower_components/jquery/jquery.js" type="text/javascript"></script>
    <script src="bower_components/angular/angular.js" type="text/javascript"></script>
    <script src="bower_components/bootstrap/bootstrap.js" type="text/javascript"></script>
    <script src="bower_components/bootstrap/ui-bootstrap-tpls-0.11.2.min.js"type="text/javascript"></script>
    </head>
    <body ng-app="cloudPayrollEssApp">
     <div ng-controller="CloudCtrl">
 <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-primary' ng-click="open()">Button</button>
    </div>
    </body>
    </html>

var app = angular.module('cloudPayrollEssApp', [
    'ngAnimate',
    'ngCookies',
    'ngResource',
    'ngRoute',
    'ngSanitize',
    'ngTouch',
    'ui.bootstrap'
  ])
  app.controller("CloudCtrl", function($scope,  $modal, $log){
    $scope.tab = 0;
     $scope.items = ['item1', 'item2', 'item3'];

      $scope.open = function (size) {

        var modalInstance = $modal.open({
          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());
        });
      };
  });

app.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');
      };
    });

<div>
    <script type="text/ng-template" id="myModalContent.html">
        <div class="modal-header">
            <h3 class="modal-title"Alert!</h3>
        </div>
        <div class="modal-body">
            warning ...
        </div>
        <div class="modal-footer">
            <button ng-click="dismiss()>OK</button>
        </div>
    </script>
</div>