<!doctype html>
<html ng-app="ui.bootstrap.demo">

<head>
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.js"></script>
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular-animate.js"></script>
  <script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.14.3.js"></script>
  <script src="example.js"></script>
  <link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
</head>

<body>

  <div ng-controller="ModalDemoCtrl">
    <script type="text/ng-template" id="myModalContent.html">
      <div class="modal-header">
        <h3 class="modal-title">Datepicker in modal</h3>
      </div>
      <div class="modal-body">
        <div class="row">
          <div class="col-xs-6">
            Hours step is:
            <select class="form-control" ng-model="selected.hstep" ng-options="opt for 
   opt in table.hstep"></select>
          </div>
          <div class="col-xs-6">
            Minutes step is:
            <select class="form-control" ng-model="selected.mstep" ng-options="opt for 
   opt in table.mstep"></select>
          </div>
        </div>

      </div>
      <div class="modal-footer">
        <button class="btn btn-primary" type="button" ng-click="ok()">OK</button>
        <button class="btn btn-warning" type="button" ng-click="cancel()">Cancel</button>
      </div>
    </script>

    <button type="button" class="btn btn-default" ng-click="open()">Open me!</button>
  </div>
</body>

</html>
angular.module('ui.bootstrap.demo', ['ngAnimate', 'ui.bootstrap']);
angular.module('ui.bootstrap.demo').controller('ModalDemoCtrl', function($scope, $uibModal, $log) {

  $scope.table = {
    hstep: [1, 2, 3],
    mstep: [1, 5, 10, 15, 25, 30]
  };
  $scope.open = function() {
    var modalInstance = $uibModal.open({
      templateUrl: 'myModalContent.html',
      controller: 'ModalInstanceCtrl',
      resolve: {
        items: function() {
          return $scope.items;
        },
        table: function() {
          return $scope.table;
        }
      }
    });

    modalInstance.result.then(function(selected) {
      $scope.selected = selected;
      console.log('selected is ', selected);
    }, function() {
      $log.info('Modal dismissed at: ' + new Date());
    });
  };


});

// Please note that $modalInstance represents a modal window (instance) dependency.
// It is not the same as the $uibModal service used above.

angular.module('ui.bootstrap.demo').controller('ModalInstanceCtrl', function($scope, $uibModalInstance, table) {
  $scope.table = table;

  $scope.ok = function() {
    $uibModalInstance.close($scope.selected);
  };

  $scope.cancel = function() {
    $uibModalInstance.dismiss('cancel');
  };
});