How to have at least two datepickers of ui-bootstrap on a single page?

Rather than using a different function you can use a different is-open attribute and then pass the attribute in through the ng-click function. You still need different models:

<div>        <div class="form-horizontal pull-left">            <input type="text" datepicker-popup="dd-MMMM-yyyy" ng-model="dt1" is-open="opened1" min="minDate" max="'2015-06-22'" datepicker-options="dateOptions" date-disabled="disabled(date, mode)" ng-required="true"/>            <button class="btn" ng-click="open($event,'opened1')"><span class="glyphicon glyphicon-calendar"></span></button>        </div>        <div class="form-horizontal pull-left">            <input type="text" datepicker-popup="dd-MMMM-yyyy" ng-model="dt2" is-open="opened2" min="minDate" max="'2015-06-22'" datepicker-options="dateOptions" date-disabled="disabled(date, mode)" ng-required="true" />            <button class="btn" ng-click="open($event,'opened2')"><span class="glyphicon glyphicon-calendar"></span></button>        </div>        <button type="submit" class="btn btn-default">Submit</button>    </div>

And inside controller:

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

I'm still learning Angular and UI-Bootstrap, so take that into account when reading my answer. I did something similar to BlueMonk, but in a flexible way that keeps my controller code from having to know about the instances of the datepicker on the page.

I put all of the datepicker code in my controller into a single namespace:

$scope.datePicker = (function () {    var method = {};    method.instances = [];    method.open = function ($event, instance) {        $event.preventDefault();        $event.stopPropagation();        method.instances[instance] = true;    };    method.options = {        'show-weeks': false,        startingDay: 0    };    var formats = ['MM/dd/yyyy', 'dd-MMMM-yyyy', 'yyyy/MM/dd', 'dd.MM.yyyy', 'shortDate'];    method.format = formats[0];    return method;}());

And then used the following markup:

<p class="input-group">    <input type="text" class="form-control" ng-model="editableEmployee.dateHired" datepicker-popup="{{datePicker.format}}" datepicker-options="datePicker.options" is-open="datePicker.instances['dateHired']" close-text="Close" />    <span class="input-group-btn">        <button type="button" class="btn btn-default" ng-click="datePicker.open($event, 'dateHired')"><i class="glyphicon glyphicon-calendar"></i></button>    </span></p><p class="input-group">    <input type="text" class="form-control" ng-model="editableEmployee.dateFired" datepicker-popup="{{datePicker.format}}" datepicker-options="datePicker.options" is-open="datePicker.instances['dateFired']" close-text="Close" />    <span class="input-group-btn">        <button type="button" class="btn btn-default" ng-click="datePicker.open($event, 'dateFired')"><i class="glyphicon glyphicon-calendar"></i></button>    </span></p>

This worked like a charm for me.

This should work (different models, open flag, and functions):

<div>        <div class="form-horizontal pull-left">            <input type="text" datepicker-popup="dd-MMMM-yyyy" ng-model="dt1" is-open="opened1" min="minDate" max="'2015-06-22'" datepicker-options="dateOptions" date-disabled="disabled(date, mode)" ng-required="true"/>            <button class="btn" ng-click="open1()"><span class="glyphicon glyphicon-calendar"></span></button>        </div>        <div class="form-horizontal pull-left">            <input type="text" datepicker-popup="dd-MMMM-yyyy" ng-model="dt2" is-open="opened2" min="minDate" max="'2015-06-22'" datepicker-options="dateOptions" date-disabled="disabled(date, mode)" ng-required="true" />            <button class="btn" ng-click="open2()"><span class="glyphicon glyphicon-calendar"></span></button>        </div>        <button type="submit" class="btn btn-default">Submit</button>    </div>

And inside controller:

   $scope.open1 = function($event) {    $event.preventDefault();    $event.stopPropagation();    $scope.opened1 = true;  };   $scope.open2 = function($event) {    $event.preventDefault();    $event.stopPropagation();    $scope.opened2 = true;  };