title: Angular bootstrap datepicker(uib-datepicker) not apply to new added elements
body: <p>I have a filed with <a href="http://angular-ui.github.io/bootstrap/#!#datepickerPopup" rel="nofollow noreferrer">uib-datepicker</a> that added to DOM with <code>jQuery</code> after page load.
  Now when I focus to field, <strong>datepicker</strong> not shown!</p>
  
  <p><strong>create and append date picker field</strong></p>
  
  <pre><code>var dateInput = 
     $compile("&lt;input type='text' class='date-filter' 
     ng-model='dateFilter' 
     uib-datepicker-popup='yyyy-MM-dd' 
     is-open='datePicker[1]' 
     ng-focus='openDatePicker($event, 1)'&gt;")($scope);
  
     $('#wapper').append(dateInput);
  </code></pre>
  
  <p><strong>open datepicker</strong></p>
  
  <pre><code>$scope.datePicker = [];
  $scope.openDatePicker = function ($event, datePickerIndex) {
     $event.preventDefault();
     $event.stopPropagation();
     $scope.datePicker[datePickerIndex] = true;
  };
  </code></pre>
  
  <p>It can be said: <code>uib-datepicker</code> not apply to filed at all!</p>
  
  <p>What's the problem?</p>