Angular bootstrap datepicker(uib-datepicker) not apply to new added elements

Question

I have a filed with uib-datepicker that added to DOM with jQuery after page load. Now when I focus to field, datepicker not shown!

create and append date picker field

var dateInput = 
   $compile("<input type='text' class='date-filter' 
   ng-model='dateFilter' 
   uib-datepicker-popup='yyyy-MM-dd' 
   is-open='datePicker[1]' 
   ng-focus='openDatePicker($event, 1)'>")($scope);

   $('#wapper').append(dateInput);

open datepicker

$scope.datePicker = [];
$scope.openDatePicker = function ($event, datePickerIndex) {
   $event.preventDefault();
   $event.stopPropagation();
   $scope.datePicker[datePickerIndex] = true;
};

It can be said: uib-datepicker not apply to filed at all!

What's the problem?