I encountered a similar issue where I could only trigger the date picker control once using the button, but subsequent attempts to open it were unsuccessful. It appeared that the problem stemmed from a scope issue possibly caused by the button not being a direct child of the input HTML element. To resolve this, I made some adjustments to the data model. Instead of using $scope.isDatePickerOpen, I switched to $scope.datePicker.isOpen (and also set is-open="datePicker.isOpen"). By placing the new data model for is-open one level deeper under $scope.datePicker object rather than directly under $scope, the data became more accessible.

Another necessary change was updating the data model on a timer. Here is an example:

$scope.openDatePicker = function($event) {
  $event.preventDefault();
  $event.stopPropagation();
  $timeout( function(){
     $scope.datePicker.isOpen = true;  
  }, 50);
};

In conclusion, your workaround mentioned earlier inspired me to persist in finding a solution. Thank you!

Discovered the solution in a different StackOverflow thread, simply use is-open="$parent.isOpen"

When encountering the same issue, I found a simple solution by encapsulating the "opened" boolean variable in an object:

< .. is-open="datePicker.opened" >
...
$scope.datePicker = {opened:false};
$scope.openDate = function($event) {
     $event.preventDefault();
     $event.stopPropagation();
     $scope.datePicker.opened = true;
};

While relatively new to Angular, I realized that this was likely a scope issue and that it is beneficial to include "a dot in the variable name" (datePicker.opened).

(I noticed a similar solution in a previous post, but I found that I did not need to use a timeout. The provided code worked effectively for me.)

This is how I successfully tackled the issue:

Within the html document:

<input is-open="opened"
       type="text" class="form-control" datepicker-popup="{{format}}" 
       ng-model="md" />

In the Javascript file, I simply included a timeout function to signal that it has been closed and can be reopened again:

$scope.open = function($event) {
        $event.preventDefault();
        $event.stopPropagation();
        $scope.opened = true;
        setTimeout(function() {
            $scope.opened = false;
        }, 10);              
    };

Here is a simple one-line solution that doesn't require any container objects, function calls, or the use of preventDefault. You don't even need to declare it in scope because undefined is interpreted as false.

...
  ng-click="dateOpened = !dateOpened"
...

I have personally tested this with angular-ui 0.13.0 (Angular Bootstrap) and it works perfectly because the ng-click function is already handling the default event.

To overcome this challenge, I managed to solve it by modifying the “is-open” attribute from “opened” to be “$parent.opened” as shown below:

seanControllers.controller('TracksController', ['$scope',
  function($scope) {
    $scope.openCalendar = function($event) {
      $event.preventDefault();
      $event.stopPropagation();

      $scope.opened = true;
    };
  }
]);

<form>
  <label>Eindtijd</label>
  <div class="input-group">
    <input type="text" class="form-control" datetime-picker="dd-MM-yyyy HH:mm" ng-model="track.eindtijd" is-open="$parent.opened" />
    <span class="input-group-btn">
<button class="btn btn-default" type="button" ng-click="openCalendar($event)"><i class="glyphicon glyphicon-calendar"></i></button>
    </span>
  </div>
</form>

To effectively manage your dataPicker state variables, create a new object named $scope.dataPickerStates with properties open1 and open2 set to false.

$scope.dataPickerStates = {
  open1:false,
  open2:false
}

Next, update your HTML code to include the following:

<input type="text" datepicker-popup="dd-MMMM-yyyy" ng-model="cdate.customStartDate" is-open="dataPickerStates.open1"  max-date="maxDate" datepicker-options="dateOptions" date-disabled="disabled(date, mode)" ng-required="true" close-text="Close" class="input-md" />

Lastly, implement a method for changing the state:

$scope.open = function($event, opened) {
  $event.preventDefault();
  $event.stopPropagation();
  $scope.datePickerStates[opened] = true;
};

With these steps, you can easily handle the state of your dataPicker.

Encountering the same issue, I tried the solutions provided but none seemed to work for me. It turned out that the missing piece was not including the file: ui-bootstrap-tpls-0.14.2.js.

The key takeaway here is to ensure that you have included all the necessary files as mentioned in the example documentation.

<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular-animate.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.14.2.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">

Best of luck!

Below is an in-depth analysis of this particular behavior:

Presentation on AngularJS Best Practices at MTV Meetup (2012/12/11)

Watch the video here for more insights.

You can implement it in your code as shown below:

 <input type="text" datepicker-popup="dd-MMMM-yyyy" ng-model="cdate.customStartDate" is-open="date_picker1.opened" max-date="maxDate" datepicker-options="dateOptions" date-disabled="disabled(date, mode)" ng-required="true" close-text="Close" class="input-md" />

In your controller script:

$scope.date_picker1 ={
    date: new Date(),
    opened: false
 };
 $scope.open = function($event) {
     .....
     $scope.date_picker1.opened = true;
 };

After going through various solutions, I found that the following code snippet worked for me:

$scope.datePicker = {
  date_opened: false
}
$scope.open_from = function($event) {
  $event.preventDefault();
  $event.stopPropagation();
  $scope.datePicker.date_opened = true;
};

HTML Template:

<div class="input-group">
    <input name="date_obj_from" type="text" class="form-control" uib-
    datepicker-popup="dd-MMMM-yyyy" ng-model="date_obj_from" is-
    open="datePicker.date_opened" datepicker-options="dateOptions" 
    ng-required="true" close-text="Close" />
    <span class="input-group-btn">
       <button type="button" class="btn btn-default" ng-
    click="open_from($event)">
    <i class="glyphicon glyphicon-calendar"></i>
       </button>
    </span>
</div>

I resolved the issue without using $timeout. Simply by changing from is-open="date_opened" to is-open="datePicker.date_opened". It's always a good practice to initialize keys in your object.