why does datepicker popup not display? - angularjs

Question

I am trying to create a bootstrap datapicker directive:
app.directive('datePicker', function ($compile, $timeout) {
return {
replace: true,
restrict:'E',
templateUrl: 'datepicker.html',
scope: {},
controller: function ($scope) {
console.log('datepciker');
// debugger;
$scope.today = function () {
$scope.dt = new Date();
};
$scope.today();
$scope.clear = function () {
$scope.dt = null;
};
// Disable weekend selection
//$scope.disabled = function(date, mode) {
// return ( mode === 'day' && ( date.getDay() === 0 || date.getDay() === 6 ) );
//};
$scope.toggleMin = function () {
$scope.minDate = $scope.minDate ? null : new Date();
};
$scope.toggleMin();
$scope.open = function ($event) {
$event.preventDefault();
$event.stopPropagation();
$scope.opened = true;
};
//$scope.open = function ($event) {
// $scope.status.opened = true;
//};
$scope.dateOptions = {
formatYear: 'yy',
startingDay: 1
};
$scope.formats = ['dd-MMMM-yyyy', 'yyyy/MM/dd', 'dd.MM.yyyy', 'shortDate'];
$scope.format = $scope.formats[0];
$scope.status = {
opened: false
};
var tomorrow = new Date();
tomorrow.setDate(tomorrow.getDate() + 1);
var afterTomorrow = new Date();
afterTomorrow.setDate(tomorrow.getDate() + 2);
$scope.events =
[
{
date: tomorrow,
status: 'full'
},
{
date: afterTomorrow,
status: 'partially'
}
];
$scope.getDayClass = function (date, mode) {
if (mode === 'day') {
var dayToCheck = new Date(date).setHours(0, 0, 0, 0);
for (var i = 0; i < $scope.events.length; i++) {
var currentDay = new Date($scope.events[i].date).setHours(0, 0, 0, 0);
if (dayToCheck === currentDay) {
return $scope.events[i].status;
}
}
}
return '';
};
}
};
In my page I have:
<date-picker ng-model="dateTo"></date-picker>
For some reason the popup does not come up, any suggestions on how to fix this?
plunkr:http://plnkr.co/edit/UiMiEk5GQSVId4YdAnCH?p=preview

Answer 1

Line 2 of datepicker.html ends in
is-open="status.opened"
If you change that to just is-open-"opened" you get a date picker.