open datepicker on autofocus html5 input date field angularjs

I'm trying to autofocus a date field in angularjs. I have written a directive for it and it's working fine but I'm running into a problem. The HTML5 date picker does not opens up until and unless I don't click on it's icon which is coming on the right side.

(function () {
  "use strict";

  angular
    .module("ctraUIComponents")
    .directive("inputAutoFocus", autoFocus);

  /**
   * @ngInject
   * @return {{restrict: string, link: autoFocusLink}}
   */
  function autoFocus ($timeout) {
    /**
     * @type {{restrict: string, link: autoFocusLink}}
     */
    var directive = {
      restrict: "A",
      link: autoFocusLink
    };

    return directive;

    /**
     * @ngInject
     * @param scope
     * @param element
     */
    function autoFocusLink (scope, element) {
      $timeout(function() {
        element[0].focus();
      });
    }
  }
})();

Can somebody please help me in figuring out on how to open the datepicker on autofocus and plus how to open the date picker when we click anywhere on the input field.

Thanks