A Pen by J Bruni.

index.html

<div class="main" ng-app="codepen" ng-controller="codepenCtrl">
  
  <p class="form-group">
    <input class="form-control" type="text" value="{{ date | date:'fullDate' }}" readonly>
  </p>
  
  <p class="form-group">
    <input class="form-control" type="text" ng-model="text">
  </p>
  
  <p>
    <button popover-placement="bottom" popover-template="calendar.html" class="btn btn-default">Date Picker</button>
  </p>
  
  <script id="calendar.html" type="text/ng-template">
    <div ng-model="date">
      <datepicker show-weeks="false"></datepicker>
    </div>
    <hr />
    <div class="alert alert-success">{{ text }}</div>
  </script>
  
</div>

popover-template-directive-example.markdown

popover-template directive example

A Pen by J Bruni on CodePen.

License.

script.js

angular.module('codepen', ['ui.bootstrap']);

var codepenCtrl = function ($scope) {
  $scope.date = new Date();
  $scope.text = 'Click a date to check the binding.';
};

style.css

div.main {
  padding: 2em;
  text-align: center;
  width: 50%;
  margin: auto;
}