Angular-Ui Bootstrap DatePicker Open on focus - angularjs

Question

Though this may seem like a simple question, I can't find anywhere a solution.
Simple as this:
<input type="text" datepicker-popup>
I want that when the cursor enters, the calendar popup automatically shows up, like jquery-ui datepicker. Now I have to either provide a button or Alt-down, both unfriendly to me.
There is a is-open attribute but I dont want to complicate things putting variables in the scope for something that probably should already be available as a configuration? :D.
Thanks

Answer 1

EDIT:
I finally found the solution. It's a little tricky but it works. Here is the directive:
app.directive("autoOpen", ["$parse", function($parse) {
return {
link: function(scope, iElement, iAttrs) {
var isolatedScope = iElement.isolateScope();
iElement.on("focus", function() {
isolatedScope.$apply(function() {
$parse("isOpen").assign(isolatedScope, "true");
});
});
// Remove DOM Event Listener when $destroy lifecycle event is fired
scope.$on('$destroy', function() { iElement.off("focus") })
}
};
}]);
And this is view:
<input type="text" datepicker-popup="" ng-model="ctrl.dt" auto-open />
This is the older solution:
You can write a directive to change the value of is-open when input focuses:
app.directive("autoOpen", ["$parse", function($parse) {
return {
link: function(scope, iElement, iAttrs) {
var isOpenVarName = iAttrs.isOpen;
iElement.on("focus", function() {
$scope.$apply(function() {
$parse(isOpenVarName).assign(scope, "true");
});
});
}
};
}]);
and here is the view:
<input type="text" datepicker-popup="" auto-open is-open="open" ng-model="ctrl.dt" />
Note that, you have to define open in your controller and place is-open="open" in input element. I know this is not the best solution. I will make it better as soon as find a better solution.
Update : As #Akos-lukacs mentioned in comments, this solution does not work when disabling debug data in angular.

Answer 2

alisabzevari's answer seems fine to me, but you might be better off just doing this:
ng-focus='open = true'
I struggled to wrap my head around how exactly is-open works, but I ended up just making a wrapper directive that does all the typical setup for my datepickers and sets up a separate scope for the is-open state:
app.directive('datepickerAuto', function() {
return {
require: ['ngModel'],
restrict: 'E',
template: '<input class="input form-control" datepicker-popup="MM/dd/yyyy" show-weeks="false"' +
' is-open="autoIsOpen" ng-focus="autoIsOpen = true" ng-click="autoIsOpen = true"'
+' type="text" ng-model="ngModel" ng-model-options="{\'updateOn\': \'blur\'}"/>',
link: function(scope) {
scope.autoIsOpen = false;
},
scope: {
ngModel: '='
}
};
});
All I have to do is this now:
<datepicker-auto ng-model="someDate"></datepicker-auto>