jQuery UI passthrough official example: ui is not defined

I copied the jQuery passthrough example from here http://angular-ui.github.com to this fiddle http://jsfiddle.net/ilyaD/Xe48t/3/ and it is not working. I am getting ui is not defined

this is the JS:

angular.module('ui.config', []).value('ui.config', {
   // The ui-jq directive namespace
   jq: {
      // The Tooltip namespace
      tooltip: {
         // Tooltip options. This object will be used as the defaults
         placement: 'right'
      }
   }
});

what did I miss?

UPADTE:

I added ui to angular.module('ui.config', ['ui']).value('ui.config', { but still not working http://jsfiddle.net/Xe48t/9/

Actually, you're not supposed to declare the value on the ui.config module. You declare it on your own app and it will take precedence:

angular.module('myApp', ['ui']).value('ui.config', {
  jq: {
    // whatever
  }
});

Note that this is defined on myApp

It also helps if you:

  • run your JS in the right place (head)
  • have AngularJS initialize properly (using ng-app)
  • and load the bootstrap lib and css

http://jsfiddle.net/Xe48t/12/

Make sure you're including the AngularUI javascript file, and then you want to use the string "ui".

angular.module('ui.config', ['ui'])

You missed the ui dependency:

angular.module('ui.config', ['ui']).value('ui.config', {

http://jsfiddle.net/Xe48t/4/