title: AngularJS: Datepicker not showing when used on modal
body: <p><strong>Question:</strong></p>
  
  <p>I can't find a solution how to get the Datepicker to work, in a modal in Angular. (Please see my code sample below)</p>
  
  <p><strong>Sample Code:</strong></p>
  
  <p><div class="snippet" data-lang="js" data-hide="true">
  <div class="snippet-code snippet-currently-hidden">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var app = angular.module('demo', ['ui.bootstrap', 'ngAnimate']);
  
  app.controller('MainCtrl', ['$scope', '$uibModal', function($scope, $uibModal){
  
    $scope.open = function () {
  
      var modalInstance = $uibModal.open({
        templateUrl: 'myModalContent.html',
        controller: 'ModalInstanceCtrl'
      });
    
    };
    
  }]);
  
  app.controller('ModalInstanceCtrl', ['$scope', '$uibModalInstance', function ($scope, $uibModalInstance) {
    
    $scope.open = function($event) {
      $event.preventDefault();
      $event.stopPropagation();
  
      $scope.opened = true;
    };
  
    $scope.cancel = function () {
      $uibModalInstance.dismiss('cancel');
    };
  }]);</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!doctype html&gt;
  &lt;html &gt;
    &lt;head&gt;
  &lt;script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.js"&gt;&lt;/script&gt;
  &lt;script src="https://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-1.1.1.js"&gt;&lt;/script&gt;
  &lt;script src="example.js"&gt;&lt;/script&gt;
      &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous"&gt;
  
    &lt;/head&gt;
    &lt;body&gt;
  
  &lt;div ng-app="demo"&gt;
    &lt;div ng-controller="MainCtrl" class="container"&gt;
      &lt;button class="btn btn-default" ng-click="open()"&gt;Open Modal&lt;/button&gt;
    &lt;/div&gt;
    
    
    &lt;script type="text/ng-template" id="myModalContent.html"&gt;
      &lt;div class="modal-header"&gt;
        &lt;h3 class="modal-title"&gt;Modal with a DatePicker&lt;/h3&gt;
      &lt;/div&gt;
      &lt;div class="modal-body"&gt;
         &lt;div class="col-md-6"&gt;
              &lt;p class="input-group"&gt;
                &lt;input type="text" class="form-control" datepicker-popup="shortDate" ng-model="dt" is-open="opened"  /&gt;
                &lt;span class="input-group-btn"&gt;
                  &lt;button type="button" class="btn btn-default" ng-click="open($event)"&gt;&lt;i class="glyphicon glyphicon-calendar"&gt;&lt;/i&gt;&lt;/button&gt;
                &lt;/span&gt;
              &lt;/p&gt;
          &lt;/div&gt;   
      &lt;/div&gt;
      &lt;div class="modal-footer"&gt;
        &lt;button class="btn btn-primary" ng-click="cancel()"&gt;Cancel&lt;/button&gt;
      &lt;/div&gt;
    &lt;/script&gt;
    
    
  &lt;/div&gt;
    &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I've also created a <a href="http://plnkr.co/edit/8IlV0KPwQ3jgxjiWNgZx" rel="nofollow">plunker</a> for the code sample.</p>