angular-ui: datepicker seems to hang angularjs when showing button


I have this piece of html code in my application (the ng-app and ng-controller values are defined before):

    <label for="projectSearchDateFrom"><%= Res("Projects.Search.From")%></label>
    <input id="projectSearchDateFrom" type="text" ng-model="startDate" ui-date="dateOptions"/>
    <img ng-show="hasStartDate()" ng-click="clearStartDate()" src="/_Layouts/ClientPortal/Images/layout/TA/delete-small.png" alt="<%= Res("ToolbarDialog.Clear")%> <%= Res("Projects.Search.From")%>" title="<%= Res("ToolbarDialog.Clear")%>" />

My AngularJS controller looks like this:

function ProjectSearchCtrl($scope) {
    $scope.startDate = '';

    $scope.hasStartDate = function () {
        return $scope.startDate != '';

    $scope.clearStartDate = function () {
        $scope.startDate = '';

    $scope.dateOptions = {
        dateFormat: "yy-mm-dd",
        showOn: "focus"

This works perfectly: I have a datepicker set up correctly thanks to AngularUI, the AngularJS binding works...

But if I change the showOn value to "button" or "both" (the two possible options which will actually show the datepicker button), everything after the input (containing the ui-date attribute) stops working: ng-show, ng-click... The controller doesn't even get called.

Versions (all is up-to-date):

  • jQuery 1.7.2
  • angularJS 1.0.0
  • angularUI 0.1.0
  • Chrome 20


As suggested by Pete BD in his comment on the question, there is some kind of bug/unwanted behaviour in the way that jQueryUI and angularJS interact. A workaround is to wrap the input control in a div.

This is fixed in the latest release!

By : Pete BD

This video can help you solving your question :)
By: admin