Angular $complie causes Datepicker popup box to misbehave slightly

[tarekahf]

I implemented Angular UI datepicker in my project, and after a while, I noticed that when I open the popup box, and click on the month to change to another month, another popup window is displayed on top of the existing popup. See snapshot below to get more details:

Originally, when I click on the month, the current popup should disappear, and another popup should show to select the new month.

However, when I click twice on the month (highlighted in yellow below), the popup will disappear, and it will work fine. But, after I select a date, then the problem will come back.

I am using the same sample code from angular ui datepicker official demo website. Find below the related website and plunker code:

http://angular-ui.github.io/bootstrap/versioned-docs/1.3.3/#/datepickerPopup http://plnkr.co/edit/lEgJ9eC9SzBWsgVhhQkq?p=preview

My code is exactly same as the code in the plunker sample above.

After extensive troubleshooting, and found out that $compile() service causes this behaviour. I did some research, and found out that the $compile service also causes duplicate items in drop-down list or the select element. I used the proposed workaround and it worked. See code below:

$compile(child)(elmScope, function (clone) {
    angular.element(child).after(clone);     
    angular.element(child).remove();
});

The reason why I am using $compile is to add dynamic validation rules from DB to the elements using this approach here.

[tarekahf]

Check the sample code in the plunker link above to show how to reproduce the problem.