title: jQuery datepicker with AngularJS: "TypeError: element.datePicker is not a function"
body: <p>I'm trying to use jQuery datepicker in my AngularJS app, but I get the following error message:</p>
  
  <pre><code>jQuery datepicker with AngularJS: "TypeError: element.datePicker is not a function"
  </code></pre>
  
  <p>I'm using the code from this answer:
  <a href="https://stackoverflow.com/questions/18144142/jquery-ui-datepicker-with-angularjs">jQuery ui datepicker with Angularjs</a></p>
  
  <p>Here's a working fiddle from that same answer:
  <a href="http://jsfiddle.net/kevinj/TAeNF/2/" rel="nofollow noreferrer">http://jsfiddle.net/kevinj/TAeNF/2/</a></p>
  
  <p>This is the complete code I'm using:</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
      &lt;script src="/js/angular.min.js"&gt;&lt;/script&gt;
      &lt;script src="/lib/jquery/jquery-1.12.0.min.js"&gt;&lt;/script&gt;
      &lt;script src="/lib/jquery/jquery-ui-1.11.4.min.js"&gt;&lt;/script&gt;
      &lt;link rel="stylesheet" type="text/css" href="/lib/jquery/jquery-ui-1.11.4.min.css"&gt;
  &lt;/head&gt;
  
  &lt;body ng-app="app"&gt;
  
  &lt;script&gt;
  var datePicker = angular.module('app', []);
  
  datePicker.directive('jqdatepicker', function () {
      return {
          restrict: 'A',
          require: 'ngModel',
           link: function (scope, element, attrs, ngModelCtrl) {
              element.datePicker({
                  dateFormat: 'DD, d  MM, yy',
                  onSelect: function (date) {
                      scope.date = date;
                      scope.$apply();
                  }
              });
          }
      };
  });
  &lt;/script&gt;
  
  &lt;p&gt;&lt;input type="text" ng-model="date" jqdatepicker&gt;&lt;/p&gt;
  &lt;p&gt;{{ date }}&lt;/p&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>What on earth am I doing wrong? Thank you!</p>