jquery ui - Getting Angular UI to work

Question

I've just installed Angular UI and I'm having trouble to make it work. Here are the stepts I followed:

index.html (Angular v1.0.1, AngularUI v0.2.1)

<script src="scripts/vendor/angular.js"></script>
<script src="scripts/vendor/jquery-1.7.2.js"></script>
<script src="scripts/vendor/jquery-ui-1.8.18.js"></script>
<script src="scripts/vendor/bootstrap.js"></script>
<script src="scripts/vendor/angular-ui.js"></script>

app.js

var publicApp = angular.module('publicApp', ['ngResource', 'ui'])

my html

<input name="dateField" class="datepicker" value="Click Here for Datepicker" ui-date>

And I get this error:

TypeError: Object [[object HTMLInputElement]] has no method 'datepicker'

Using the JS console in chrome this works:

$('.datepicker').datepicker()

What am I doing wrong?

Answer 1

If I'm not mistaken you need to include jQuery before AngularJS / angular-ui files. Here is the jsFiddle with the angular-ui date picker working: http://jsfiddle.net/pkozlowski_opensource/aGpNf/6/