title: Why can this AngularJS directive on jsFiddle not find jQuery-UI?
body: <p>I am trying to get an AngularJS directive that uses jQuery-UI to work in jsfiddle. </p>
  
  <ul>
  <li>jQuery-UI works fine when used directly</li>
  <li>AngularJS works</li>
  <li>but the directive reports: "element.datepicker is not a function"</li>
  </ul>
  
  <p><strong>What do I need to do to get jQuery-UI to work inside the directive in jsFiddle?</strong></p>
  
  <p><a href="http://jsfiddle.net/edwardtanguay/oqo2xv3e/1" rel="nofollow">http://jsfiddle.net/edwardtanguay/oqo2xv3e/1</a></p>
  
  <p>HTML</p>
  
  <pre><code>&lt;div ng-app="mainApp"&gt;
      &lt;div ng-controller="mainController"&gt;
          &lt;div&gt;{{message}}&lt;/div&gt;
          &lt;input id="normal" type="text" /&gt;
          &lt;input id="startDate" type="text" ng-model="date" jqdatepicker /&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>JavaScript</p>
  
  <pre><code>angular.module('mainApp', [])
  .controller('mainController', function($scope) {
      $scope.message = 'test111';
      $('#normal').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();
                  }
              });
          }
      };
  });
  </code></pre>