Multiple angular ui bootstrap datepickers with buttons - angularjs

Question

I have two datepickers that now work but I still can't get the button to work.
I implemented the solution from here but it gets rid of the button. I'd like to keep the calendar button.
How can I keep the calendar button working?
edit: to clarify, it works only for the first click
<div class="input-group">
<input type="text"
datepicker-popup="MM/dd/yyyy"
ng-model="report_args.start_date"
is-open="opened1"
ng-click = "report_args.start_date.open = true"
max-date="maxDate"
datepicker-options="dateOptions"
date-disabled="disabled(date, mode)"
ng-required="true"
close-text="Close"
class="form-control">
<span class="input-group-addon" ng-click="open($event,'opened1')">
<i class="fa fa-calendar"></i>
</span>
</div>
JS
$scope.open = function($event, opened) {
$event.preventDefault();
$event.stopPropagation();
$scope[opened] = true;
};

Answer 1

What's happening is that the directive is making it's own copy of $scope.opened1 in it's child scope. When it first opens up, it works because it reads the value from the parent scope, but then when it is closed, the opened1 value is updated in the child scope and now you can't modify from outside the child.
What you need to do is use the "dot" notation.
JS
$scope.dpOpened = {
opened1: false,
opened2: false
};
$scope.open = function($event, opened) {
$event.preventDefault();
$event.stopPropagation();
$scope.dpOpened[opened] = true;
};
HTML
<div class="input-group">
<input type="text"
datepicker-popup="MM/dd/yyyy"
ng-model="report_args.start_date"
is-open="dpOpened.opened1"
ng-click = "report_args.start_date.open = true"
max-date="maxDate"
datepicker-options="dateOptions"
date-disabled="disabled(date, mode)"
ng-required="true"
close-text="Close"
class="form-control">
<span class="input-group-addon" ng-click="open($event,'opened1')">
<i class="fa fa-calendar"></i>
</span>
</div>
Read this wiki entry on Understanding Scope in AngularJs