javascript - ng-focus or ng-click is not working in Angular as expected -

i have text input field , datepicker embedded in it. problem when focus or click on input field

the date picker not showed.

but if put debugger , debug in console , shows when input field gets focused or clicked.

   <div class="row">                 <input id="field" placeholder="choose date" class="span-12" ng-model="vm.date" ng-blur="vm.onsavetime()" ng-focus="vm.showdatepicker()">    </div> 

here code

vm.showdatepicker = function(){     debugger;     var options = {         format:"yyyy-mm-dd"     };     $('#field').datepicker(options); } 

the date picker not show when page loads , if don't debug in console or if not click other fields in panel , after click on .

why ?

it might you

<div id="wrapper" ng-app="myapp"> <p>{{datepicker || "00/00/0000"}}</p> <input type="text" ng-model="datepicker" datepicker /> </div>  var myapp = angular.module('myapp', []);  myapp.directive("datepicker", function () { return { restrict: "a", require: "ngmodel", link: function (scope, elem, attrs, ngmodelctrl) {   var updatemodel = function (datetext) {     scope.$apply(function () {       ngmodelctrl.$setviewvalue(datetext);     });   };   var options = {     dateformat: "dd/mm/yy",     onselect: function (datetext) {       updatemodel(datetext);     }   };   elem.datepicker(options); } } }); 

https://codepen.io/anon/pen/bwewvp