JsFiddle Examples

List of fiddles / gists

Useful fiddles and gists collected from AngularJS forum discussions. Please edit and add!

Information about version changes can be found in the Changelog: https://github.com/angular/angular.js/blob/master/CHANGELOG.md

Version 1.0.0-rc8

• parent / sub component example where sub components using a common controller function; or "reference by id" example (John Lindquist): http://jsfiddle.net/johnlindquist/YYD8a/
• recursive ng-include demo (Brendan Owen): http://jsfiddle.net/brendanowen/uXbn6/8/

Version 1.0.0-rc7

• Jasmine unit tests (John Lindquist): http://jsfiddle.net/johnlindquist/d63Y3/
• Modal dialog directive with Angular and jQuery (Andy Joslin): http://jsfiddle.net/uBPyE/
• tabbed pane component (John Lindquist): http://jsfiddle.net/johnlindquist/QPbCS/
• dynamically change between horizontal and vertical layout: http://jsfiddle.net/cfulnecky/NRUxs/

Version 1.0.0-rc6

• Markdown editor demo (Igor): http://jsfiddle.net/IgorMinar/CHVbb/442/

Version 1.0.0-rc5

• A very cool animation directive in AngularJS: http://jsfiddle.net/mhevery/eFHU3/96/
• Demonstration of firebase with angular: http://plunker.no.de/SSKLrj/
• Display "Loading" title for XHR requests (zdam): http://jsfiddle.net/zdam/dBR2r/ , google groups trhead: https://groups.google.com/d/msg/angular/-/R11P6dLFFowJ
• Slightly modified version zdam's Loading fiddle, which displays a loading title instead of alerts (Andras): http://jsfiddle.net/dBR2r/8/
• Paging/Pagination http://jsfiddle.net/8WUrR/

Version 1.0.0-rc4

• jQuery UI Layout component directive with state attribute (B Letocha, I Minar) - http://jsfiddle.net/IgorMinar/jfn5z/3/
• Twitter Bootstrap popover directive (Johan) - http://jsfiddle.net/UYjkK/28/
• Dynamically adding and initializing a controller (ItsLeeOven) - jsfiddle.net/ItsLeeOwen/LHxKB/
• jQuery UI Autocomplete directive (Carles, Vojta Jina) - http://jsfiddle.net/vojtajina/JSkjP/12/

Version 1.0.0-rc3

• jQuery UI Accordion directive (Carles) - http://jsfiddle.net/carpasse/RST62/

Version 1.0.0-rc2

• Directive inside repeater(Boris Letocha) - http://jsfiddle.net/Bobris/A82EV/14/
• jQuery UI Layout component directive (Boris Letocha, Vojta Jina) - http://jsfiddle.net/wu3j3/5/
• recursive directive (Igor Minar) - http://jsfiddle.net/IgorMinar/CHVbb/423/ , google groups thread: https://groups.google.com/d/msg/angular/-/trhDNd13w9gJ
• Jasmine Test in JSFiddle: http://jsfiddle.net/p4mBY/28/

Version 1.0.0-rc1

• Game of Life demo (Thierry) - http://jsfiddle.net/tchatel/H2y5r/
• Last Tweets demo (Thierry): http://jsfiddle.net/tchatel/4FNeB/
• jQueryUI drag-n-drop (Daniel Zen) http://jsfiddle.net/IgorMinar/NyJcd/11/
• jQuery DataTables plugin (zdam) http://jsfiddle.net/zdam/pb9ba/ , http://jsfiddle.net/zdam/7kLFU/ , http://jsfiddle.net/zdam/pb9ba/
• Uniqueness validation form: http://jsfiddle.net/mhevery/xX9aS/4/
• Jasmine Test in JSFiddle , D.Zen, http://jsfiddle.net/FgZ5B/
• paging DataTable, pure angular (Dalci de Jesus Bagolin): http://jsfiddle.net/dalcib/J3fjc/

Version 0.10.7

• Service-based lightweight jquery-ui wrapper (0.10.7, Adam) - http://jsfiddle.net/zdam/vGjXH/
• Repeater with inline templates and custom scope (0.10.7, Eric Jain, I Minar) - http://jsfiddle.net/KAFCK/3/
• Nested includes with inline templates (0.10.7, Stephanne Bisson) - http://stephanebisson.github.com/layout/#/view2 LiveDemo: http://stephanebisson.github.com/layout/ Updated for 1.0rc7 http://jsfiddle.net/cfulnecky/NRUxs/
• Inline template inside repeater (0.10.7, Vojta Jina) - http://jsfiddle.net/vojtajina/2Gqwg/
• Notify service (press 3 times!) (0.10.7, Vojta Jina) - http://jsfiddle.net/vojtajina/UCWMr/3/
• Twitter bootstrap modal dialog widget (0.10.7, Igor Minar) - http://jsfiddle.net/IgorMinar/mVSPC/
• Forms - Some basic inputs (0.10.7, Vojta Jina) - http://jsfiddle.net/cambiata/SbZ9K/
• Forms - Password validation (0.10.7, Vojta Jina) - http://jsfiddle.net/cambiata/CLyTc
• Forms - Selects (0.10.7, Vojta Jina) - http://jsfiddle.net/cambiata/5wa2M
• Forms - Radio inputs (0.10.7, Vojta Jina) - http://jsfiddle.net/cambiata/ezzHD
• Forms - Custom radio group (0.10.7, Vojta Jina) - http://jsfiddle.net/cambiata/gp7vM

Version 0.10.6

• Google map widget (0.10.6, Matthias Andrasch & Vojta Jina) - http://jsfiddle.net/vojtajina/3bpJk/25/
• Scope in ng:repeater (0.10.6, D. Zen, Robert Damphousse) - http://jsfiddle.net/robertjd/bNT56/25/
• Editor with static and dynamic fields (0.10.6, Vojta Jina) - http://jsfiddle.net/vojtajina/3juSX/
• Chained dropdown selections (0.10.6, Vojta Jina) - http://jsfiddle.net/vojtajina/KkdfV/18/
• Sortable table widget (0.10.6, Söderlind) - http://jsfiddle.net/dandoyon/4UCrW/5/ 1.0rc1 http://jsfiddle.net/dalcib/J3fjc/
• Sortable table widget a.k.a. data grid (Dalci Bagolin) - http://jsfiddle.net/dalcib/2w6Su/
• Watch array parameter (deep watch) (0.10.6, Vojta Jina) - http://jsfiddle.net/vojtajina/eQGXA/3/
• Widget inside repeat ($eval) (0.10.6, Ali Mills) - http://jsfiddle.net/alimills/FXgsL/1/
• Shopping Cart example (0.10.6, Vojta Jina) - http://jsfiddle.net/vojtajina/CSsrJ/4/
• Using mock service with JSFiddle (0.10.6, angular-mocks-0.10.6.js, Vojta Jina) - http://jsfiddle.net/vojtajina/DQHdk/ - See http://docs-next.angularjs.org/api/angular.module.ngMockE2E.$httpBackend
• using tooltipsy (0.10.6, Vojta Jina) - http://jsfiddle.net/vojtajina/z7a58/15/ (thread: https://groups.google.com/d/msg/angular/-/fSRw1fBO9QUJ)

Version 0.10.5

• Sortable list drag-n-drop (0.10.5, Igor minar) - http://jsfiddle.net/xnnjQ/6/
• Inline template using $cache (0.10.5, Vojta Jina) - http://jsfiddle.net/vojtajina/ENf5r/
• Repeater default values (0.10.5, Igor Minar) - http://jsfiddle.net/IgorMinar/Mv8zL/4/
• Filter items (0.10.5, Vojta Jina) - http://jsfiddle.net/vojtajina/EGKQU/

Version 0.10.4

• Sortable table (0.10.4, Dan Doyon) - http://jsfiddle.net/dandoyon/js64b/
• ng:repeat with key and value (0.10.4, Mårten Dolk & Vojta Jina) - http://jsfiddle.net/vojtajina/EHdQ7/4/
• Repeater and $parent scope (0.10.4, Misko Heverey) - http://jsfiddle.net/ezhrw/2/
• After render callback (0.10.4, Elliot Sprehn) - http://jsfiddle.net/8YmbC/1/

Version 0.9.19 and older

• Angular widgets (0.9.17, jquery-ui-1.8.14, Łukasz Twarogowski) - http://twarogowski.github.com/angular-contrib/docs/widgets.html
  • autocomplete
  • datepicker
  • emblem
  • map
  • progress
  • enter
  • button
  • toggle
  • seclectable
  • masked
• TODO example from angularjs.org (0.9.18) - http://jsfiddle.net/IgorMinar/M8YnR/
• Invoice example from angularjs.org (0.9.16) - http://jsfiddle.net/vojtajina/pfqKY/
• Nested repeaters (0.9.18) - http://jsfiddle.net/vojtajina/u75us/
• jQuery Cycle plugin wrapper (0.9.18) - http://jsfiddle.net/vojtajina/creEk/
• jQuery Carousel plugin wrapper (0.9.17) - http://jsfiddle.net/vojtajina/3Gx42/
• jQuery Raty plugin wrapper (0.9.17) - http://jsfiddle.net/vojtajina/yy9VA/
• Injecting custom service into another custom service (0.9.19) - http://jsfiddle.net/vojtajina/4xu5g/
• How to set page title from included partial (0.9.?) - https://gist.github.com/1022724
• Accessing a scope from outside (0.9.16) - http://jsfiddle.net/vojtajina/ngZ6u/
• Trivial tabs (0.9.19) - http://jsfiddle.net/vojtajina/vM4FY/
• AngularJS + Jasmine (0.9.19) http://jsfiddle.net/vojtajina/TCHXy/
• Password example from angularjs.org (0.9.19) - http://jsfiddle.net/vojtajina/76E4S/
• Inter-controller service communication (0.9.19, Cambiata) - http://jsfiddle.net/cambiata/NXhTz/
• Repeater and $parent scope (0.9.19, Vojta Jina) - http://jsfiddle.net/vojtajina/5AMPm/
• Repeater and $parent scope, using controller prototype (0.9.19, Vojta Jina) - http://jsfiddle.net/vojtajina/5AMPm/1/
• Mouseenter directive (0.9.19, Misko Heverey) - http://jsfiddle.net/upPdx/1/
• Custom text excerpt filter (0.9.19, A Suller) - http://jsfiddle.net/xMYpy/