title: Why is this JQuery date picker not loading for the first ng-click?
body: <p>I have a JQuery UI date picker being loaded through ng-click using the following code:</p>
  
  <p><strong>Input:</strong></p>
  
  <pre><code>&lt;input type="text" id="datepicker" autocomplete="off" ng-model="selectedDate" 
  ng-click="showDatepicker()" placeholder="(Click to select date)"&gt;
  </code></pre>
  
  <p><strong>JS:</strong></p>
  
  <pre><code>$scope.showDatepicker = function() {
      console.log('clicked');
  
      // Load datepicker
      $("#datepicker").datepicker();
    }
  </code></pre>
  
  <p>However the date picker is not displaying on the first click, only on the second. How can I fix this so that it displays on the first click of the input?</p>
  
  <hr>
  
  <p><strong>Fiddle:</strong>
  <a href="https://jsfiddle.net/Lt7aP/5556/" rel="nofollow noreferrer">https://jsfiddle.net/Lt7aP/5556/</a></p>