<!DOCTYPE html>
<html ng-app="peskyDatepicker">

  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.13.0/ui-bootstrap-tpls.min.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" />
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body>
    <div ng-controller="DatepickerDemoCtrl as vm">
      <pre>Selected date is: <em>{{vm.valuationDate | date:'fullDate' }}</em>
      </pre>
      <div class="row">
        <div class="col-md-3">
          <p class="input-group">
            <span class="input-group-btn">
              <button type="button" class="btn btn-default" 
                      ng-click="vm.valuationDatePickerOpen()">
                <i class="glyphicon glyphicon-calendar"></i>
              </button>
            </span>
            <input type="text" class="form-control" 
                   datepicker-popup="mediumDate" 
                   is-open="vm.valuationDatePickerIsOpen" 
                   ng-click="vm.valuationDatePickerOpen()" 
                   ng-model="vm.valuationDate" />
            <span class="input-group-btn">
              <button type="button" class="btn btn-default" 
                      ng-click="vm.valuationDatePickerOpen($event)">
                <i class="glyphicon glyphicon-calendar"></i>
              </button>
            </span>
          </p>
        </div>
      </div>
      <p class="col-md-3">
        The left button <em>doesn't</em> work (opens the picker and closes right away).<br />
        The right button <em>does</em> work (opens the picker and stays open).<br />
        And it's all down to <code>$event.stopPropagation();</code> - funny huh?</code>
      </p>
      <ul>
        <li ng-repeat="open in vm.opens">{{open}}</li>
      </ul>
    </div>
  </body>

</html>
angular.module('peskyDatepicker', ['ui.bootstrap'])
.controller('DatepickerDemoCtrl', ['$scope',
function ($scope) {
  
  var vm = this;
  
  vm.valuationDate = new Date();
  vm.valuationDatePickerIsOpen = false;
  vm.opens = [];
  
  $scope.$watch(function () {
       return vm.valuationDatePickerIsOpen;
   },function(value){
      vm.opens.push("valuationDatePickerIsOpen: " + value + " at: " + new Date());
   });
  
  vm.valuationDatePickerOpen = function ($event) {
    
      if ($event) {
          $event.preventDefault();
          $event.stopPropagation(); // This is the magic
      }
      this.valuationDatePickerIsOpen = true;
  };
}]);
/* Styles go here */