From 50b7654f5eed3f90702da6f06a04729af7a5ad2c Mon Sep 17 00:00:00 2001
From: Franz Torghele <ftorghele@eurofunk.com>
Date: Wed, 14 Oct 2015 12:06:34 +0200
Subject: [PATCH] feat(timepicker): Added ability to handle empty model

---
 CHANGELOG.md                                  |  202 +++
 CONTRIBUTING.md                               |    2 +
 Gruntfile.js                                  |   13 +-
 README.md                                     |   11 +
 karma.conf.js                                 |    1 +
 misc/demo/assets/app.js                       |   14 +-
 misc/demo/index.html                          |   29 +-
 package.json                                  |    7 +-
 src/accordion/accordion.js                    |  176 ++-
 src/accordion/docs/demo.html                  |   57 +-
 src/accordion/docs/readme.md                  |   44 +-
 src/accordion/test/accordion.spec.js          |  275 +++-
 src/alert/alert.js                            |   61 +-
 src/alert/docs/demo.html                      |    9 +-
 src/alert/docs/readme.md                      |   21 +-
 src/alert/test/alert.spec.js                  |   64 +-
 src/alert/test/dismissOnTimeout.spec.js       |   20 -
 src/bindHtml/bindHtml.js                      |   15 -
 src/buttons/buttons.js                        |  159 +-
 src/buttons/docs/demo.html                    |   22 +-
 src/buttons/docs/readme.md                    |    2 +-
 src/buttons/test/buttons.spec.js              |  143 +-
 src/carousel/carousel.js                      |  156 +-
 src/carousel/docs/README.md                   |    8 +-
 src/carousel/docs/demo.html                   |    8 +-
 src/carousel/test/carousel.spec.js            |  154 +-
 src/collapse/collapse.js                      |  126 +-
 src/collapse/docs/demo.html                   |    6 +-
 src/collapse/docs/readme.md                   |   10 +-
 src/collapse/test/collapse.spec.js            |   67 +-
 src/dateparser/dateparser.js                  |  207 +--
 src/dateparser/test/dateparser.spec.js        |   56 +-
 src/datepicker/datepicker.js                  | 1352 +++++++++++------
 src/datepicker/docs/demo.html                 |   12 +-
 src/datepicker/docs/demo.js                   |    5 +
 src/datepicker/docs/readme.md                 |   10 +-
 src/datepicker/test/datepicker.spec.js        |  302 ++--
 src/dropdown/docs/demo.html                   |   38 +-
 src/dropdown/docs/readme.md                   |    8 +-
 src/dropdown/dropdown.js                      |  400 ++++-
 src/dropdown/test/dropdown.spec.js            |  133 +-
 src/modal/docs/demo.js                        |    6 +-
 src/modal/docs/readme.md                      |    9 +-
 src/modal/modal.js                            |  556 +++++--
 src/modal/test/modal.spec.js                  |  386 ++++-
 src/modal/test/modalWindow.spec.js            |   15 +-
 src/modal/test/multiMap.spec.js               |   58 +
 src/pagination/docs/demo.html                 |   14 +-
 src/pagination/docs/readme.md                 |   10 +-
 src/pagination/pagination.js                  |  243 ++-
 src/pagination/test/pager.spec.js             |   84 +-
 src/pagination/test/pagination.spec.js        |   82 +-
 src/popover/docs/demo.html                    |   20 +-
 src/popover/docs/readme.md                    |   19 +-
 src/popover/popover.js                        |  103 +-
 src/popover/test/popover-html.spec.js         |   90 +-
 src/popover/test/popover-template.spec.js     |   73 +-
 src/popover/test/popover.spec.js              |   84 +-
 src/position/position.js                      |   16 +-
 src/position/test/position.spec.js            |   64 +-
 src/progressbar/docs/demo.html                |   14 +-
 src/progressbar/docs/readme.md                |   11 +-
 src/progressbar/progressbar.js                |  160 +-
 src/progressbar/test/progressbar.spec.js      |  159 +-
 src/rating/docs/demo.html                     |    6 +-
 src/rating/docs/readme.md                     |    2 +-
 src/rating/rating.js                          |   57 +-
 src/rating/test/rating.spec.js                |   89 +-
 src/stackedMap/stackedMap.js                  |   54 +
 .../test/stackedMap.spec.js                   |    3 +-
 src/tabs/docs/demo.html                       |   36 +-
 src/tabs/docs/readme.md                       |    6 +-
 src/tabs/tabs.js                              |  265 +++-
 src/tabs/test/tabs.spec.js                    |  340 +++--
 src/timepicker/docs/demo.html                 |    2 +-
 src/timepicker/docs/readme.md                 |    9 +-
 src/timepicker/test/timepicker.spec.js        |  141 +-
 src/timepicker/timepicker.js                  |  106 +-
 src/tooltip/docs/demo.html                    |   24 +-
 src/tooltip/docs/readme.md                    |   32 +-
 src/tooltip/test/tooltip-template.spec.js     |   84 +-
 src/tooltip/test/tooltip.spec.js              |  568 ++++---
 src/tooltip/test/tooltip2.spec.js             |  154 +-
 src/tooltip/tooltip.js                        |  601 +++++---
 src/transition/test/transition.spec.js        |  147 --
 src/transition/transition.js                  |   89 --
 src/typeahead/docs/demo.html                  |   60 +-
 src/typeahead/docs/readme.md                  |   11 +
 .../typeahead-highlight-ngsanitize.spec.js    |   16 +
 .../test/typeahead-highlight.spec.js          |   68 +-
 src/typeahead/test/typeahead-popup.spec.js    |   50 +-
 src/typeahead/test/typeahead.spec.js          |  246 ++-
 src/typeahead/typeahead.js                    |  660 +++++++-
 template/accordion/accordion-group.html       |    8 +-
 template/alert/alert.html                     |    2 +-
 template/carousel/carousel.html               |   22 +-
 template/datepicker/datepicker.html           |    6 +-
 template/datepicker/popup.html                |    4 +-
 template/datepicker/year.html                 |    2 +-
 template/modal/backdrop.html                  |    3 +-
 template/modal/window.html                    |    6 +-
 template/pagination/pager.html                |    6 +-
 template/popover/popover-html.html            |    5 +-
 template/popover/popover-template.html        |    7 +-
 template/popover/popover.html                 |    5 +-
 template/progressbar/bar.html                 |    2 +-
 template/progressbar/progress.html            |    2 +-
 template/progressbar/progressbar.html         |    2 +-
 template/rating/rating.html                   |    2 +-
 template/tabs/tab.html                        |    2 +-
 template/tabs/tabset.html                     |    2 +-
 template/timepicker/timepicker.html           |   14 +-
 template/tooltip/tooltip-html-popup.html      |    4 +-
 .../tooltip/tooltip-html-unsafe-popup.html    |    7 -
 template/tooltip/tooltip-popup.html           |    4 +-
 template/tooltip/tooltip-template-popup.html  |    6 +-
 template/typeahead/typeahead-match.html       |    2 +-
 template/typeahead/typeahead-popup.html       |    2 +-
 118 files changed, 8026 insertions(+), 2708 deletions(-)
 delete mode 100644 src/alert/test/dismissOnTimeout.spec.js
 delete mode 100644 src/bindHtml/bindHtml.js
 create mode 100644 src/modal/test/multiMap.spec.js
 create mode 100644 src/stackedMap/stackedMap.js
 rename src/{modal => stackedMap}/test/stackedMap.spec.js (99%)
 delete mode 100644 src/transition/test/transition.spec.js
 delete mode 100644 src/transition/transition.js
 create mode 100644 src/typeahead/test/typeahead-highlight-ngsanitize.spec.js
 delete mode 100644 template/tooltip/tooltip-html-unsafe-popup.html

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 8264620c4a..c1c6a7c635 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,3 +1,198 @@
+<a name="0.14.2"></a>
+## [0.14.2](https://github.com/angular-ui/bootstrap/compare/0.14.1...v0.14.2) (2015-10-14)
+
+
+### Bug Fixes
+
+* **progressbar:** fix percentage calculation ([feb689c](https://github.com/angular-ui/bootstrap/commit/feb689c)), closes [#4471](https://github.com/angular-ui/bootstrap/issues/4471) [#4588](https://github.com/angular-ui/bootstrap/issues/4588) [#4452](https://github.com/angular-ui/bootstrap/issues/4452)
+* **tooltip:** clean up stackedMap on scope destroy ([ebb5e18](https://github.com/angular-ui/bootstrap/commit/ebb5e18)), closes [#4610](https://github.com/angular-ui/bootstrap/issues/4610) [#4604](https://github.com/angular-ui/bootstrap/issues/4604)
+* **tooltip:** popup close delay not respected ([6daf871](https://github.com/angular-ui/bootstrap/commit/6daf871)), closes [#4597](https://github.com/angular-ui/bootstrap/issues/4597) [#4567](https://github.com/angular-ui/bootstrap/issues/4567)
+
+
+
+<a name="0.14.1"></a>
+## [0.14.1](https://github.com/angular-ui/bootstrap/compare/0.14.0...v0.14.1) (2015-10-11)
+
+
+### Bug Fixes
+
+* **accordion:** make deprecated controller work with 1.3.x ([c5e6042](https://github.com/angular-ui/bootstrap/commit/c5e6042)), closes [#4574](https://github.com/angular-ui/bootstrap/issues/4574)
+* **alert:** make deprecated controller work with 1.3.x ([e8c8ee6](https://github.com/angular-ui/bootstrap/commit/e8c8ee6)), closes [#4576](https://github.com/angular-ui/bootstrap/issues/4576)
+* **buttons:** make deprecated controller work with 1.3.x ([1e3cbd8](https://github.com/angular-ui/bootstrap/commit/1e3cbd8)), closes [#4577](https://github.com/angular-ui/bootstrap/issues/4577)
+* **carousel:** make deprecated controller work with 1.3.x ([f6c7931](https://github.com/angular-ui/bootstrap/commit/f6c7931)), closes [#4578](https://github.com/angular-ui/bootstrap/issues/4578)
+* **datepicker:** make deprecated controller work with 1.3.x ([18371ab](https://github.com/angular-ui/bootstrap/commit/18371ab)), closes [#4586](https://github.com/angular-ui/bootstrap/issues/4586)
+* **dropdown:** make deprecated controller work with 1.3.x ([ae1a87c](https://github.com/angular-ui/bootstrap/commit/ae1a87c)), closes [#4585](https://github.com/angular-ui/bootstrap/issues/4585)
+* **pagination:** make deprecated controller work with 1.3.x ([d50e8d2](https://github.com/angular-ui/bootstrap/commit/d50e8d2)), closes [#4580](https://github.com/angular-ui/bootstrap/issues/4580)
+* **progressbar:** make deprecated controller work with 1.3.x ([1c5e479](https://github.com/angular-ui/bootstrap/commit/1c5e479)), closes [#4581](https://github.com/angular-ui/bootstrap/issues/4581)
+* **rating:** make deprecated controller work with 1.3.x ([ce1114a](https://github.com/angular-ui/bootstrap/commit/ce1114a)), closes [#4582](https://github.com/angular-ui/bootstrap/issues/4582)
+* **tabs:** make deprecated controller work with 1.3.x ([685bd6a](https://github.com/angular-ui/bootstrap/commit/685bd6a)), closes [#4583](https://github.com/angular-ui/bootstrap/issues/4583)
+* **timepicker:** make deprecated controller work with 1.3.x ([00f60ee](https://github.com/angular-ui/bootstrap/commit/00f60ee)), closes [#4584](https://github.com/angular-ui/bootstrap/issues/4584)
+
+### Features
+
+* **timepicker:** add accessibility improvements ([4ebecbc](https://github.com/angular-ui/bootstrap/commit/4ebecbc)), closes [#4569](https://github.com/angular-ui/bootstrap/issues/4569) [#4573](https://github.com/angular-ui/bootstrap/issues/4573)
+
+
+
+<a name="0.14.0"></a>
+# [0.14.0](https://github.com/angular-ui/bootstrap/compare/0.13.4...0.14.0) (2015-10-09)
+
+
+### Bug Fixes
+
+* **accordion:** coerce to boolean ([b864aa9](https://github.com/angular-ui/bootstrap/commit/b864aa9)), closes [#4385](https://github.com/angular-ui/bootstrap/issues/4385)
+* **accordion:** re-expose AccordionController ([5382226](https://github.com/angular-ui/bootstrap/commit/5382226)), closes [#4524](https://github.com/angular-ui/bootstrap/issues/4524)
+* **alert:** properly pass $event as local ([eb2366f](https://github.com/angular-ui/bootstrap/commit/eb2366f)), closes [#4386](https://github.com/angular-ui/bootstrap/issues/4386) [#4387](https://github.com/angular-ui/bootstrap/issues/4387)
+* **alert:** re-expose AlertController ([f561aa9](https://github.com/angular-ui/bootstrap/commit/f561aa9)), closes [#4525](https://github.com/angular-ui/bootstrap/issues/4525)
+* **buttons:** re-expose ButtonsController ([c0dbf79](https://github.com/angular-ui/bootstrap/commit/c0dbf79)), closes [#4526](https://github.com/angular-ui/bootstrap/issues/4526)
+* **carousel:** fix reading of `noTransition` ([2e26815](https://github.com/angular-ui/bootstrap/commit/2e26815)), closes [#4325](https://github.com/angular-ui/bootstrap/issues/4325)
+* **carousel:** improve accessibility ([da71159](https://github.com/angular-ui/bootstrap/commit/da71159)), closes [#4478](https://github.com/angular-ui/bootstrap/issues/4478) [#4479](https://github.com/angular-ui/bootstrap/issues/4479)
+* **carousel:** re-enable deprecated directives ([30e8aa7](https://github.com/angular-ui/bootstrap/commit/30e8aa7)), closes [#4527](https://github.com/angular-ui/bootstrap/issues/4527)
+* **carousel:** reset $currentTransition when no slides ([0b3d5bd](https://github.com/angular-ui/bootstrap/commit/0b3d5bd)), closes [#4532](https://github.com/angular-ui/bootstrap/issues/4532) [#4390](https://github.com/angular-ui/bootstrap/issues/4390)
+* **datepicker:** add check for `contains` ([868c0e2](https://github.com/angular-ui/bootstrap/commit/868c0e2)), closes [#4423](https://github.com/angular-ui/bootstrap/issues/4423) [#4411](https://github.com/angular-ui/bootstrap/issues/4411)
+* **datepicker:** add custom class to year picker ([0ad7cb9](https://github.com/angular-ui/bootstrap/commit/0ad7cb9)), closes [#4558](https://github.com/angular-ui/bootstrap/issues/4558) [#4546](https://github.com/angular-ui/bootstrap/issues/4546)
+* **datepicker:** change to `$popup` ([65814f1](https://github.com/angular-ui/bootstrap/commit/65814f1))
+* **datepicker:** datepicker-popup nest in dropdown ([6b4267b](https://github.com/angular-ui/bootstrap/commit/6b4267b)), closes [#4489](https://github.com/angular-ui/bootstrap/issues/4489) [#4197](https://github.com/angular-ui/bootstrap/issues/4197)
+* **datepicker:** remove focus management on date selection by keyboard ([36ecf60](https://github.com/angular-ui/bootstrap/commit/36ecf60)), closes [#4409](https://github.com/angular-ui/bootstrap/issues/4409)
+* **dropdown:** ensure class is present in dropdown-menu ([92ab48e](https://github.com/angular-ui/bootstrap/commit/92ab48e)), closes [#4523](https://github.com/angular-ui/bootstrap/issues/4523) [#4442](https://github.com/angular-ui/bootstrap/issues/4442)
+* **dropdown:** restore deprecated directives ([e7c5879](https://github.com/angular-ui/bootstrap/commit/e7c5879)), closes [#4514](https://github.com/angular-ui/bootstrap/issues/4514)
+* **modal:** fix for conflicts with ngTouch module on mobile devices ([508aceb](https://github.com/angular-ui/bootstrap/commit/508aceb)), closes [#2280](https://github.com/angular-ui/bootstrap/issues/2280) [#4357](https://github.com/angular-ui/bootstrap/issues/4357)
+* **progressbar:** re-expose ProgressController ([5604e59](https://github.com/angular-ui/bootstrap/commit/5604e59)), closes [#4528](https://github.com/angular-ui/bootstrap/issues/4528)
+* **rating:** re-expose RatingController ([aede646](https://github.com/angular-ui/bootstrap/commit/aede646)), closes [#4529](https://github.com/angular-ui/bootstrap/issues/4529)
+* **tabs:** re-expose TabsetController ([435924f](https://github.com/angular-ui/bootstrap/commit/435924f)), closes [#4530](https://github.com/angular-ui/bootstrap/issues/4530)
+* **timepicker:** re-expose TimepickerController ([3aa9841](https://github.com/angular-ui/bootstrap/commit/3aa9841)), closes [#4531](https://github.com/angular-ui/bootstrap/issues/4531)
+* **tooltip:** add display block to style ([b413a22](https://github.com/angular-ui/bootstrap/commit/b413a22)), closes [#4363](https://github.com/angular-ui/bootstrap/issues/4363) [#4379](https://github.com/angular-ui/bootstrap/issues/4379)
+* **tooltip:** check for ttScope in $$postDigest ([01b9624](https://github.com/angular-ui/bootstrap/commit/01b9624)), closes [#4555](https://github.com/angular-ui/bootstrap/issues/4555) [#4552](https://github.com/angular-ui/bootstrap/issues/4552)
+* **tooltip:** correct flash of reposition ([8fee75d](https://github.com/angular-ui/bootstrap/commit/8fee75d)), closes [#4363](https://github.com/angular-ui/bootstrap/issues/4363) [#4195](https://github.com/angular-ui/bootstrap/issues/4195)
+* **tooltip:** do nothing if `$scope` doesn't exist ([1e039e8](https://github.com/angular-ui/bootstrap/commit/1e039e8)), closes [#4346](https://github.com/angular-ui/bootstrap/issues/4346) [#3347](https://github.com/angular-ui/bootstrap/issues/3347)
+* **tooltip:** fix binding to multiple triggers ([d6cda93](https://github.com/angular-ui/bootstrap/commit/d6cda93)), closes [#4371](https://github.com/angular-ui/bootstrap/issues/4371) [#4384](https://github.com/angular-ui/bootstrap/issues/4384)
+* **tooltip:** isOpen to work with expressions ([5f68280](https://github.com/angular-ui/bootstrap/commit/5f68280)), closes [#4380](https://github.com/angular-ui/bootstrap/issues/4380) [#4362](https://github.com/angular-ui/bootstrap/issues/4362)
+* **tooltip:** properly gc popupTimeout ([ff52f52](https://github.com/angular-ui/bootstrap/commit/ff52f52)), closes [#2786](https://github.com/angular-ui/bootstrap/issues/2786)
+* **tooltip:** set `visibility: hidden` to avoid flicker ([f7cb8bc](https://github.com/angular-ui/bootstrap/commit/f7cb8bc)), closes [#4342](https://github.com/angular-ui/bootstrap/issues/4342)
+
+### Features
+
+* **accordion:** use uib- prefix ([0328a76](https://github.com/angular-ui/bootstrap/commit/0328a76)), closes [#4389](https://github.com/angular-ui/bootstrap/issues/4389)
+* **accordion:** use uib- prefix ([298ec8c](https://github.com/angular-ui/bootstrap/commit/298ec8c)), closes [#4503](https://github.com/angular-ui/bootstrap/issues/4503)
+* **alert:** use uib- prefix ([5e3a87a](https://github.com/angular-ui/bootstrap/commit/5e3a87a)), closes [#4406](https://github.com/angular-ui/bootstrap/issues/4406)
+* **buttons:** use uib- prefix ([5a1c2c9](https://github.com/angular-ui/bootstrap/commit/5a1c2c9)), closes [#4445](https://github.com/angular-ui/bootstrap/issues/4445)
+* **carousel:** use uib- prefix ([2e5bfac](https://github.com/angular-ui/bootstrap/commit/2e5bfac)), closes [#4501](https://github.com/angular-ui/bootstrap/issues/4501)
+* **collapse:** convert to use `$animateCss` ([533a9f0](https://github.com/angular-ui/bootstrap/commit/533a9f0)), closes [#4257](https://github.com/angular-ui/bootstrap/issues/4257)
+* **collapse:** use uib- prefix ([9bdb32e](https://github.com/angular-ui/bootstrap/commit/9bdb32e)), closes [#4370](https://github.com/angular-ui/bootstrap/issues/4370)
+* **dateparser:** reset parsers when $locale.id changes ([d9a521a](https://github.com/angular-ui/bootstrap/commit/d9a521a)), closes [#4286](https://github.com/angular-ui/bootstrap/issues/4286) [#4425](https://github.com/angular-ui/bootstrap/issues/4425)
+* **dateparser:** use uib- prefix ([0fa851f](https://github.com/angular-ui/bootstrap/commit/0fa851f)), closes [#4504](https://github.com/angular-ui/bootstrap/issues/4504)
+* **datepicker:** add uib- prefix ([44354f6](https://github.com/angular-ui/bootstrap/commit/44354f6)), closes [#4509](https://github.com/angular-ui/bootstrap/issues/4509)
+* **dropdown:** uib- prefix ([5bc0851](https://github.com/angular-ui/bootstrap/commit/5bc0851)), closes [#4510](https://github.com/angular-ui/bootstrap/issues/4510)
+* **modal:** Added ability to add CSS class to top window ([bd38e8f](https://github.com/angular-ui/bootstrap/commit/bd38e8f)), closes [#2524](https://github.com/angular-ui/bootstrap/issues/2524)
+* **modal:** add uib- prefix ([8c7b9e4](https://github.com/angular-ui/bootstrap/commit/8c7b9e4)), closes [#4511](https://github.com/angular-ui/bootstrap/issues/4511)
+* **pagination:** add uib- prefix ([9aea856](https://github.com/angular-ui/bootstrap/commit/9aea856)), closes [#4536](https://github.com/angular-ui/bootstrap/issues/4536)
+* **position:** add uib- prefix ([6158091](https://github.com/angular-ui/bootstrap/commit/6158091)), closes [#4507](https://github.com/angular-ui/bootstrap/issues/4507)
+* **progressbar:** add `aria-labelledby` support ([e6f3b87](https://github.com/angular-ui/bootstrap/commit/e6f3b87)), closes [#4350](https://github.com/angular-ui/bootstrap/issues/4350) [#4347](https://github.com/angular-ui/bootstrap/issues/4347)
+* **rating:** add `aria-valuetext` attribute ([72de2d8](https://github.com/angular-ui/bootstrap/commit/72de2d8)), closes [#4349](https://github.com/angular-ui/bootstrap/issues/4349) [#4347](https://github.com/angular-ui/bootstrap/issues/4347)
+* **rating:** user uib- prefix ([377b4b7](https://github.com/angular-ui/bootstrap/commit/377b4b7)), closes [#4502](https://github.com/angular-ui/bootstrap/issues/4502)
+* **tabs:** use uib- prefix ([d25a8c2](https://github.com/angular-ui/bootstrap/commit/d25a8c2)), closes [#4449](https://github.com/angular-ui/bootstrap/issues/4449)
+* **timepicker:** use uib- prefix ([504e653](https://github.com/angular-ui/bootstrap/commit/504e653)), closes [#4505](https://github.com/angular-ui/bootstrap/issues/4505)
+* **tooltip:** add uib- prefix ([f8bc038](https://github.com/angular-ui/bootstrap/commit/f8bc038)), closes [#4515](https://github.com/angular-ui/bootstrap/issues/4515)
+* **tooltip:** allow custom closing delay ([5f7051b](https://github.com/angular-ui/bootstrap/commit/5f7051b)), closes [#3576](https://github.com/angular-ui/bootstrap/issues/3576)
+* **tooltip:** hide tooltip when `esc` is hit ([c08509a](https://github.com/angular-ui/bootstrap/commit/c08509a)), closes [#4367](https://github.com/angular-ui/bootstrap/issues/4367) [#4248](https://github.com/angular-ui/bootstrap/issues/4248)
+* **typeahead:** add `appendElementToId` ([fdf53e6](https://github.com/angular-ui/bootstrap/commit/fdf53e6)), closes [#4231](https://github.com/angular-ui/bootstrap/issues/4231) [#4497](https://github.com/angular-ui/bootstrap/issues/4497)
+* **typeahead:** add customClass support for dropdown ([fa1cdfc](https://github.com/angular-ui/bootstrap/commit/fa1cdfc)), closes [#4332](https://github.com/angular-ui/bootstrap/issues/4332) [#4410](https://github.com/angular-ui/bootstrap/issues/4410)
+* **typeahead:** add uib- prefix ([9e5e1a2](https://github.com/angular-ui/bootstrap/commit/9e5e1a2)), closes [#4542](https://github.com/angular-ui/bootstrap/issues/4542)
+
+### Reverts
+
+* **dropdown:** undo adding of `open` class on body ([6f9f1fc](https://github.com/angular-ui/bootstrap/commit/6f9f1fc))
+
+
+### BREAKING CHANGES
+
+* Removes focus on datepicker on selection of a date via keyboard for accessibility reasons
+
+
+<a name="0.13.4"></a>
+## [0.13.4](https://github.com/angular-ui/bootstrap/compare/0.13.3...0.13.4) (2015-09-03)
+
+
+### Bug Fixes
+
+* **accordion:** add custom open class support ([575eb85](https://github.com/angular-ui/bootstrap/commit/575eb85)), closes [#4198](https://github.com/angular-ui/bootstrap/issues/4198)
+* **datepicker:** ensure the original target is not in popup ([9b2f7ac](https://github.com/angular-ui/bootstrap/commit/9b2f7ac)), closes [#4316](https://github.com/angular-ui/bootstrap/issues/4316) [#4314](https://github.com/angular-ui/bootstrap/issues/4314)
+* **dropdown:** fix display when using with append-to-body ([bf63cef](https://github.com/angular-ui/bootstrap/commit/bf63cef)), closes [#4305](https://github.com/angular-ui/bootstrap/issues/4305) [#4240](https://github.com/angular-ui/bootstrap/issues/4240)
+* **dropdown:** fix up arrow nav support ([defcbbb](https://github.com/angular-ui/bootstrap/commit/defcbbb)), closes [#4330](https://github.com/angular-ui/bootstrap/issues/4330) [#4327](https://github.com/angular-ui/bootstrap/issues/4327)
+* **modal:** Wait for animation before focus. ([937a1f3](https://github.com/angular-ui/bootstrap/commit/937a1f3)), closes [#4300](https://github.com/angular-ui/bootstrap/issues/4300) [#4274](https://github.com/angular-ui/bootstrap/issues/4274)
+* **modal:** correctly remove custom class ([ba2ce24](https://github.com/angular-ui/bootstrap/commit/ba2ce24)), closes [#4175](https://github.com/angular-ui/bootstrap/issues/4175) [#4171](https://github.com/angular-ui/bootstrap/issues/4171)
+* **modal:** fix allowing promises to be resolved ([b1e98b1](https://github.com/angular-ui/bootstrap/commit/b1e98b1)), closes [#4310](https://github.com/angular-ui/bootstrap/issues/4310) [#4309](https://github.com/angular-ui/bootstrap/issues/4309)
+* **progress:** rename to avoid conflict ([07a938d](https://github.com/angular-ui/bootstrap/commit/07a938d)), closes [#4255](https://github.com/angular-ui/bootstrap/issues/4255)
+* **tabs:** ensure tab selection only occurs once ([7d3ba1e](https://github.com/angular-ui/bootstrap/commit/7d3ba1e)), closes [#3060](https://github.com/angular-ui/bootstrap/issues/3060) [#4230](https://github.com/angular-ui/bootstrap/issues/4230) [#2883](https://github.com/angular-ui/bootstrap/issues/2883)
+* **timepicker:** leave view alone if either input is invalid ([818f7e5](https://github.com/angular-ui/bootstrap/commit/818f7e5)), closes [#4160](https://github.com/angular-ui/bootstrap/issues/4160) [#3825](https://github.com/angular-ui/bootstrap/issues/3825)
+* **tooltip:** correctly position tooltip ([457f10c](https://github.com/angular-ui/bootstrap/commit/457f10c)), closes [#4311](https://github.com/angular-ui/bootstrap/issues/4311) [#4195](https://github.com/angular-ui/bootstrap/issues/4195)
+* **tooltip:** fix jshint error ([17cc39f](https://github.com/angular-ui/bootstrap/commit/17cc39f))
+* **tooltip:** properly gc timeout on toggle of disabled ([f8eab55](https://github.com/angular-ui/bootstrap/commit/f8eab55)), closes [#4210](https://github.com/angular-ui/bootstrap/issues/4210) [#4204](https://github.com/angular-ui/bootstrap/issues/4204)
+* **tooltip:** switch to use raw DOM event bindings ([7556bed](https://github.com/angular-ui/bootstrap/commit/7556bed)), closes [#4322](https://github.com/angular-ui/bootstrap/issues/4322) [#4060](https://github.com/angular-ui/bootstrap/issues/4060)
+* **typeahead:** add support for ngModelOptions getterSetter ([ccaa627](https://github.com/angular-ui/bootstrap/commit/ccaa627)), closes [#3865](https://github.com/angular-ui/bootstrap/issues/3865) [#3823](https://github.com/angular-ui/bootstrap/issues/3823)
+* **typeahead:** release references on destruction ([695db9d](https://github.com/angular-ui/bootstrap/commit/695db9d)), closes [#4299](https://github.com/angular-ui/bootstrap/issues/4299) [#4298](https://github.com/angular-ui/bootstrap/issues/4298)
+* **typeahead:** use ng-bind-html ([bb9fa1a](https://github.com/angular-ui/bootstrap/commit/bb9fa1a)), closes [#3463](https://github.com/angular-ui/bootstrap/issues/3463) [#4073](https://github.com/angular-ui/bootstrap/issues/4073)
+
+### Features
+
+* **accordion:** allow custom panel class ([5ee23a4](https://github.com/angular-ui/bootstrap/commit/5ee23a4)), closes [#4242](https://github.com/angular-ui/bootstrap/issues/4242) [#3968](https://github.com/angular-ui/bootstrap/issues/3968)
+* **accordion:** support spacebar to toggle group ([aa5a991](https://github.com/angular-ui/bootstrap/commit/aa5a991)), closes [#4319](https://github.com/angular-ui/bootstrap/issues/4319) [#4249](https://github.com/angular-ui/bootstrap/issues/4249)
+* **buttons:** allow toggling via spacebar when focused ([bdfb289](https://github.com/angular-ui/bootstrap/commit/bdfb289)), closes [#4252](https://github.com/angular-ui/bootstrap/issues/4252) [#4259](https://github.com/angular-ui/bootstrap/issues/4259)
+* **buttons:** hide nested inputs ([a06afe6](https://github.com/angular-ui/bootstrap/commit/a06afe6)), closes [#4282](https://github.com/angular-ui/bootstrap/issues/4282)
+* **carousel:** add model binding support to slide ([dac087e](https://github.com/angular-ui/bootstrap/commit/dac087e)), closes [#4202](https://github.com/angular-ui/bootstrap/issues/4202) [#4201](https://github.com/angular-ui/bootstrap/issues/4201)
+* **dateparser:** add support for the `h` format ([550fe20](https://github.com/angular-ui/bootstrap/commit/550fe20)), closes [#4220](https://github.com/angular-ui/bootstrap/issues/4220)
+* **datepicker:** disable today button if invalid ([71e0b8a](https://github.com/angular-ui/bootstrap/commit/71e0b8a)), closes [#4199](https://github.com/angular-ui/bootstrap/issues/4199) [#3988](https://github.com/angular-ui/bootstrap/issues/3988)
+* **modal:** complete modal open resolution in order ([1bba8b4](https://github.com/angular-ui/bootstrap/commit/1bba8b4)), closes [#2443](https://github.com/angular-ui/bootstrap/issues/2443) [#4302](https://github.com/angular-ui/bootstrap/issues/4302) [#2404](https://github.com/angular-ui/bootstrap/issues/2404)
+* **modal:** support multiple open classes ([3d01c59](https://github.com/angular-ui/bootstrap/commit/3d01c59)), closes [#4226](https://github.com/angular-ui/bootstrap/issues/4226) [#4184](https://github.com/angular-ui/bootstrap/issues/4184)
+* **pagination:** add `ngDisabled` support for the pager ([ba734b4](https://github.com/angular-ui/bootstrap/commit/ba734b4)), closes [#4217](https://github.com/angular-ui/bootstrap/issues/4217) [#2856](https://github.com/angular-ui/bootstrap/issues/2856)
+* **pagination:** add `templateUrl` support ([64b5289](https://github.com/angular-ui/bootstrap/commit/64b5289)), closes [#4162](https://github.com/angular-ui/bootstrap/issues/4162)
+* **tabs:** add support for `x-tab-heading` ([1abfd05](https://github.com/angular-ui/bootstrap/commit/1abfd05)), closes [#4166](https://github.com/angular-ui/bootstrap/issues/4166) [#1893](https://github.com/angular-ui/bootstrap/issues/1893)
+* **timepicker:** add `templateUrl` and `controllerAs` support ([639d511](https://github.com/angular-ui/bootstrap/commit/639d511)), closes [#4275](https://github.com/angular-ui/bootstrap/issues/4275) [#4284](https://github.com/angular-ui/bootstrap/issues/4284)
+* **tooltip:** expose isOpen property ([99b87cc](https://github.com/angular-ui/bootstrap/commit/99b87cc)), closes [#4179](https://github.com/angular-ui/bootstrap/issues/4179) [#2148](https://github.com/angular-ui/bootstrap/issues/2148) [#590](https://github.com/angular-ui/bootstrap/issues/590)
+* **typeahead:** add `typeaheadFocusOnSelect` ([b5ecda3](https://github.com/angular-ui/bootstrap/commit/b5ecda3)), closes [#4212](https://github.com/angular-ui/bootstrap/issues/4212) [#4211](https://github.com/angular-ui/bootstrap/issues/4211) [#4206](https://github.com/angular-ui/bootstrap/issues/4206)
+* **typeahead:** add custom popup template support ([4b02648](https://github.com/angular-ui/bootstrap/commit/4b02648)), closes [#4320](https://github.com/angular-ui/bootstrap/issues/4320) [#3774](https://github.com/angular-ui/bootstrap/issues/3774)
+
+
+### Breaking Changes
+
+* **buttons**
+  * hide nested `<input>` elements on `btn-radio` and `btn-checkbox` directives.
+
+  Fixes #3264
+  Closes #4282
+
+   ([a06afe6](https://github.com/angular-ui/bootstrap/commit/a06afe6))
+
+* **dropdown**
+  * when using `append-to-body`, both the `dropdown` and `open` classes are added to the `<body>` element.
+  * this differs from the existing behavior in that it will no longer toggle based on the existing `dropdown` directive element, but on the `body` element instead.
+
+  Fixes #4240
+  Closes #4305
+
+   ([bf63cef](https://github.com/angular-ui/bootstrap/commit/bf63cef))
+
+* **tooltip**
+  * Switch to use `addEventListener` and `removeEventListener` to prevent jqLite/jQuery bug where the events are swallowed on disabled elements
+  * this affects custom events, which must now be dispatched with `element[0].dispatchEvent(new Event('customEvent'))`, as opposed to `element.trigger('customEvent')`
+
+  Fixes #4060
+  Closes #4322
+
+   ([7556bed](https://github.com/angular-ui/bootstrap/commit/7556beda486f26b40fb860448316e8a32457e9e9))
+
+* **typeahead**
+  * for security reasons, only whitelisted HTML should be added.
+  * the typeahead match template now uses `ng-bind-html` instead of `bind-html-unsafe`.
+  * typeahead now uses the `$sce` service when `ngSanitize` is present and logs a warning if it is not.
+
+  Fixes #2884
+  Closes #3463
+  Closes #4073
+
+   ([bb9fa1a](https://github.com/angular-ui/bootstrap/commit/bb9fa1a))
+
+
 <a name"0.13.3"></a>
 ### 0.13.3 (2015-08-09)
 
@@ -65,6 +260,12 @@
 
 #### Breaking Changes
 
+* add `open` class to accordion group when expanded
+
+Closes #4152
+Closes #3419
+
+ ([ead15e37](https://github.com/angular-ui/bootstrap/commit/ead15e37))
 * Allow the user to hit `esc` inside an element in a modal and not exit the modal if the event has been `defaultPrevented`
 
 Closes #3551
@@ -503,6 +704,7 @@ Revert breaking change in **dropdown** ([1a998c4](http://github.com/angular-ui/b
 `min` attribute has been renamed to `min-date`
 `max` attribute has been renamed to `max-date`
 `Open on focus` has been removed. Read more on this ([comment](https://github.com/angular-ui/bootstrap/pull/1922#issuecomment-40491716)). 
+`dateFormat` renamed to `datepickerPopup` in datepickerPopupConfig
 
 - **dropdown:**
 
diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
index a515820f8a..3bbe2180d2 100644
--- a/CONTRIBUTING.md
+++ b/CONTRIBUTING.md
@@ -30,6 +30,8 @@ Unfortunately we are not able to investigate / fix bugs without a minimal reprod
 
 ## You want to contribute some code?
 
+**NOTE: We are migrating all our components to use a prefix, in the meantime you will see both the new and the old directives separated by a comment. If you want to contribute with code, make all your changes on top of that comment.** 
+
 We are always looking for the quality contributions and will be happy to accept your Pull Requests as long as those adhere to some basic rules:
 
 * Please make sure that your contribution fits well in the project's context:
diff --git a/Gruntfile.js b/Gruntfile.js
index b72e180676..a716b11b30 100644
--- a/Gruntfile.js
+++ b/Gruntfile.js
@@ -18,7 +18,7 @@ module.exports = function(grunt) {
   grunt.util.linefeed = '\n';
 
   grunt.initConfig({
-    ngversion: '1.4.3',
+    ngversion: '1.4.7',
     bsversion: '3.1.1',
     modules: [],//to be filled in by build task
     pkg: grunt.file.readJSON('package.json'),
@@ -157,10 +157,15 @@ module.exports = function(grunt) {
         reporters: ['progress', 'coverage']
       }
     },
-    changelog: {
+    conventionalChangelog: {
       options: {
-        dest: 'CHANGELOG.md',
+        changelogOpts: {
+          preset: 'angular'
+        },
         templateFile: 'misc/changelog.tpl.md'
+      },
+      release: {
+        src: 'CHANGELOG.md'
       }
     },
     shell: {
@@ -169,7 +174,7 @@ module.exports = function(grunt) {
       'release-prepare': [
         'grunt before-test after-test',
         'grunt version', //remove "-SNAPSHOT"
-        'grunt changelog'
+        'grunt conventionalChangelog'
       ],
       'release-complete': [
         'git commit CHANGELOG.md package.json -m "chore(release): v%version%"',
diff --git a/README.md b/README.md
index 9607c65f68..99a170a9dc 100644
--- a/README.md
+++ b/README.md
@@ -14,7 +14,9 @@
     - [Manual](#manual-download)
 - [Support](#support)
     - [FAQ](#faq)
+    - [PREFIX MIGRATION GUIDE](#prefix-migration-guide)
     - [Supported browsers](#supported-browsers)
+    - [Old Docs](#old-docs)
     - [Need help?](#need-help)
     - [Found a bug?](#found-a-bug)
 - [Contributing to the project](#contributing-to-the-project)
@@ -30,6 +32,8 @@ Do you want to see directives in action? Visit http://angular-ui.github.io/boots
 Installation is easy as UI Bootstrap has minimal dependencies - only the AngularJS and Twitter Bootstrap's CSS are required.
 Note: Since version 0.13.0, UI Bootstrap depends on [ngAnimate](https://docs.angularjs.org/api/ngAnimate) for transitions and animations, such as the accordion, carousel, etc. Include `ngAnimate` in the module dependencies for your app in order to enable animation.
 
+Additionally, it is srongly recommended that for UI Bootstrap 0.13.3 and higher you use Angular 1.3.18 or higher due to animation fixes.
+
 #### Install with NPM
 
 ```sh
@@ -84,6 +88,10 @@ angular.module('myModule', [uibs]);
 
 https://github.com/angular-ui/bootstrap/wiki/FAQ
 
+## PREFIX MIGRATION GUIDE
+
+If you're updating your application to use prefixes, please check the [migration guide](https://github.com/angular-ui/bootstrap/wiki/Migration-guide-for-prefixes).
+
 ## Supported browsers
 
 Directives from this repository are automatically tested with the following browsers:
@@ -95,6 +103,9 @@ Directives from this repository are automatically tested with the following brow
 
 Modern mobile browsers should work without problems.
 
+## Old Docs
+
+For the time being, we don't have versioned docs (we are open for a good PR to fix that). If you need to read the old doc, please check the [wiki](https://github.com/angular-ui/bootstrap/wiki/Reading-previous-version-docs).
 
 ## Need help?
 Need help using UI Bootstrap?
diff --git a/karma.conf.js b/karma.conf.js
index 1fda181b9f..c3da490397 100644
--- a/karma.conf.js
+++ b/karma.conf.js
@@ -18,6 +18,7 @@ module.exports = function(config) {
       'misc/test-lib/jquery-1.8.2.min.js',
       'node_modules/angular/angular.js',
       'node_modules/angular-mocks/angular-mocks.js',
+      'node_modules/angular-sanitize/angular-sanitize.js',
       'misc/test-lib/helpers.js',
       'src/**/*.js',
       'template/**/*.js'
diff --git a/misc/demo/assets/app.js b/misc/demo/assets/app.js
index af0c4a8ff1..4f624277fb 100644
--- a/misc/demo/assets/app.js
+++ b/misc/demo/assets/app.js
@@ -1,5 +1,5 @@
 /* global FastClick, smoothScroll */
-angular.module('ui.bootstrap.demo', ['ui.bootstrap', 'plunker', 'ngTouch', 'ngAnimate'], function($httpProvider){
+angular.module('ui.bootstrap.demo', ['ui.bootstrap', 'plunker', 'ngTouch', 'ngAnimate', 'ngSanitize'], function($httpProvider){
   FastClick.attach(document.body);
   delete $httpProvider.defaults.headers.common['X-Requested-With'];
 }).run(['$location', function($location){
@@ -20,7 +20,7 @@ angular.module('ui.bootstrap.demo', ['ui.bootstrap', 'plunker', 'ngTouch', 'ngAn
     get: function () {
       return $q.all({
         moduleMap: getModuleMap(),
-        rawFiles: getRawFiles(),
+        rawFiles: getRawFiles()
       });
     }
   };
@@ -46,9 +46,9 @@ angular.module('ui.bootstrap.demo', ['ui.bootstrap', 'plunker', 'ngTouch', 'ngAn
 .controller('SelectModulesCtrl', SelectModulesCtrl)
 .controller('DownloadCtrl', DownloadCtrl);
 
-function MainCtrl($scope, $http, $document, $modal, orderByFilter) {
+function MainCtrl($scope, $http, $document, $uibModal, orderByFilter) {
   $scope.showBuildModal = function() {
-    var modalInstance = $modal.open({
+    var modalInstance = $uibModal.open({
       templateUrl: 'buildModal.html',
       controller: 'SelectModulesCtrl',
       resolve: {
@@ -63,7 +63,7 @@ function MainCtrl($scope, $http, $document, $modal, orderByFilter) {
   };
 
   $scope.showDownloadModal = function() {
-    var modalInstance = $modal.open({
+    var modalInstance = $uibModal.open({
       templateUrl: 'downloadModal.html',
       controller: 'DownloadCtrl'
     });
@@ -285,7 +285,7 @@ var isOldBrowser;
      *   https://github.com/ssorallen/blob-feature-check/
      *   License: Public domain (http://unlicense.org)
      */
-    var url = window.webkitURL || window.URL; // Safari 6 uses "webkitURL".
+    var url = window.URL;
     var svg = new Blob(
         ['<svg xmlns=\'http://www.w3.org/2000/svg\'></svg>'],
         { type: 'image/svg+xml;charset=utf-8' }
@@ -306,4 +306,4 @@ var isOldBrowser;
           .attr('src', objectUrl);
     }
 
-  })();
\ No newline at end of file
+  })();
diff --git a/misc/demo/index.html b/misc/demo/index.html
index 9b5e683239..9da5bbd690 100644
--- a/misc/demo/index.html
+++ b/misc/demo/index.html
@@ -14,6 +14,7 @@
     <script src="//ajax.googleapis.com/ajax/libs/angularjs/<%= ngversion %>/angular.min.js"></script>
     <script src="//ajax.googleapis.com/ajax/libs/angularjs/<%= ngversion %>/angular-animate.min.js"></script>
     <script src="//ajax.googleapis.com/ajax/libs/angularjs/<%= ngversion %>/angular-touch.min.js"></script>
+    <script src="//ajax.googleapis.com/ajax/libs/angularjs/<%= ngversion %>/angular-sanitize.js"></script>
     <script src="ui-bootstrap-tpls-<%= pkg.version%>.min.js"></script>
     <script src="assets/plunker.js"></script>
     <script src="assets/app.js"></script>
@@ -40,8 +41,8 @@
                 <a href="#top" role="button" class="navbar-brand">
                     UI Bootstrap
                 </a>
-                <li class="dropdown" dropdown>
-                    <a role="button" class="dropdown-toggle" dropdown-toggle>
+                <li class="dropdown" uib-dropdown>
+                    <a role="button" class="dropdown-toggle" uib-dropdown-toggle>
                         Directives <b class="caret"></b>
                     </a>
                     <ul class="dropdown-menu">
@@ -51,7 +52,7 @@
                 <li><a href="#getting_started">Getting started</a></li>
             </ul>
         </nav>
-        <nav class="visible-xs" collapse="!isCollapsed">
+        <nav class="visible-xs" uib-collapse="!isCollapsed">
             <ul class="nav navbar-nav">
                 <li><a href="#getting_started" ng-click="isCollapsed = !isCollapsed">Getting started</a></li>
                 <li><a href="#directives_small" ng-click="isCollapsed = !isCollapsed">Directives</a></li>
@@ -201,18 +202,18 @@ <h1><%= module.displayName %><small>
                                 <div class="pull-right">
                                     <button type="button" class="btn btn-info plunk-btn" ng-click="edit('<%= ngversion%>', '<%= bsversion %>', '<%= pkg.version%>', '<%= module.name %>')"><i class="glyphicon glyphicon-edit"></i> Edit in plunker</button>
                                 </div>
-                                <tabset>
-                                    <tab heading="Markup">
+                                <uib-tabset>
+                                    <uib-tab heading="Markup">
                                         <div plunker-content="markup">
                                             <pre ng-non-bindable><code data-language="html"><%- module.docs.html %></code></pre>
                                         </div>
-                                    </tab>
-                                    <tab heading="JavaScript">
+                                    </uib-tab>
+                                    <uib-tab heading="JavaScript">
                                         <div plunker-content="javascript">
                                             <pre ng-non-bindable><code data-language="javascript"><%- module.docs.js %></code></pre>
                                         </div>
-                                    </tab>
-                                </tabset>
+                                    </uib-tab>
+                                </uib-tabset>
                             </div>
                         </div>
                     </section>
@@ -241,8 +242,8 @@ <h1><%= module.displayName %><small>
             <label class="col-sm-3 control-label"><strong>Build</strong></label>
             <div class="col-sm-9">
               <span class="btn-group">
-                <button type="button" class="btn btn-default" ng-model="options.minified" btn-radio="true">Minified</button>
-                <button type="button" class="btn btn-default" ng-model="options.minified" btn-radio="false">Uncompressed</button>
+                <button type="button" class="btn btn-default" ng-model="options.minified" uib-btn-radio="true">Minified</button>
+                <button type="button" class="btn btn-default" ng-model="options.minified" uib-btn-radio="false">Uncompressed</button>
               </span>
               <small class="help-block">Use <b>Minified</b> version in your deployed application. <b>Uncompressed</b> source code is useful only for debugging and development purpose.</small>
             </div>
@@ -251,8 +252,8 @@ <h1><%= module.displayName %><small>
             <label class="col-sm-3 control-label"><strong>Include Templates</strong></label>
             <div class="col-sm-9">
               <span class="btn-group">
-                <button type="button" class="btn btn-default" ng-model="options.tpls" btn-radio="true">Yes</button>
-                <button type="button" class="btn btn-default" ng-model="options.tpls" btn-radio="false">No</button>
+                <button type="button" class="btn btn-default" ng-model="options.tpls" uib-btn-radio="true">Yes</button>
+                <button type="button" class="btn btn-default" ng-model="options.tpls" uib-btn-radio="false">No</button>
               </span>
               <small class="help-block">Whether you want to include the <i>default templates</i>, bundled with most of the directives. These templates are based on Bootstrap's markup and CSS.</small>
             </div>
@@ -298,7 +299,7 @@ <h4 style="text-align: center;">{{buildErrorText}}</h4>
                style="width: 33%; border-radius: 0;"
                ng-class="{'btn-primary': module.<%= module.name %>}"
                ng-model="module.<%= module.name %>"
-               btn-checkbox
+               uib-btn-checkbox
                ng-change="selectedChanged('<%= module.name %>', module.<%= module.name %>)">
                   <%= module.displayName %>
               </button>
diff --git a/package.json b/package.json
index bf8aa92bec..1f75c0cab7 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "author": "https://github.com/angular-ui/bootstrap/graphs/contributors",
   "name": "angular-ui-bootstrap",
-  "version": "0.13.4-SNAPSHOT",
+  "version": "0.14.3-SNAPSHOT",
   "homepage": "http://angular-ui.github.io/bootstrap/",
   "dependencies": {},
   "scripts":{
@@ -12,8 +12,9 @@
     "url": "https://github.com/angular-ui/bootstrap.git"
   },
   "devDependencies": {
-    "angular": "^1.4.3",
-    "angular-mocks": "^1.4.3",
+    "angular": "^1.4.4",
+    "angular-mocks": "^1.4.4",
+    "angular-sanitize": "^1.4.4",
     "grunt": "^0.4.5",
     "grunt-contrib-concat": "^0.5.1",
     "grunt-contrib-copy": "^0.8.0",
diff --git a/src/accordion/accordion.js b/src/accordion/accordion.js
index cb5c0b858d..93a71eeb45 100644
--- a/src/accordion/accordion.js
+++ b/src/accordion/accordion.js
@@ -1,17 +1,17 @@
 angular.module('ui.bootstrap.accordion', ['ui.bootstrap.collapse'])
 
-.constant('accordionConfig', {
+.constant('uibAccordionConfig', {
   closeOthers: true
 })
 
-.controller('AccordionController', ['$scope', '$attrs', 'accordionConfig', function($scope, $attrs, accordionConfig) {
-
+.controller('UibAccordionController', ['$scope', '$attrs', 'uibAccordionConfig', function($scope, $attrs, accordionConfig) {
   // This array keeps track of the accordion groups
   this.groups = [];
 
   // Ensure that all the groups in this accordion are closed, unless close-others explicitly says not to
   this.closeOthers = function(openGroup) {
-    var closeOthers = angular.isDefined($attrs.closeOthers) ? $scope.$eval($attrs.closeOthers) : accordionConfig.closeOthers;
+    var closeOthers = angular.isDefined($attrs.closeOthers) ?
+      $scope.$eval($attrs.closeOthers) : accordionConfig.closeOthers;
     if (closeOthers) {
       angular.forEach(this.groups, function(group) {
         if (group !== openGroup) {
@@ -34,7 +34,7 @@ angular.module('ui.bootstrap.accordion', ['ui.bootstrap.collapse'])
   // This is called from the accordion-group directive when to remove itself
   this.removeGroup = function(group) {
     var index = this.groups.indexOf(group);
-    if ( index !== -1 ) {
+    if (index !== -1) {
       this.groups.splice(index, 1);
     }
   };
@@ -43,13 +43,11 @@ angular.module('ui.bootstrap.accordion', ['ui.bootstrap.collapse'])
 
 // The accordion directive simply sets up the directive controller
 // and adds an accordion CSS class to itself element.
-.directive('accordion', function() {
+.directive('uibAccordion', function() {
   return {
-    restrict: 'EA',
-    controller: 'AccordionController',
+    controller: 'UibAccordionController',
     controllerAs: 'accordion',
     transclude: true,
-    replace: false,
     templateUrl: function(element, attrs) {
       return attrs.templateUrl || 'template/accordion/accordion.html';
     }
@@ -57,11 +55,10 @@ angular.module('ui.bootstrap.accordion', ['ui.bootstrap.collapse'])
 })
 
 // The accordion-group directive indicates a block of html that will expand and collapse in an accordion
-.directive('accordionGroup', function() {
+.directive('uibAccordionGroup', function() {
   return {
-    require:'^accordion',         // We need this directive to be inside an accordion
-    restrict:'EA',
-    transclude:true,              // It transcludes the contents of the directive into the template
+    require: '^uibAccordion',         // We need this directive to be inside an accordion
+    transclude: true,              // It transcludes the contents of the directive into the template
     replace: true,                // The element containing the directive will be replaced with the template
     templateUrl: function(element, attrs) {
       return attrs.templateUrl || 'template/accordion/accordion-group.html';
@@ -79,15 +76,20 @@ angular.module('ui.bootstrap.accordion', ['ui.bootstrap.collapse'])
     link: function(scope, element, attrs, accordionCtrl) {
       accordionCtrl.addGroup(scope);
 
+      scope.openClass = attrs.openClass || 'panel-open';
+      scope.panelClass = attrs.panelClass;
       scope.$watch('isOpen', function(value) {
+        element.toggleClass(scope.openClass, !!value);
         if (value) {
           accordionCtrl.closeOthers(scope);
         }
       });
 
-      scope.toggleOpen = function() {
+      scope.toggleOpen = function($event) {
         if (!scope.isDisabled) {
-          scope.isOpen = !scope.isOpen;
+          if (!$event || $event.which === 32) {
+            scope.isOpen = !scope.isOpen;
+          }
         }
       };
     }
@@ -95,17 +97,13 @@ angular.module('ui.bootstrap.accordion', ['ui.bootstrap.collapse'])
 })
 
 // Use accordion-heading below an accordion-group to provide a heading containing HTML
-// <accordion-group>
-//   <accordion-heading>Heading containing HTML - <img src="..."></accordion-heading>
-// </accordion-group>
-.directive('accordionHeading', function() {
+.directive('uibAccordionHeading', function() {
   return {
-    restrict: 'EA',
     transclude: true,   // Grab the contents to be used as the heading
     template: '',       // In effect remove this element!
     replace: true,
-    require: '^accordionGroup',
-    link: function(scope, element, attr, accordionGroupCtrl, transclude) {
+    require: '^uibAccordionGroup',
+    link: function(scope, element, attrs, accordionGroupCtrl, transclude) {
       // Pass the heading to the accordion-group controller
       // so that it can be transcluded into the right place in the template
       // [The second parameter to transclude causes the elements to be cloned so that they work in ng-repeat]
@@ -116,15 +114,12 @@ angular.module('ui.bootstrap.accordion', ['ui.bootstrap.collapse'])
 
 // Use in the accordion-group template to indicate where you want the heading to be transcluded
 // You must provide the property on the accordion-group controller that will hold the transcluded element
-// <div class="accordion-group">
-//   <div class="accordion-heading" ><a ... accordion-transclude="heading">...</a></div>
-//   ...
-// </div>
-.directive('accordionTransclude', function() {
+.directive('uibAccordionTransclude', function() {
   return {
-    require: '^accordionGroup',
-    link: function(scope, element, attr, controller) {
-      scope.$watch(function() { return controller[attr.accordionTransclude]; }, function(heading) {
+    require: ['?^uibAccordionGroup', '?^accordionGroup'],
+    link: function(scope, element, attrs, controller) {
+      controller = controller[0] ? controller[0] : controller[1]; // Delete after we remove deprecation
+      scope.$watch(function() { return controller[attrs.uibAccordionTransclude]; }, function(heading) {
         if (heading) {
           element.find('span').html('');
           element.find('span').append(heading);
@@ -132,6 +127,123 @@ angular.module('ui.bootstrap.accordion', ['ui.bootstrap.collapse'])
       });
     }
   };
-})
+});
+
+/* Deprecated accordion below */
+
+angular.module('ui.bootstrap.accordion')
+
+  .value('$accordionSuppressWarning', false)
+
+  .controller('AccordionController', ['$scope', '$attrs', '$controller', '$log', '$accordionSuppressWarning', function($scope, $attrs, $controller, $log, $accordionSuppressWarning) {
+    if (!$accordionSuppressWarning) {
+      $log.warn('AccordionController is now deprecated. Use UibAccordionController instead.');
+    }
+
+    angular.extend(this, $controller('UibAccordionController', {
+      $scope: $scope,
+      $attrs: $attrs
+    }));
+  }])
+
+  .directive('accordion', ['$log', '$accordionSuppressWarning', function($log, $accordionSuppressWarning) {
+    return {
+      restrict: 'EA',
+      controller: 'AccordionController',
+      controllerAs: 'accordion',
+      transclude: true,
+      replace: false,
+      templateUrl: function(element, attrs) {
+        return attrs.templateUrl || 'template/accordion/accordion.html';
+      },
+      link: function() {
+        if (!$accordionSuppressWarning) {
+          $log.warn('accordion is now deprecated. Use uib-accordion instead.');
+        }
+      }
+    };
+  }])
+
+  .directive('accordionGroup', ['$log', '$accordionSuppressWarning', function($log, $accordionSuppressWarning) {
+    return {
+      require: '^accordion',         // We need this directive to be inside an accordion
+      restrict: 'EA',
+      transclude: true,              // It transcludes the contents of the directive into the template
+      replace: true,                // The element containing the directive will be replaced with the template
+      templateUrl: function(element, attrs) {
+        return attrs.templateUrl || 'template/accordion/accordion-group.html';
+      },
+      scope: {
+        heading: '@',               // Interpolate the heading attribute onto this scope
+        isOpen: '=?',
+        isDisabled: '=?'
+      },
+      controller: function() {
+        this.setHeading = function(element) {
+          this.heading = element;
+        };
+      },
+      link: function(scope, element, attrs, accordionCtrl) {
+        if (!$accordionSuppressWarning) {
+          $log.warn('accordion-group is now deprecated. Use uib-accordion-group instead.');
+        }
+
+        accordionCtrl.addGroup(scope);
+
+        scope.openClass = attrs.openClass || 'panel-open';
+        scope.panelClass = attrs.panelClass;
+        scope.$watch('isOpen', function(value) {
+          element.toggleClass(scope.openClass, !!value);
+          if (value) {
+            accordionCtrl.closeOthers(scope);
+          }
+        });
+
+        scope.toggleOpen = function($event) {
+          if (!scope.isDisabled) {
+            if (!$event || $event.which === 32) {
+              scope.isOpen = !scope.isOpen;
+            }
+          }
+        };
+      }
+    };
+  }])
+
+  .directive('accordionHeading', ['$log', '$accordionSuppressWarning', function($log, $accordionSuppressWarning) {
+    return {
+      restrict: 'EA',
+      transclude: true,   // Grab the contents to be used as the heading
+      template: '',       // In effect remove this element!
+      replace: true,
+      require: '^accordionGroup',
+      link: function(scope, element, attr, accordionGroupCtrl, transclude) {
+        if (!$accordionSuppressWarning) {
+          $log.warn('accordion-heading is now deprecated. Use uib-accordion-heading instead.');
+        }
+        // Pass the heading to the accordion-group controller
+        // so that it can be transcluded into the right place in the template
+        // [The second parameter to transclude causes the elements to be cloned so that they work in ng-repeat]
+        accordionGroupCtrl.setHeading(transclude(scope, angular.noop));
+      }
+    };
+  }])
+
+  .directive('accordionTransclude', ['$log', '$accordionSuppressWarning', function($log, $accordionSuppressWarning) {
+    return {
+      require: '^accordionGroup',
+      link: function(scope, element, attr, controller) {
+        if (!$accordionSuppressWarning) {
+          $log.warn('accordion-transclude is now deprecated. Use uib-accordion-transclude instead.');
+        }
+
+        scope.$watch(function() { return controller[attr.accordionTransclude]; }, function(heading) {
+          if (heading) {
+            element.find('span').html('');
+            element.find('span').append(heading);
+          }
+        });
+      }
+    };
+  }]);
 
-;
diff --git a/src/accordion/docs/demo.html b/src/accordion/docs/demo.html
index 5613c5242e..d72479e813 100644
--- a/src/accordion/docs/demo.html
+++ b/src/accordion/docs/demo.html
@@ -1,4 +1,18 @@
 <div ng-controller="AccordionDemoCtrl">
+  <script type="text/ng-template" id="group-template.html">
+    <div class="panel {{panelClass || 'panel-default'}}">
+      <div class="panel-heading">
+        <h4 class="panel-title" style="color:#fa39c3">
+          <a href tabindex="0" class="accordion-toggle" ng-click="toggleOpen()" uib-accordion-transclude="heading"><span
+            ng-class="{'text-muted': isDisabled}">{{heading}}</span></a>
+        </h4>
+      </div>
+      <div class="panel-collapse collapse" uib-collapse="!isOpen">
+        <div class="panel-body" style="text-align: right" ng-transclude></div>
+      </div>
+    </div>
+  </script>
+
   <p>
     <button type="button" class="btn btn-default btn-sm" ng-click="status.open = !status.open">Toggle last panel</button>
     <button type="button" class="btn btn-default btn-sm" ng-click="status.isFirstDisabled = ! status.isFirstDisabled">Enable / Disable first panel</button>
@@ -10,23 +24,30 @@
       Open only one at a time
     </label>
   </div>
-  <accordion close-others="oneAtATime">
-    <accordion-group heading="Static Header, initially expanded" is-open="status.isFirstOpen" is-disabled="status.isFirstDisabled">
+  <uib-accordion close-others="oneAtATime">
+    <uib-accordion-group heading="Static Header, initially expanded" is-open="status.isFirstOpen" is-disabled="status.isFirstDisabled">
       This content is straight in the template.
-    </accordion-group>
-    <accordion-group heading="{{group.title}}" ng-repeat="group in groups">
+    </uib-accordion-group>
+    <uib-accordion-group heading="{{group.title}}" ng-repeat="group in groups">
       {{group.content}}
-    </accordion-group>
-    <accordion-group heading="Dynamic Body Content">
-      <p>The body of the accordion group grows to fit the contents</p>
-        <button type="button" class="btn btn-default btn-sm" ng-click="addItem()">Add Item</button>
-        <div ng-repeat="item in items">{{item}}</div>
-    </accordion-group>
-    <accordion-group is-open="status.open">
-        <accordion-heading>
-            I can have markup, too! <i class="pull-right glyphicon" ng-class="{'glyphicon-chevron-down': status.open, 'glyphicon-chevron-right': !status.open}"></i>
-        </accordion-heading>
-        This is just some content to illustrate fancy headings.
-    </accordion-group>
-  </accordion>
-</div>
\ No newline at end of file
+    </uib-accordion-group>
+    <uib-accordion-group heading="Dynamic Body Content">
+      <p>The body of the uib-accordion group grows to fit the contents</p>
+      <button type="button" class="btn btn-default btn-sm" ng-click="addItem()">Add Item</button>
+      <div ng-repeat="item in items">{{item}}</div>
+    </uib-accordion-group>
+    <uib-accordion-group heading="Custom template" template-url="group-template.html">
+      Hello
+    </uib-accordion-group>
+    <uib-accordion-group heading="Delete account" panel-class="panel-danger">
+      <p>Please, to delete your account, click the button below</p>
+      <button class="btn btn-danger">Delete</button>
+    </uib-accordion-group>
+    <uib-accordion-group is-open="status.open">
+      <uib-accordion-heading>
+        I can have markup, too! <i class="pull-right glyphicon" ng-class="{'glyphicon-chevron-down': status.open, 'glyphicon-chevron-right': !status.open}"></i>
+      </uib-accordion-heading>
+      This is just some content to illustrate fancy headings.
+    </uib-accordion-group>
+  </uib-accordion>
+</div>
diff --git a/src/accordion/docs/readme.md b/src/accordion/docs/readme.md
index 7a186cb020..46e4fd2802 100644
--- a/src/accordion/docs/readme.md
+++ b/src/accordion/docs/readme.md
@@ -1,17 +1,41 @@
 The **accordion directive** builds on top of the collapse directive to provide a list of items, with collapsible bodies that are collapsed or expanded by clicking on the item's header.
 
-We can control whether expanding an item will cause the other items to close, using the `close-others` attribute on accordion.
+The body of each accordion group is transcluded into the body of the collapsible element.
 
-The body of each accordion group is transcluded in to the body of the collapsible element.
+### uib-accordion Settings
 
-### Accordion Settings ###
+* `close-others`
+  _(Default: `false`)_ -
+  Control whether expanding an item will cause the other items to close.
+  
+* `template-url`
+  _(Default: `template/accordion/accordion.html`)_ -
+  Add the ability to override the template used on the component.
 
-  * `is-open` <i class="glyphicon glyphicon-eye-open"></i> (Defaults: false) :
-    Whether accordion group is open or closed.
-  * `template-url` (Defaults: `template/accordion/accordion.html`) :
-    Add ability to override the template url used
+### uib-accordion Group Settings
 
-### Accordion Group Settings ###
+* `is-disabled`
+  <i class="glyphicon glyphicon-eye-open"></i>
+  _(Default: `false`)_ -
+   Whether the accordion group is disabled or not.
 
-  * `template-url` (Defaults: `template/accordion/accordion-group.html`) :
-    Add ability to override the template url used. Note that this must be a string
+* `is-open`
+  <i class="glyphicon glyphicon-eye-open"></i>
+  _(Default: `false`)_ -
+  Whether accordion group is open or closed.
+
+* `heading`
+  _(Default: `none`)_ -
+  The clickable text on the group's header. You need one to be able to click on the header for toggling.
+
+* `panel-class` 
+  _(Default: `panel-default`)_ -
+  Add ability to use Bootstrap's contextual panel classes (panel-primary, panel-success, panel-info, etc...) or your own.  This must be a string.
+
+* `template-url`
+  _(Default: `template/accordion/accordion-group.html`)_ -
+  Add the ability to override the template used on the component.
+
+### Accordion heading
+
+Instead of the `heading` attribute on the `uib-accordion-group`, you can use an `uib-accordion-heading` element inside a group that will be used as the group's header.
diff --git a/src/accordion/test/accordion.spec.js b/src/accordion/test/accordion.spec.js
index b3fcd94a52..f7b669b279 100644
--- a/src/accordion/test/accordion.spec.js
+++ b/src/accordion/test/accordion.spec.js
@@ -1,21 +1,21 @@
-describe('accordion', function() {
-  var $scope;
+describe('uib-accordion', function() {
+  var $animate, $scope;
 
   beforeEach(module('ui.bootstrap.accordion'));
-  beforeEach(module('ui.bootstrap.collapse'));
+  beforeEach(module('ngAnimateMock'));
   beforeEach(module('template/accordion/accordion.html'));
   beforeEach(module('template/accordion/accordion-group.html'));
 
-  beforeEach(inject(function($rootScope) {
+  beforeEach(inject(function(_$animate_, $rootScope) {
+    $animate = _$animate_;
     $scope = $rootScope;
   }));
 
   describe('controller', function () {
-
     var ctrl, $element, $attrs;
     beforeEach(inject(function($controller) {
-      $attrs = {}; $element = {};
-      ctrl = $controller('AccordionController', { $scope: $scope, $element: $element, $attrs: $attrs });
+      $attrs = {};
+      ctrl = $controller('UibAccordionController', { $scope: $scope, $attrs: $attrs });
     }));
 
     describe('addGroup', function() {
@@ -62,13 +62,13 @@ describe('accordion', function() {
 
       describe('setting accordionConfig', function() {
         var originalCloseOthers;
-        beforeEach(inject(function(accordionConfig) {
-          originalCloseOthers = accordionConfig.closeOthers;
-          accordionConfig.closeOthers = false;
+        beforeEach(inject(function(uibAccordionConfig) {
+          originalCloseOthers = uibAccordionConfig.closeOthers;
+          uibAccordionConfig.closeOthers = false;
         }));
-        afterEach(inject(function(accordionConfig) {
+        afterEach(inject(function(uibAccordionConfig) {
           // return it to the original value
-          accordionConfig.closeOthers = originalCloseOthers;
+          uibAccordionConfig.closeOthers = originalCloseOthers;
         }));
 
         it('should not close other panels if accordionConfig.closeOthers is false', function() {
@@ -99,10 +99,20 @@ describe('accordion', function() {
         ctrl.removeGroup({});
         expect(ctrl.groups.length).toBe(2);
       });
+      it('should remove a panel when the scope is destroyed', function() {
+        var group1, group2, group3;
+        ctrl.addGroup(group1 = $scope.$new());
+        ctrl.addGroup(group2 = $scope.$new());
+        ctrl.addGroup(group3 = $scope.$new());
+        group2.$destroy();
+        expect(ctrl.groups.length).toBe(2);
+        expect(ctrl.groups[0]).toBe(group1);
+        expect(ctrl.groups[1]).toBe(group3);
+      });
     });
   });
 
-  describe('accordion', function() {
+  describe('uib-accordion', function() {
     var scope, $compile, $templateCache, element;
 
     beforeEach(inject(function($rootScope, _$compile_, _$templateCache_) {
@@ -114,10 +124,10 @@ describe('accordion', function() {
     it('should expose the controller on the view', function() {
       $templateCache.put('template/accordion/accordion.html', '<div>{{accordion.text}}</div>');
 
-      element = $compile('<accordion></accordion>')(scope);
+      element = $compile('<uib-accordion></uib-accordion>')(scope);
       scope.$digest();
 
-      var ctrl = element.controller('accordion');
+      var ctrl = element.controller('uibAccordion');
       expect(ctrl).toBeDefined();
 
       ctrl.text = 'foo';
@@ -135,7 +145,7 @@ describe('accordion', function() {
     });
   });
 
-  describe('accordion-group', function() {
+  describe('uib-accordion-group', function() {
 
     var scope, $compile;
     var element, groups;
@@ -151,17 +161,13 @@ describe('accordion', function() {
       $compile = _$compile_;
     }));
 
-    afterEach(function () {
-      element = groups = scope = $compile = undefined;
-    });
-
     it('should allow custom templates', inject(function($templateCache) {
       $templateCache.put('foo/bar.html', '<div>baz</div>');
 
       var tpl =
-        '<accordion>' +
-          '<accordion-group heading="title 1" template-url="foo/bar.html"></accordion-group>' +
-        '</accordion>';
+        '<uib-accordion>' +
+          '<uib-accordion-group heading="title 1" template-url="foo/bar.html"></uib-accordion-group>' +
+        '</uib-accordion>';
 
       element = $compile(tpl)(scope);
       scope.$digest();
@@ -171,10 +177,10 @@ describe('accordion', function() {
     describe('with static panels', function() {
       beforeEach(function() {
         var tpl =
-              '<accordion>' +
-              '<accordion-group heading="title 1">Content 1</accordion-group>' +
-              '<accordion-group heading="title 2">Content 2</accordion-group>' +
-              '</accordion>';
+              '<uib-accordion>' +
+                '<uib-accordion-group heading="title 1">Content 1</uib-accordion-group>' +
+                '<uib-accordion-group heading="title 2">Content 2</uib-accordion-group>' +
+              '</uib-accordion>';
         element = angular.element(tpl);
         $compile(element)(scope);
         scope.$digest();
@@ -212,7 +218,7 @@ describe('accordion', function() {
         expect(findGroupBody(0).scope().isOpen).toBe(false);
       });
 
-      it('should add "open" when opened', function() {
+      it('should add, by default, "panel-open" when opened', function() {
         var group = groups.eq(0);
         findGroupLink(0).click();
         scope.$digest();
@@ -222,15 +228,69 @@ describe('accordion', function() {
         scope.$digest();
         expect(group).not.toHaveClass('panel-open');
       });
+
+      it('should toggle element on spacebar when focused', function() {
+        var group = groups.eq(0);
+        findGroupLink(0)[0].focus();
+        var e = $.Event('keypress');
+        e.which = 32;
+        findGroupLink(0).trigger(e);
+
+        expect(group).toHaveClass('panel-open');
+
+        e = $.Event('keypress');
+        e.which = 32;
+        findGroupLink(0).trigger(e);
+
+        expect(group).not.toHaveClass('panel-open');
+      });
+
+      it('should not toggle with any other keyCode', function() {
+        var group = groups.eq(0);
+        findGroupLink(0)[0].focus();
+        var e = $.Event('keypress');
+        e.which = 65;
+        findGroupLink(0).trigger(e);
+
+        expect(group).not.toHaveClass('panel-open');
+      });
+    });
+
+    describe('with open-class attribute', function() {
+      beforeEach(function() {
+        var tpl =
+              '<uib-accordion>' +
+                '<uib-accordion-group heading="title 1" open-class="custom-open-class">Content 1</uib-accordion-group>' +
+                '<uib-accordion-group heading="title 2" open-class="custom-open-class">Content 2</uib-accordion-group>' +
+              '</uib-accordion>';
+        element = angular.element(tpl);
+        $compile(element)(scope);
+        scope.$digest();
+        groups = element.find('.panel');
+      });
+      afterEach(function() {
+        element.remove();
+      });
+
+      it('should add custom-open-class when opened', function() {
+        var group = groups.eq(0);
+        findGroupLink(0).click();
+        scope.$digest();
+        expect(group).toHaveClass('custom-open-class');
+
+        findGroupLink(0).click();
+        scope.$digest();
+        expect(group).not.toHaveClass('custom-open-class');
+      });
     });
 
     describe('with dynamic panels', function() {
       var model;
       beforeEach(function() {
         var tpl =
-          '<accordion>' +
-            '<accordion-group ng-repeat="group in groups" heading="{{group.name}}">{{group.content}}</accordion-group>' +
-          '</accordion>';
+          '<uib-accordion>' +
+            '<uib-accordion-group ng-repeat="group in groups" heading="{{group.name}}">{{group.content}}</uib-accordion-group>' +
+          '</uib-accordion>';
         element = angular.element(tpl);
         model = [
           {name: 'title 1', content: 'Content 1'},
@@ -273,10 +333,10 @@ describe('accordion', function() {
     describe('is-open attribute', function() {
       beforeEach(function() {
         var tpl =
-          '<accordion>' +
-            '<accordion-group heading="title 1" is-open="open.first">Content 1</accordion-group>' +
-            '<accordion-group heading="title 2" is-open="open.second">Content 2</accordion-group>' +
-          '</accordion>';
+          '<uib-accordion>' +
+            '<uib-accordion-group heading="title 1" is-open="open.first">Content 1</uib-accordion-group>' +
+            '<uib-accordion-group heading="title 2" is-open="open.second">Content 2</uib-accordion-group>' +
+          '</uib-accordion>';
         element = angular.element(tpl);
         scope.open = { first: false, second: true };
         $compile(element)(scope);
@@ -303,10 +363,10 @@ describe('accordion', function() {
     describe('is-open attribute with dynamic content', function() {
       beforeEach(function() {
         var tpl =
-              '<accordion>' +
-              '<accordion-group heading="title 1" is-open="open1"><div ng-repeat="item in items">{{item}}</div></accordion-group>' +
-              '<accordion-group heading="title 2" is-open="open2">Static content</accordion-group>' +
-              '</accordion>';
+              '<uib-accordion>' +
+                '<uib-accordion-group heading="title 1" is-open="open1"><div ng-repeat="item in items">{{item}}</div></uib-accordion-group>' +
+                '<uib-accordion-group heading="title 2" is-open="open2">Static content</uib-accordion-group>' +
+              '</uib-accordion>';
         element = angular.element(tpl);
         scope.items = ['Item 1', 'Item 2', 'Item 3'];
         scope.open1 = true;
@@ -314,6 +374,7 @@ describe('accordion', function() {
         angular.element(document.body).append(element);
         $compile(element)(scope);
         scope.$digest();
+        $animate.flush();
         groups = element.find('.panel');
       });
 
@@ -330,9 +391,9 @@ describe('accordion', function() {
     describe('is-open attribute with dynamic groups', function() {
       beforeEach(function() {
         var tpl =
-          '<accordion>' +
-            '<accordion-group ng-repeat="group in groups" heading="{{group.name}}" is-open="group.open">{{group.content}}</accordion-group>' +
-          '</accordion>';
+          '<uib-accordion>' +
+            '<uib-accordion-group ng-repeat="group in groups" heading="{{group.name}}" is-open="group.open">{{group.content}}</uib-accordion-group>' +
+          '</uib-accordion>';
         element = angular.element(tpl);
         scope.groups = [
           {name: 'title 1', content: 'Content 1', open: false},
@@ -366,9 +427,9 @@ describe('accordion', function() {
       var groupBody;
       beforeEach(function() {
         var tpl =
-              '<accordion>' +
-              '<accordion-group heading="title 1" is-disabled="disabled">Content 1</accordion-group>' +
-              '</accordion>';
+              '<uib-accordion>' +
+                '<uib-accordion-group heading="title 1" is-disabled="disabled">Content 1</uib-accordion-group>' +
+              '</uib-accordion>';
         element = angular.element(tpl);
         scope.disabled = true;
         $compile(element)(scope);
@@ -402,15 +463,15 @@ describe('accordion', function() {
       });
     });
 
-    // This is re-used in both the accordion-heading element and the accordion-heading attribute tests
+    // This is re-used in both the uib-accordion-heading element and the uib-accordion-heading attribute tests
     function isDisabledStyleCheck() {
         var tpl =
-          '<accordion ng-init="a = [1,2,3]">' +
-            '<accordion-group heading="I get overridden" is-disabled="true">' +
-              '<accordion-heading>Heading Element <span ng-repeat="x in a">{{x}}</span> </accordion-heading>' +
+          '<uib-accordion ng-init="a = [1,2,3]">' +
+            '<uib-accordion-group heading="I get overridden" is-disabled="true">' +
+              '<uib-accordion-heading>Heading Element <span ng-repeat="x in a">{{x}}</span> </uib-accordion-heading>' +
               'Body' +
-            '</accordion-group>' +
-          '</accordion>';
+            '</uib-accordion-group>' +
+          '</uib-accordion>';
         scope.disabled = true;
         element = $compile(tpl)(scope);
         scope.$digest();
@@ -419,21 +480,21 @@ describe('accordion', function() {
         expect(findGroupLink(0).find('span').hasClass('text-muted')).toBe(true);
     }
 
-    describe('accordion-heading element', function() {
+    describe('uib-accordion-heading element', function() {
       beforeEach(function() {
         var tpl =
-          '<accordion ng-init="a = [1,2,3]">' +
-            '<accordion-group heading="I get overridden">' +
-              '<accordion-heading>Heading Element <span ng-repeat="x in a">{{x}}</span> </accordion-heading>' +
+          '<uib-accordion ng-init="a = [1,2,3]">' +
+            '<uib-accordion-group heading="I get overridden">' +
+              '<uib-accordion-heading>Heading Element <span ng-repeat="x in a">{{x}}</span> </uib-accordion-heading>' +
               'Body' +
-            '</accordion-group>' +
-          '</accordion>';
+            '</uib-accordion-group>' +
+          '</uib-accordion>';
         element = $compile(tpl)(scope);
         scope.$digest();
         groups = element.find('.panel');
       });
 
-      it('transcludes the <accordion-heading> content into the heading link', function() {
+      it('transcludes the <uib-accordion-heading> content into the heading link', function() {
         expect(findGroupLink(0).text()).toBe('Heading Element 123 ');
       });
 
@@ -449,21 +510,21 @@ describe('accordion', function() {
 
     });
 
-    describe('accordion-heading attribute', function() {
+    describe('uib-accordion-heading attribute', function() {
       beforeEach(function() {
         var tpl =
-          '<accordion ng-init="a = [1,2,3]">' +
-            '<accordion-group heading="I get overridden">' +
-              '<div accordion-heading>Heading Element <span ng-repeat="x in a">{{x}}</span> </div>' +
+          '<uib-accordion ng-init="a = [1,2,3]">' +
+            '<uib-accordion-group heading="I get overridden">' +
+              '<div uib-accordion-heading>Heading Element <span ng-repeat="x in a">{{x}}</span> </div>' +
               'Body' +
-            '</accordion-group>' +
-          '</accordion>';
+            '</uib-accordion-group>' +
+          '</uib-accordion>';
         element = $compile(tpl)(scope);
         scope.$digest();
         groups = element.find('.panel');
       });
 
-      it('transcludes the <accordion-heading> content into the heading link', function() {
+      it('transcludes the <uib-accordion-heading> content into the heading link', function() {
         expect(findGroupLink(0).text()).toBe('Heading Element 123 ');
       });
 
@@ -475,9 +536,9 @@ describe('accordion', function() {
 
     });
 
-    describe('accordion-heading, with repeating accordion-groups', function() {
-      it('should clone the accordion-heading for each group', function() {
-        element = $compile('<accordion><accordion-group ng-repeat="x in [1,2,3]"><accordion-heading>{{x}}</accordion-heading></accordion-group></accordion>')(scope);
+    describe('uib-accordion-heading, with repeating uib-accordion-groups', function() {
+      it('should clone the uib-accordion-heading for each group', function() {
+        element = $compile('<uib-accordion><uib-accordion-group ng-repeat="x in [1,2,3]"><uib-accordion-heading>{{x}}</uib-accordion-heading></uib-accordion-group></uib-accordion>')(scope);
         scope.$digest();
         groups = element.find('.panel');
         expect(groups.length).toBe(3);
@@ -487,10 +548,9 @@ describe('accordion', function() {
       });
     });
 
-
-    describe('accordion-heading attribute, with repeating accordion-groups', function() {
-      it('should clone the accordion-heading for each group', function() {
-        element = $compile('<accordion><accordion-group ng-repeat="x in [1,2,3]"><div accordion-heading>{{x}}</div></accordion-group></accordion>')(scope);
+    describe('uib-accordion-heading attribute, with repeating uib-accordion-groups', function() {
+      it('should clone the uib-accordion-heading for each group', function() {
+        element = $compile('<uib-accordion><uib-accordion-group ng-repeat="x in [1,2,3]"><div uib-accordion-heading>{{x}}</div></uib-accordion-group></uib-accordion>')(scope);
         scope.$digest();
         groups = element.find('.panel');
         expect(groups.length).toBe(3);
@@ -500,5 +560,76 @@ describe('accordion', function() {
       });
     });
 
+    describe('uib-accordion group panel class - #3968', function() {
+      it('should use the default value when panel class is falsy', function() {
+        element = $compile('<uib-accordion><uib-accordion-group heading="Heading">Content</uib-accordion-group></uib-accordion>')(scope);
+        scope.$digest();
+        groups = element.find('.panel');
+        expect(groups.eq(0)).toHaveClass('panel-default');
+
+        element = $compile('<uib-accordion><uib-accordion-group heading="Heading" panel-class="">Content</uib-accordion-group></uib-accordion>')(scope);
+        scope.$digest();
+        groups = element.find('.panel');
+        expect(groups.eq(0)).toHaveClass('panel-default');
+      });
+
+      it('should use the specified value when not falsy', function() {
+        element = $compile('<uib-accordion><uib-accordion-group heading="Heading" panel-class="custom-class">Content</uib-accordion-group></uib-accordion>')(scope);
+        scope.$digest();
+        groups = element.find('.panel');
+        expect(groups.eq(0)).toHaveClass('custom-class');
+        expect(groups.eq(0)).not.toHaveClass('panel-default');
+      });
+    });
+  });
+});
+
+/* Deprecation tests below */
+
+describe('accordion deprecation', function() {
+  beforeEach(module('ui.bootstrap.accordion'));
+  beforeEach(module('ngAnimateMock'));
+  beforeEach(module('template/accordion/accordion.html'));
+  beforeEach(module('template/accordion/accordion-group.html'));
+
+  it('should suppress warning', function() {
+    module(function($provide) {
+      $provide.value('$accordionSuppressWarning', true);
+    });
+
+    inject(function($compile, $log, $rootScope) {
+      spyOn($log, 'warn');
+
+      var element =
+        '<accordion ng-init="a = [1,2,3]">' +
+          '<accordion-group heading="I get overridden">' +
+            '<div accordion-heading>Heading Element <span ng-repeat="x in a">{{x}}</span> </div>' +
+            'Body' +
+          '</accordion-group>' +
+        '</accordion>';
+      element = $compile(element)($rootScope);
+      $rootScope.$digest();
+      expect($log.warn.calls.count()).toBe(0);
+    });
   });
+
+  it('should give warning by default', inject(function($compile, $log, $rootScope) {
+    spyOn($log, 'warn');
+
+    var element =
+      '<accordion ng-init="a = [1,2,3]">' +
+        '<accordion-group heading="I get overridden">' +
+          '<div accordion-heading>Heading Element <span ng-repeat="x in a">{{x}}</span> </div>' +
+          'Body' +
+        '</accordion-group>' +
+      '</accordion>';
+    element = $compile(element)($rootScope);
+    $rootScope.$digest();
+
+    expect($log.warn.calls.count()).toBe(4);
+    expect($log.warn.calls.argsFor(0)).toEqual(['AccordionController is now deprecated. Use UibAccordionController instead.']);
+    expect($log.warn.calls.argsFor(1)).toEqual(['accordion-heading is now deprecated. Use uib-accordion-heading instead.']);
+    expect($log.warn.calls.argsFor(2)).toEqual(['accordion-group is now deprecated. Use uib-accordion-group instead.']);
+    expect($log.warn.calls.argsFor(3)).toEqual(['accordion is now deprecated. Use uib-accordion instead.']);
+  }));
 });
diff --git a/src/alert/alert.js b/src/alert/alert.js
index 593215f4d9..e5ace4a081 100644
--- a/src/alert/alert.js
+++ b/src/alert/alert.js
@@ -1,14 +1,18 @@
 angular.module('ui.bootstrap.alert', [])
 
-.controller('AlertController', ['$scope', '$attrs', function($scope, $attrs) {
+.controller('UibAlertController', ['$scope', '$attrs', '$timeout', function($scope, $attrs, $timeout) {
   $scope.closeable = !!$attrs.close;
-  this.close = $scope.close;
+
+  if (angular.isDefined($attrs.dismissOnTimeout)) {
+    $timeout(function() {
+      $scope.close();
+    }, parseInt($attrs.dismissOnTimeout, 10));
+  }
 }])
 
-.directive('alert', function() {
+.directive('uibAlert', function() {
   return {
-    restrict: 'EA',
-    controller: 'AlertController',
+    controller: 'UibAlertController',
     controllerAs: 'alert',
     templateUrl: function(element, attrs) {
       return attrs.templateUrl || 'template/alert/alert.html';
@@ -20,15 +24,42 @@ angular.module('ui.bootstrap.alert', [])
       close: '&'
     }
   };
-})
+});
 
-.directive('dismissOnTimeout', ['$timeout', function($timeout) {
-  return {
-    require: 'alert',
-    link: function(scope, element, attrs, alertCtrl) {
-      $timeout(function() {
-        alertCtrl.close();
-      }, parseInt(attrs.dismissOnTimeout, 10));
+/* Deprecated alert below */
+
+angular.module('ui.bootstrap.alert')
+
+  .value('$alertSuppressWarning', false)
+
+  .controller('AlertController', ['$scope', '$attrs', '$controller', '$log', '$alertSuppressWarning', function($scope, $attrs, $controller, $log, $alertSuppressWarning) {
+    if (!$alertSuppressWarning) {
+      $log.warn('AlertController is now deprecated. Use UibAlertController instead.');
     }
-  };
-}]);
+
+    angular.extend(this, $controller('UibAlertController', {
+      $scope: $scope,
+      $attrs: $attrs
+    }));
+  }])
+
+  .directive('alert', ['$log', '$alertSuppressWarning', function($log, $alertSuppressWarning) {
+    return {
+      controller: 'AlertController',
+      controllerAs: 'alert',
+      templateUrl: function(element, attrs) {
+        return attrs.templateUrl || 'template/alert/alert.html';
+      },
+      transclude: true,
+      replace: true,
+      scope: {
+        type: '@',
+        close: '&'
+      },
+      link: function() {
+        if (!$alertSuppressWarning) {
+          $log.warn('alert is now deprecated. Use uib-alert instead.');
+        }
+      }
+    };
+  }]);
diff --git a/src/alert/docs/demo.html b/src/alert/docs/demo.html
index 97ab966e5d..e2ce4b3870 100644
--- a/src/alert/docs/demo.html
+++ b/src/alert/docs/demo.html
@@ -1,4 +1,11 @@
 <div ng-controller="AlertDemoCtrl">
-  <alert ng-repeat="alert in alerts" type="{{alert.type}}" close="closeAlert($index)">{{alert.msg}}</alert>
+  <script type="text/ng-template" id="alert.html">
+    <div class="alert" style="background-color:#fa39c3;color:white" role="alert">
+      <div ng-transclude></div>
+    </div>
+  </script>
+
+  <uib-alert ng-repeat="alert in alerts" type="{{alert.type}}" close="closeAlert($index)">{{alert.msg}}</uib-alert>
+  <uib-alert template-url="alert.html">A happy alert!</uib-alert>
   <button type="button" class='btn btn-default' ng-click="addAlert()">Add Alert</button>
 </div>
diff --git a/src/alert/docs/readme.md b/src/alert/docs/readme.md
index ef8c30f1f8..6d81bd43f9 100644
--- a/src/alert/docs/readme.md
+++ b/src/alert/docs/readme.md
@@ -1,9 +1,12 @@
-Alert is an AngularJS-version of bootstrap's alert.
-
-This directive can be used to generate alerts from the dynamic model data (using the `ng-repeat` directive);
-
-The presence of the `close` attribute determines if a close button is displayed.
-
-The optional `dismiss-on-timeout` attribute takes the number of milliseconds that specify timeout duration, after which the alert will be closed.
-
-The optional `template-url` attribute allows the user to override the default template with a custom template on an instance by instance basis
+This directive can be used both to generate alerts from static and dynamic model data (using the `ng-repeat` directive).
+
+### uib-alert settings
+
+  * `close` _(Default: `none`)_ -
+    A callback function that gets fired when an `alert` is closed. If the attribute exists, a close button is displayed as well.
+  * `dismiss-on-timeout` _(Default: `none`)(Optional)_ -
+    Takes the number of milliseconds that specify the timeout duration, after which the alert will be closed. This attribute requires the presence of the `close` attribute.
+  * `template-url` _(Default: `template/alert/alert.html`)_ -
+    Add the ability to override the template used in the component.
+  * `type` _(Default: `warning`)_ -
+    Defines the type of the alert. Go to [bootstrap page](http://getbootstrap.com/components/#alerts) to see the type of alerts available.
diff --git a/src/alert/test/alert.spec.js b/src/alert/test/alert.spec.js
index 74514565fc..543a1a951b 100644
--- a/src/alert/test/alert.spec.js
+++ b/src/alert/test/alert.spec.js
@@ -1,20 +1,20 @@
-describe('alert', function() {
-  var scope, $compile, $templateCache;
-  var element;
+describe('uib-alert', function() {
+  var element, scope, $compile, $templateCache, $timeout;
 
   beforeEach(module('ui.bootstrap.alert'));
   beforeEach(module('template/alert/alert.html'));
 
-  beforeEach(inject(function($rootScope, _$compile_, _$templateCache_) {
+  beforeEach(inject(function($rootScope, _$compile_, _$templateCache_, _$timeout_) {
     scope = $rootScope;
     $compile = _$compile_;
     $templateCache = _$templateCache_;
+    $timeout = _$timeout_;
 
     element = angular.element(
       '<div>' +
-        '<alert ng-repeat="alert in alerts" type="{{alert.type}}"' +
+        '<uib-alert ng-repeat="alert in alerts" type="{{alert.type}}"' +
           'close="removeAlert($index)">{{alert.msg}}' +
-        '</alert>' +
+        '</uib-alert>' +
       '</div>');
 
     scope.alerts = [
@@ -41,10 +41,10 @@ describe('alert', function() {
   it('should expose the controller to the view', function() {
     $templateCache.put('template/alert/alert.html', '<div>{{alert.text}}</div>');
 
-    element = $compile('<alert></alert>')(scope);
+    element = $compile('<uib-alert></uib-alert>')(scope);
     scope.$digest();
 
-    var ctrl = element.controller('alert');
+    var ctrl = element.controller('uib-alert');
     expect(ctrl).toBeDefined();
 
     ctrl.text = 'foo';
@@ -56,7 +56,7 @@ describe('alert', function() {
   it('should support custom templates', function() {
     $templateCache.put('foo/bar.html', '<div>baz</div>');
 
-    element = $compile('<alert template-url="foo/bar.html"></alert>')(scope);
+    element = $compile('<uib-alert template-url="foo/bar.html"></uib-alert>')(scope);
     scope.$digest();
 
     expect(element.html()).toBe('baz');
@@ -115,17 +115,59 @@ describe('alert', function() {
   });
 
   it('should not show close button and have the dismissible class if no close callback specified', function() {
-    element = $compile('<alert>No close</alert>')(scope);
+    element = $compile('<uib-alert>No close</uib-alert>')(scope);
     scope.$digest();
     expect(findCloseButton(0)).toBeHidden();
     expect(element).not.toHaveClass('alert-dismissible');
   });
 
   it('should be possible to add additional classes for alert', function() {
-    var element = $compile('<alert class="alert-block" type="info">Default alert!</alert>')(scope);
+    var element = $compile('<uib-alert class="alert-block" type="info">Default alert!</uib-alert>')(scope);
     scope.$digest();
     expect(element).toHaveClass('alert-block');
     expect(element).toHaveClass('alert-info');
   });
 
+  it('should close automatically if dismiss-on-timeout is defined on the element', function() {
+    scope.removeAlert = jasmine.createSpy();
+    $compile('<uib-alert close="removeAlert()" dismiss-on-timeout="500">Default alert!</uib-alert>')(scope);
+    scope.$digest();
+
+    $timeout.flush();
+    expect(scope.removeAlert).toHaveBeenCalled();
+  });
+});
+
+/* Deprecation tests below */
+
+describe('alert deprecation', function() {
+  beforeEach(module('ui.bootstrap.alert'));
+  beforeEach(module('template/alert/alert.html'));
+
+  it('should suppress warning', function() {
+    module(function($provide) {
+      $provide.value('$alertSuppressWarning', true);
+    });
+
+    inject(function($compile, $log, $rootScope) {
+      spyOn($log, 'warn');
+
+      var element = '<alert></alert>';
+      element = $compile(element)($rootScope);
+      $rootScope.$digest();
+      expect($log.warn.calls.count()).toBe(0);
+    });
+  });
+
+  it('should give warning by default', inject(function($compile, $log, $rootScope) {
+    spyOn($log, 'warn');
+
+    var element = '<alert></alert>';
+    element = $compile(element)($rootScope);
+    $rootScope.$digest();
+
+    expect($log.warn.calls.count()).toBe(2);
+    expect($log.warn.calls.argsFor(0)).toEqual(['AlertController is now deprecated. Use UibAlertController instead.']);
+    expect($log.warn.calls.argsFor(1)).toEqual(['alert is now deprecated. Use uib-alert instead.']);
+  }));
 });
diff --git a/src/alert/test/dismissOnTimeout.spec.js b/src/alert/test/dismissOnTimeout.spec.js
deleted file mode 100644
index 3d6d8796e5..0000000000
--- a/src/alert/test/dismissOnTimeout.spec.js
+++ /dev/null
@@ -1,20 +0,0 @@
-describe('dismissOnTimeout', function() {
-  var scope, $compile, $timeout;
-
-  beforeEach(module('ui.bootstrap.alert'));
-  beforeEach(module('template/alert/alert.html'));
-  beforeEach(inject(function($rootScope, _$compile_, _$timeout_) {
-    scope = $rootScope;
-    $compile = _$compile_;
-    $timeout = _$timeout_;
-  }));
-
-  it('should close automatically if auto-dismiss is defined on the element', function() {
-    scope.removeAlert = jasmine.createSpy();
-    $compile('<alert close="removeAlert()" dismiss-on-timeout="500">Default alert!</alert>')(scope);
-    scope.$digest();
-
-    $timeout.flush();
-    expect(scope.removeAlert).toHaveBeenCalled();
-  });
-});
diff --git a/src/bindHtml/bindHtml.js b/src/bindHtml/bindHtml.js
deleted file mode 100644
index 3e0481a8f8..0000000000
--- a/src/bindHtml/bindHtml.js
+++ /dev/null
@@ -1,15 +0,0 @@
-angular.module('ui.bootstrap.bindHtml', [])
-
-  .value('$bindHtmlUnsafeSuppressDeprecated', false)
-
-  .directive('bindHtmlUnsafe', ['$log', '$bindHtmlUnsafeSuppressDeprecated', function ($log, $bindHtmlUnsafeSuppressDeprecated) {
-    return function (scope, element, attr) {
-      if (!$bindHtmlUnsafeSuppressDeprecated) {
-        $log.warn('bindHtmlUnsafe is now deprecated. Use ngBindHtml instead');
-      }
-      element.addClass('ng-binding').data('$binding', attr.bindHtmlUnsafe);
-      scope.$watch(attr.bindHtmlUnsafe, function bindHtmlUnsafeWatchAction(value) {
-        element.html(value || '');
-      });
-    };
-  }]);
\ No newline at end of file
diff --git a/src/buttons/buttons.js b/src/buttons/buttons.js
index 7253b6a62a..9477e32317 100644
--- a/src/buttons/buttons.js
+++ b/src/buttons/buttons.js
@@ -1,30 +1,32 @@
 angular.module('ui.bootstrap.buttons', [])
 
-.constant('buttonConfig', {
+.constant('uibButtonConfig', {
   activeClass: 'active',
   toggleEvent: 'click'
 })
 
-.controller('ButtonsController', ['buttonConfig', function(buttonConfig) {
+.controller('UibButtonsController', ['uibButtonConfig', function(buttonConfig) {
   this.activeClass = buttonConfig.activeClass || 'active';
   this.toggleEvent = buttonConfig.toggleEvent || 'click';
 }])
 
-.directive('btnRadio', function() {
+.directive('uibBtnRadio', function() {
   return {
-    require: ['btnRadio', 'ngModel'],
-    controller: 'ButtonsController',
+    require: ['uibBtnRadio', 'ngModel'],
+    controller: 'UibButtonsController',
     controllerAs: 'buttons',
     link: function(scope, element, attrs, ctrls) {
       var buttonsCtrl = ctrls[0], ngModelCtrl = ctrls[1];
 
+      element.find('input').css({display: 'none'});
+
       //model -> UI
       ngModelCtrl.$render = function() {
-        element.toggleClass(buttonsCtrl.activeClass, angular.equals(ngModelCtrl.$modelValue, scope.$eval(attrs.btnRadio)));
+        element.toggleClass(buttonsCtrl.activeClass, angular.equals(ngModelCtrl.$modelValue, scope.$eval(attrs.uibBtnRadio)));
       };
 
       //ui->model
-      element.bind(buttonsCtrl.toggleEvent, function() {
+      element.on(buttonsCtrl.toggleEvent, function() {
         if (attrs.disabled) {
           return;
         }
@@ -33,7 +35,7 @@ angular.module('ui.bootstrap.buttons', [])
 
         if (!isActive || angular.isDefined(attrs.uncheckable)) {
           scope.$apply(function() {
-            ngModelCtrl.$setViewValue(isActive ? null : scope.$eval(attrs.btnRadio));
+            ngModelCtrl.$setViewValue(isActive ? null : scope.$eval(attrs.uibBtnRadio));
             ngModelCtrl.$render();
           });
         }
@@ -42,14 +44,16 @@ angular.module('ui.bootstrap.buttons', [])
   };
 })
 
-.directive('btnCheckbox', function() {
+.directive('uibBtnCheckbox', ['$document', function($document) {
   return {
-    require: ['btnCheckbox', 'ngModel'],
-    controller: 'ButtonsController',
+    require: ['uibBtnCheckbox', 'ngModel'],
+    controller: 'UibButtonsController',
     controllerAs: 'button',
     link: function(scope, element, attrs, ctrls) {
       var buttonsCtrl = ctrls[0], ngModelCtrl = ctrls[1];
 
+      element.find('input').css({display: 'none'});
+
       function getTrueValue() {
         return getCheckboxValue(attrs.btnCheckboxTrue, true);
       }
@@ -58,9 +62,8 @@ angular.module('ui.bootstrap.buttons', [])
         return getCheckboxValue(attrs.btnCheckboxFalse, false);
       }
 
-      function getCheckboxValue(attributeValue, defaultValue) {
-        var val = scope.$eval(attributeValue);
-        return angular.isDefined(val) ? val : defaultValue;
+      function getCheckboxValue(attribute, defaultValue) {
+        return angular.isDefined(attribute) ? scope.$eval(attribute) : defaultValue;
       }
 
       //model -> UI
@@ -69,7 +72,7 @@ angular.module('ui.bootstrap.buttons', [])
       };
 
       //ui->model
-      element.bind(buttonsCtrl.toggleEvent, function() {
+      element.on(buttonsCtrl.toggleEvent, function() {
         if (attrs.disabled) {
           return;
         }
@@ -79,6 +82,130 @@ angular.module('ui.bootstrap.buttons', [])
           ngModelCtrl.$render();
         });
       });
+
+      //accessibility
+      element.on('keypress', function(e) {
+        if (attrs.disabled || e.which !== 32 || $document[0].activeElement !== element[0]) {
+          return;
+        }
+
+        scope.$apply(function() {
+          ngModelCtrl.$setViewValue(element.hasClass(buttonsCtrl.activeClass) ? getFalseValue() : getTrueValue());
+          ngModelCtrl.$render();
+        });
+      });
     }
   };
-});
+}]);
+
+/* Deprecated buttons below */
+
+angular.module('ui.bootstrap.buttons')
+
+  .value('$buttonsSuppressWarning', false)
+
+  .controller('ButtonsController', ['$controller', '$log', '$buttonsSuppressWarning', function($controller, $log, $buttonsSuppressWarning) {
+    if (!$buttonsSuppressWarning) {
+      $log.warn('ButtonsController is now deprecated. Use UibButtonsController instead.');
+    }
+
+    angular.extend(this, $controller('UibButtonsController'));
+  }])
+
+  .directive('btnRadio', ['$log', '$buttonsSuppressWarning', function($log, $buttonsSuppressWarning) {
+    return {
+      require: ['btnRadio', 'ngModel'],
+      controller: 'ButtonsController',
+      controllerAs: 'buttons',
+      link: function(scope, element, attrs, ctrls) {
+        if (!$buttonsSuppressWarning) {
+          $log.warn('btn-radio is now deprecated. Use uib-btn-radio instead.');
+        }
+
+        var buttonsCtrl = ctrls[0], ngModelCtrl = ctrls[1];
+
+        element.find('input').css({display: 'none'});
+
+        //model -> UI
+        ngModelCtrl.$render = function() {
+          element.toggleClass(buttonsCtrl.activeClass, angular.equals(ngModelCtrl.$modelValue, scope.$eval(attrs.btnRadio)));
+        };
+
+        //ui->model
+        element.bind(buttonsCtrl.toggleEvent, function() {
+          if (attrs.disabled) {
+            return;
+          }
+
+          var isActive = element.hasClass(buttonsCtrl.activeClass);
+
+          if (!isActive || angular.isDefined(attrs.uncheckable)) {
+            scope.$apply(function() {
+              ngModelCtrl.$setViewValue(isActive ? null : scope.$eval(attrs.btnRadio));
+              ngModelCtrl.$render();
+            });
+          }
+        });
+      }
+    };
+  }])
+
+  .directive('btnCheckbox', ['$document', '$log', '$buttonsSuppressWarning', function($document, $log, $buttonsSuppressWarning) {
+    return {
+      require: ['btnCheckbox', 'ngModel'],
+      controller: 'ButtonsController',
+      controllerAs: 'button',
+      link: function(scope, element, attrs, ctrls) {
+        if (!$buttonsSuppressWarning) {
+          $log.warn('btn-checkbox is now deprecated. Use uib-btn-checkbox instead.');
+        }
+
+        var buttonsCtrl = ctrls[0], ngModelCtrl = ctrls[1];
+
+        element.find('input').css({display: 'none'});
+
+        function getTrueValue() {
+          return getCheckboxValue(attrs.btnCheckboxTrue, true);
+        }
+
+        function getFalseValue() {
+          return getCheckboxValue(attrs.btnCheckboxFalse, false);
+        }
+
+        function getCheckboxValue(attributeValue, defaultValue) {
+          var val = scope.$eval(attributeValue);
+          return angular.isDefined(val) ? val : defaultValue;
+        }
+
+        //model -> UI
+        ngModelCtrl.$render = function() {
+          element.toggleClass(buttonsCtrl.activeClass, angular.equals(ngModelCtrl.$modelValue, getTrueValue()));
+        };
+
+        //ui->model
+        element.bind(buttonsCtrl.toggleEvent, function() {
+          if (attrs.disabled) {
+            return;
+          }
+
+          scope.$apply(function() {
+            ngModelCtrl.$setViewValue(element.hasClass(buttonsCtrl.activeClass) ? getFalseValue() : getTrueValue());
+            ngModelCtrl.$render();
+          });
+        });
+
+        //accessibility
+        element.on('keypress', function(e) {
+          if (attrs.disabled || e.which !== 32 || $document[0].activeElement !== element[0]) {
+            return;
+          }
+
+          scope.$apply(function() {
+            ngModelCtrl.$setViewValue(element.hasClass(buttonsCtrl.activeClass) ? getFalseValue() : getTrueValue());
+            ngModelCtrl.$render();
+          });
+        });
+      }
+    };
+  }]);
+
diff --git a/src/buttons/docs/demo.html b/src/buttons/docs/demo.html
index 8d00e5134a..72b0b39311 100644
--- a/src/buttons/docs/demo.html
+++ b/src/buttons/docs/demo.html
@@ -1,27 +1,27 @@
 <div ng-controller="ButtonsCtrl">
     <h4>Single toggle</h4>
     <pre>{{singleModel}}</pre>
-    <button type="button" class="btn btn-primary" ng-model="singleModel" btn-checkbox btn-checkbox-true="1" btn-checkbox-false="0">
+    <button type="button" class="btn btn-primary" ng-model="singleModel" uib-btn-checkbox btn-checkbox-true="1" btn-checkbox-false="0">
         Single Toggle
     </button>
     <h4>Checkbox</h4>
     <pre>Model: {{checkModel}}</pre>
     <pre>Results: {{checkResults}}</pre>
     <div class="btn-group">
-        <label class="btn btn-primary" ng-model="checkModel.left" btn-checkbox>Left</label>
-        <label class="btn btn-primary" ng-model="checkModel.middle" btn-checkbox>Middle</label>
-        <label class="btn btn-primary" ng-model="checkModel.right" btn-checkbox>Right</label>
+        <label class="btn btn-primary" ng-model="checkModel.left" uib-btn-checkbox>Left</label>
+        <label class="btn btn-primary" ng-model="checkModel.middle" uib-btn-checkbox>Middle</label>
+        <label class="btn btn-primary" ng-model="checkModel.right" uib-btn-checkbox>Right</label>
     </div>
     <h4>Radio &amp; Uncheckable Radio</h4>
     <pre>{{radioModel || 'null'}}</pre>
     <div class="btn-group">
-        <label class="btn btn-primary" ng-model="radioModel" btn-radio="'Left'">Left</label>
-        <label class="btn btn-primary" ng-model="radioModel" btn-radio="'Middle'">Middle</label>
-        <label class="btn btn-primary" ng-model="radioModel" btn-radio="'Right'">Right</label>
+        <label class="btn btn-primary" ng-model="radioModel" uib-btn-radio="'Left'">Left</label>
+        <label class="btn btn-primary" ng-model="radioModel" uib-btn-radio="'Middle'">Middle</label>
+        <label class="btn btn-primary" ng-model="radioModel" uib-btn-radio="'Right'">Right</label>
     </div>
     <div class="btn-group">
-        <label class="btn btn-success" ng-model="radioModel" btn-radio="'Left'" uncheckable>Left</label>
-        <label class="btn btn-success" ng-model="radioModel" btn-radio="'Middle'" uncheckable>Middle</label>
-        <label class="btn btn-success" ng-model="radioModel" btn-radio="'Right'" uncheckable>Right</label>
+        <label class="btn btn-success" ng-model="radioModel" uib-btn-radio="'Left'" uncheckable>Left</label>
+        <label class="btn btn-success" ng-model="radioModel" uib-btn-radio="'Middle'" uncheckable>Middle</label>
+        <label class="btn btn-success" ng-model="radioModel" uib-btn-radio="'Right'" uncheckable>Right</label>
     </div>
-</div>
\ No newline at end of file
+</div>
diff --git a/src/buttons/docs/readme.md b/src/buttons/docs/readme.md
index 06ce0fccd6..02ae596ce8 100644
--- a/src/buttons/docs/readme.md
+++ b/src/buttons/docs/readme.md
@@ -1,3 +1,3 @@
 There are two directives that can make a group of buttons behave like a set of checkboxes, radio buttons, or a hybrid where radio buttons can be unchecked.
 
-In order to be able to uncheck the currently selected radio button, one can use the `uncheckable` attribute in tandem with `btn-radio`.
+In order to be able to uncheck the currently selected radio button, one can use the `uncheckable` attribute in tandem with `uib-btn-radio`.
diff --git a/src/buttons/test/buttons.spec.js b/src/buttons/test/buttons.spec.js
index d8d152b2d5..1634e08687 100644
--- a/src/buttons/test/buttons.spec.js
+++ b/src/buttons/test/buttons.spec.js
@@ -16,8 +16,8 @@ describe('buttons', function() {
     };
 
     it('should expose the controller to the view', inject(function($templateCache) {
-      var btn = compileButton('<button ng-model="model" btn-checkbox>{{button.text}}</button>', $scope);
-      var ctrl = btn.controller('btnCheckbox');
+      var btn = compileButton('<button ng-model="model" uib-btn-checkbox>{{button.text}}</button>', $scope);
+      var ctrl = btn.controller('uibBtnCheckbox');
       expect(ctrl).toBeDefined();
 
       ctrl.text = 'foo';
@@ -29,7 +29,7 @@ describe('buttons', function() {
     //model -> UI
     it('should work correctly with default model values', function() {
       $scope.model = false;
-      var btn = compileButton('<button ng-model="model" btn-checkbox>click</button>', $scope);
+      var btn = compileButton('<button ng-model="model" uib-btn-checkbox>click</button>', $scope);
       expect(btn).not.toHaveClass('active');
 
       $scope.model = true;
@@ -39,7 +39,7 @@ describe('buttons', function() {
 
     it('should bind custom model values', function() {
       $scope.model = 1;
-      var btn = compileButton('<button ng-model="model" btn-checkbox btn-checkbox-true="1" btn-checkbox-false="0">click</button>', $scope);
+      var btn = compileButton('<button ng-model="model" uib-btn-checkbox btn-checkbox-true="1" btn-checkbox-false="0">click</button>', $scope);
       expect(btn).toHaveClass('active');
 
       $scope.model = 0;
@@ -50,7 +50,7 @@ describe('buttons', function() {
     //UI-> model
     it('should toggle default model values on click', function() {
       $scope.model = false;
-      var btn = compileButton('<button ng-model="model" btn-checkbox>click</button>', $scope);
+      var btn = compileButton('<button ng-model="model" uib-btn-checkbox>click</button>', $scope);
 
       btn.click();
       expect($scope.model).toEqual(true);
@@ -63,7 +63,7 @@ describe('buttons', function() {
 
     it('should toggle custom model values on click', function() {
       $scope.model = 0;
-      var btn = compileButton('<button ng-model="model" btn-checkbox btn-checkbox-true="1" btn-checkbox-false="0">click</button>', $scope);
+      var btn = compileButton('<button ng-model="model" uib-btn-checkbox btn-checkbox-true="1" btn-checkbox-false="0">click</button>', $scope);
 
       btn.click();
       expect($scope.model).toEqual(1);
@@ -74,11 +74,32 @@ describe('buttons', function() {
       expect(btn).not.toHaveClass('active');
     });
 
+    it('should toggle custom model values on spacebar if focused', function() {
+      $scope.model = 0;
+      var btn = compileButton('<button ng-model="model" uib-btn-checkbox btn-checkbox-true="1" btn-checkbox-false="0">click</button>', $scope);
+      $('body').append(btn);
+      var e = $.Event('keypress');
+      e.which = 32;
+
+      btn[0].focus();
+      btn.trigger(e);
+      $scope.$digest();
+      expect($scope.model).toEqual(1);
+      expect(btn).toHaveClass('active');
+
+      btn.trigger(e);
+      $scope.$digest();
+      expect($scope.model).toEqual(0);
+      expect(btn).not.toHaveClass('active');
+
+      btn.remove();
+    });
+
     it('should monitor true / false value changes - issue 666', function() {
 
       $scope.model = 1;
       $scope.trueVal = 1;
-      var btn = compileButton('<button ng-model="model" btn-checkbox btn-checkbox-true="trueVal">click</button>', $scope);
+      var btn = compileButton('<button ng-model="model" uib-btn-checkbox btn-checkbox-true="trueVal">click</button>', $scope);
 
       expect(btn).toHaveClass('active');
       expect($scope.model).toEqual(1);
@@ -94,7 +115,8 @@ describe('buttons', function() {
     it('should not toggle when disabled - issue 4013', function() {
       $scope.model = 1;
       $scope.falseVal = 0;
-      var btn = compileButton('<button disabled ng-model="model" btn-checkbox btn-checkbox-true="falseVal">click</button>', $scope);
+      var btn = compileButton('<button disabled ng-model="model" uib-btn-checkbox btn-checkbox-true="falseVal">click</button>', $scope);
+      $('body').append(btn);
 
       expect(btn).not.toHaveClass('active');
       expect($scope.model).toEqual(1);
@@ -104,29 +126,42 @@ describe('buttons', function() {
       expect(btn).not.toHaveClass('active');
 
       $scope.$digest();
-      
+
+      expect(btn).not.toHaveClass('active');
+
+      btn[0].focus();
+      var e = $.Event('keypress');
+      e.which = 32;
+      btn.trigger(e);
+
+      expect(btn).not.toHaveClass('active');
+
+      $scope.$digest();
+
       expect(btn).not.toHaveClass('active');
+
+      btn.remove();
     });
 
     describe('setting buttonConfig', function() {
       var originalActiveClass, originalToggleEvent;
 
-      beforeEach(inject(function(buttonConfig) {
-        originalActiveClass = buttonConfig.activeClass;
-        originalToggleEvent = buttonConfig.toggleEvent;
-        buttonConfig.activeClass = false;
-        buttonConfig.toggleEvent = false;
+      beforeEach(inject(function(uibButtonConfig) {
+        originalActiveClass = uibButtonConfig.activeClass;
+        originalToggleEvent = uibButtonConfig.toggleEvent;
+        uibButtonConfig.activeClass = false;
+        uibButtonConfig.toggleEvent = false;
       }));
 
-      afterEach(inject(function(buttonConfig) {
+      afterEach(inject(function(uibButtonConfig) {
         // return it to the original value
-        buttonConfig.activeClass = originalActiveClass;
-        buttonConfig.toggleEvent = originalToggleEvent;
+        uibButtonConfig.activeClass = originalActiveClass;
+        uibButtonConfig.toggleEvent = originalToggleEvent;
       }));
 
       it('should use default config when buttonConfig.activeClass and buttonConfig.toggleEvent is false', function() {
         $scope.model = false;
-        var btn = compileButton('<button ng-model="model" btn-checkbox>click</button>', $scope);
+        var btn = compileButton('<button ng-model="model" uib-btn-checkbox>click</button>', $scope);
         expect(btn).not.toHaveClass('active');
 
         $scope.model = true;
@@ -146,8 +181,8 @@ describe('buttons', function() {
     };
 
     it('should expose the controller to the view', inject(function($templateCache) {
-      var btn = compileButtons('<button ng-model="model" btn-radio="1">{{buttons.text}}</button>', $scope);
-      var ctrl = btn.controller('btnRadio');
+      var btn = compileButtons('<button ng-model="model" uib-btn-radio="1">{{buttons.text}}</button>', $scope);
+      var ctrl = btn.controller('uibBtnRadio');
       expect(ctrl).toBeDefined();
 
       ctrl.text = 'foo';
@@ -158,7 +193,7 @@ describe('buttons', function() {
 
     //model -> UI
     it('should work correctly set active class based on model', function() {
-      var btns = compileButtons('<button ng-model="model" btn-radio="1">click1</button><button ng-model="model" btn-radio="2">click2</button>', $scope);
+      var btns = compileButtons('<button ng-model="model" uib-btn-radio="1">click1</button><button ng-model="model" uib-btn-radio="2">click2</button>', $scope);
       expect(btns.eq(0)).not.toHaveClass('active');
       expect(btns.eq(1)).not.toHaveClass('active');
 
@@ -170,7 +205,7 @@ describe('buttons', function() {
 
     //UI->model
     it('should work correctly set active class based on model', function() {
-      var btns = compileButtons('<button ng-model="model" btn-radio="1">click1</button><button ng-model="model" btn-radio="2">click2</button>', $scope);
+      var btns = compileButtons('<button ng-model="model" uib-btn-radio="1">click1</button><button ng-model="model" uib-btn-radio="2">click2</button>', $scope);
       expect($scope.model).toBeUndefined();
 
       btns.eq(0).click();
@@ -184,10 +219,10 @@ describe('buttons', function() {
       expect(btns.eq(0)).not.toHaveClass('active');
     });
 
-    it('should watch btn-radio values and update state accordingly', function() {
+    it('should watch uib-btn-radio values and update state accordingly', function() {
       $scope.values = ['value1', 'value2'];
 
-      var btns = compileButtons('<button ng-model="model" btn-radio="values[0]">click1</button><button ng-model="model" btn-radio="values[1]">click2</button>', $scope);
+      var btns = compileButtons('<button ng-model="model" uib-btn-radio="values[0]">click1</button><button ng-model="model" uib-btn-radio="values[1]">click2</button>', $scope);
       expect(btns.eq(0)).not.toHaveClass('active');
       expect(btns.eq(1)).not.toHaveClass('active');
 
@@ -205,7 +240,7 @@ describe('buttons', function() {
 
     it('should do nothing when click active radio', function() {
       $scope.model = 1;
-      var btns = compileButtons('<button ng-model="model" btn-radio="1">click1</button><button ng-model="model" btn-radio="2">click2</button>', $scope);
+      var btns = compileButtons('<button ng-model="model" uib-btn-radio="1">click1</button><button ng-model="model" uib-btn-radio="2">click2</button>', $scope);
       expect(btns.eq(0)).toHaveClass('active');
       expect(btns.eq(1)).not.toHaveClass('active');
 
@@ -217,7 +252,7 @@ describe('buttons', function() {
 
     it('should not toggle when disabled - issue 4013', function() {
       $scope.model = 1;
-      var btns = compileButtons('<button ng-model="model" btn-radio="1">click1</button><button disabled ng-model="model" btn-radio="2">click2</button>', $scope);
+      var btns = compileButtons('<button ng-model="model" uib-btn-radio="1">click1</button><button disabled ng-model="model" uib-btn-radio="2">click2</button>', $scope);
 
       expect(btns.eq(0)).toHaveClass('active');
       expect(btns.eq(1)).not.toHaveClass('active');
@@ -233,9 +268,9 @@ describe('buttons', function() {
       expect(btns.eq(1)).not.toHaveClass('active');
     });
 
-    it('should handle string values in btn-radio value', function() {
+    it('should handle string values in uib-btn-radio value', function() {
       $scope.model = 'Two';
-      var btns = compileButtons('<button ng-model="model" btn-radio="\'One\'">click1</button><button ng-model="model" btn-radio="\'Two\'">click2</button>', $scope);
+      var btns = compileButtons('<button ng-model="model" uib-btn-radio="\'One\'">click1</button><button ng-model="model" uib-btn-radio="\'Two\'">click2</button>', $scope);
 
       expect(btns.eq(0)).not.toHaveClass('active');
       expect(btns.eq(1)).toHaveClass('active');
@@ -255,7 +290,7 @@ describe('buttons', function() {
     describe('uncheckable', function() {
       //model -> UI
       it('should set active class based on model', function() {
-        var btns = compileButtons('<button ng-model="model" btn-radio="1" uncheckable>click1</button><button ng-model="model" btn-radio="2" uncheckable>click2</button>', $scope);
+        var btns = compileButtons('<button ng-model="model" uib-btn-radio="1" uncheckable>click1</button><button ng-model="model" uib-btn-radio="2" uncheckable>click2</button>', $scope);
         expect(btns.eq(0)).not.toHaveClass('active');
         expect(btns.eq(1)).not.toHaveClass('active');
 
@@ -267,7 +302,7 @@ describe('buttons', function() {
 
       //UI->model
       it('should unset active class based on model', function() {
-        var btns = compileButtons('<button ng-model="model" btn-radio="1" uncheckable>click1</button><button ng-model="model" btn-radio="2" uncheckable>click2</button>', $scope);
+        var btns = compileButtons('<button ng-model="model" uib-btn-radio="1" uncheckable>click1</button><button ng-model="model" uib-btn-radio="2" uncheckable>click2</button>', $scope);
         expect($scope.model).toBeUndefined();
 
         btns.eq(0).click();
@@ -281,10 +316,10 @@ describe('buttons', function() {
         expect(btns.eq(0)).not.toHaveClass('active');
       });
 
-      it('should watch btn-radio values and update state', function() {
+      it('should watch uib-btn-radio values and update state', function() {
         $scope.values = ['value1', 'value2'];
 
-        var btns = compileButtons('<button ng-model="model" btn-radio="values[0]" uncheckable>click1</button><button ng-model="model" btn-radio="values[1]" uncheckable>click2</button>', $scope);
+        var btns = compileButtons('<button ng-model="model" uib-btn-radio="values[0]" uncheckable>click1</button><button ng-model="model" uib-btn-radio="values[1]" uncheckable>click2</button>', $scope);
         expect(btns.eq(0)).not.toHaveClass('active');
         expect(btns.eq(1)).not.toHaveClass('active');
 
@@ -301,3 +336,47 @@ describe('buttons', function() {
     });
   });
 });
+
+/* Deprecation tests below */
+
+describe('buttons deprecation', function() {
+  beforeEach(module('ui.bootstrap.buttons'));
+
+  it('should suppress warning', function() {
+    module(function($provide) {
+      $provide.value('$buttonsSuppressWarning', true);
+    });
+
+    inject(function($compile, $log, $rootScope) {
+      spyOn($log, 'warn');
+
+      var element = $compile('<button ng-model="model" btn-checkbox>click</button>')($rootScope);
+      $rootScope.$digest();
+
+      expect($log.warn.calls.count()).toBe(0);
+
+      element = $compile('<button ng-model="model" btn-radio="1">click1</button><button ng-model="model" btn-radio="2">click2</button>')($rootScope);
+      $rootScope.$digest();
+
+      expect($log.warn.calls.count()).toBe(0);
+    });
+  });
+
+  it('should give warning by default', inject(function($compile, $log, $rootScope) {
+    spyOn($log, 'warn');
+
+    var element = $compile('<button ng-model="model" btn-checkbox>click</button>')($rootScope);
+    $rootScope.$digest();
+
+    element = $compile('<button ng-model="model" btn-radio="1">click1</button><button ng-model="model" btn-radio="2">click2</button>')($rootScope);
+    $rootScope.$digest();
+
+    expect($log.warn.calls.count()).toBe(6);
+    expect($log.warn.calls.argsFor(0)).toEqual(['ButtonsController is now deprecated. Use UibButtonsController instead.']);
+    expect($log.warn.calls.argsFor(1)).toEqual(['btn-checkbox is now deprecated. Use uib-btn-checkbox instead.']);
+    expect($log.warn.calls.argsFor(2)).toEqual(['ButtonsController is now deprecated. Use UibButtonsController instead.']);
+    expect($log.warn.calls.argsFor(3)).toEqual(['btn-radio is now deprecated. Use uib-btn-radio instead.']);
+    expect($log.warn.calls.argsFor(4)).toEqual(['ButtonsController is now deprecated. Use UibButtonsController instead.']);
+    expect($log.warn.calls.argsFor(5)).toEqual(['btn-radio is now deprecated. Use uib-btn-radio instead.']);
+  }));
+});
diff --git a/src/carousel/carousel.js b/src/carousel/carousel.js
index 733c1caa61..a3cb2aac7d 100644
--- a/src/carousel/carousel.js
+++ b/src/carousel/carousel.js
@@ -1,13 +1,14 @@
 /**
-* @ngdoc overview
-* @name ui.bootstrap.carousel
-*
-* @description
-* AngularJS version of an image carousel.
-*
-*/
+ * @ngdoc overview
+ * @name ui.bootstrap.carousel
+ *
+ * @description
+ * AngularJS version of an image carousel.
+ *
+ */
 angular.module('ui.bootstrap.carousel', [])
-.controller('CarouselController', ['$scope', '$element', '$interval', '$animate', function ($scope, $element, $interval, $animate) {
+
+.controller('UibCarouselController', ['$scope', '$element', '$interval', '$animate', function($scope, $element, $interval, $animate) {
   var self = this,
     slides = self.slides = $scope.slides = [],
     NEW_ANIMATE = angular.version.minor >= 4,
@@ -46,7 +47,7 @@ angular.module('ui.bootstrap.carousel', [])
 
       $scope.$currentTransition = true;
       if (NEW_ANIMATE) {
-        $animate.on('addClass', slide.$element, function (element, phase) {
+        $animate.on('addClass', slide.$element, function(element, phase) {
           if (phase === 'close') {
             $scope.$currentTransition = null;
             $animate.off('addClass', element);
@@ -66,7 +67,7 @@ angular.module('ui.bootstrap.carousel', [])
     restartTimer();
   }
 
-  $scope.$on('$destroy', function () {
+  $scope.$on('$destroy', function() {
     destroyed = true;
   });
 
@@ -108,7 +109,7 @@ angular.module('ui.bootstrap.carousel', [])
   $scope.prev = function() {
     var newIndex = self.getCurrentIndex() - 1 < 0 ? slides.length - 1 : self.getCurrentIndex() - 1;
 
-    if ($scope.noWrap() && newIndex === slides.length - 1){
+    if ($scope.noWrap() && newIndex === slides.length - 1) {
       $scope.pause();
       return;
     }
@@ -121,6 +122,7 @@ angular.module('ui.bootstrap.carousel', [])
   };
 
   $scope.$watch('interval', restartTimer);
+  $scope.$watchCollection('slides', resetTransition);
   $scope.$on('$destroy', resetTimer);
 
   function restartTimer() {
@@ -147,6 +149,12 @@ angular.module('ui.bootstrap.carousel', [])
     }
   }
 
+  function resetTransition(slides) {
+    if (!slides.length) {
+      $scope.$currentTransition = null;
+    }
+  }
+
   $scope.play = function() {
     if (!isPlaying) {
       isPlaying = true;
@@ -164,9 +172,9 @@ angular.module('ui.bootstrap.carousel', [])
     slide.$element = element;
     slides.push(slide);
     //if this is the first slide or the slide is set to active, select it
-    if(slides.length === 1 || slide.active) {
-      self.select(slides[slides.length-1]);
-      if (slides.length == 1) {
+    if (slides.length === 1 || slide.active) {
+      self.select(slides[slides.length - 1]);
+      if (slides.length === 1) {
         $scope.play();
       }
     } else {
@@ -185,14 +193,14 @@ angular.module('ui.bootstrap.carousel', [])
     slides.splice(index, 1);
     if (slides.length > 0 && slide.active) {
       if (index >= slides.length) {
-        self.select(slides[index-1]);
+        self.select(slides[index - 1]);
       } else {
         self.select(slides[index]);
       }
     } else if (currentIndex > index) {
       currentIndex--;
     }
-    
+
     //clean the currentSlide when no more slide
     if (slides.length === 0) {
       self.currentSlide = null;
@@ -220,20 +228,20 @@ angular.module('ui.bootstrap.carousel', [])
  * @example
 <example module="ui.bootstrap">
   <file name="index.html">
-    <carousel>
-      <slide>
+    <uib-carousel>
+      <uib-slide>
         <img src="http://placekitten.com/150/150" style="margin:auto;">
         <div class="carousel-caption">
           <p>Beautiful!</p>
         </div>
-      </slide>
-      <slide>
+      </uib-slide>
+      <uib-slide>
         <img src="http://placekitten.com/100/150" style="margin:auto;">
         <div class="carousel-caption">
           <p>D'aww!</p>
         </div>
-      </slide>
-    </carousel>
+      </uib-slide>
+    </uib-carousel>
   </file>
   <file name="demo.css">
     .carousel-indicators {
@@ -243,12 +251,11 @@ angular.module('ui.bootstrap.carousel', [])
   </file>
 </example>
  */
-.directive('carousel', [function() {
+.directive('uibCarousel', [function() {
   return {
-    restrict: 'EA',
     transclude: true,
     replace: true,
-    controller: 'CarouselController',
+    controller: 'UibCarouselController',
     controllerAs: 'carousel',
     require: 'carousel',
     templateUrl: function(element, attrs) {
@@ -278,15 +285,15 @@ angular.module('ui.bootstrap.carousel', [])
 <example module="ui.bootstrap">
   <file name="index.html">
 <div ng-controller="CarouselDemoCtrl">
-  <carousel>
-    <slide ng-repeat="slide in slides" active="slide.active" index="$index">
+  <uib-carousel>
+    <uib-slide ng-repeat="slide in slides" active="slide.active" index="$index">
       <img ng-src="{{slide.image}}" style="margin:auto;">
       <div class="carousel-caption">
         <h4>Slide {{$index}}</h4>
         <p>{{slide.text}}</p>
       </div>
-    </slide>
-  </carousel>
+    </uib-slide>
+  </uib-carousel>
   Interval, in milliseconds: <input type="number" ng-model="myInterval">
   <br />Enter a negative number to stop the interval.
 </div>
@@ -305,9 +312,9 @@ function CarouselDemoCtrl($scope) {
 </example>
 */
 
-.directive('slide', function() {
+.directive('uibSlide', function() {
   return {
-    require: '^carousel',
+    require: '^uibCarousel',
     restrict: 'EA',
     transclude: true,
     replace: true,
@@ -316,6 +323,7 @@ function CarouselDemoCtrl($scope) {
     },
     scope: {
       active: '=?',
+      actual: '=?',
       index: '=?'
     },
     link: function (scope, element, attrs, carouselCtrl) {
@@ -353,10 +361,10 @@ function ($injector, $animate) {
   }
 
   return {
-    beforeAddClass: function (element, className, done) {
+    beforeAddClass: function(element, className, done) {
       // Due to transclusion, noTransition property is on parent's scope
-      if (className == 'active' && element.parent() &&
-          !element.parent().data(NO_TRANSITION)) {
+      if (className == 'active' && element.parent() && element.parent().parent() &&
+          !element.parent().parent().data(NO_TRANSITION)) {
         var stopped = false;
         var direction = element.data(SLIDE_DIRECTION);
         var directionClass = direction == 'next' ? 'left' : 'right';
@@ -385,8 +393,8 @@ function ($injector, $animate) {
     },
     beforeRemoveClass: function (element, className, done) {
       // Due to transclusion, noTransition property is on parent's scope
-      if (className === 'active' && element.parent() &&
-          !element.parent().data(NO_TRANSITION)) {
+      if (className === 'active' && element.parent() && element.parent().parent() &&
+          !element.parent().parent().data(NO_TRANSITION)) {
         var stopped = false;
         var direction = element.data(SLIDE_DIRECTION);
         var directionClass = direction == 'next' ? 'left' : 'right';
@@ -397,22 +405,92 @@ function ($injector, $animate) {
             .start()
             .done(removeClassFn);
         } else {
-          $animate.addClass(element, directionClass).then(function () {
+          $animate.addClass(element, directionClass).then(function() {
             if (!stopped) {
               removeClassFn();
             }
             done();
           });
         }
-        return function () {
+        return function() {
           stopped = true;
         };
       }
       done();
     }
   };
+}]);
+
+/* deprecated carousel below */
+
+angular.module('ui.bootstrap.carousel')
 
+.value('$carouselSuppressWarning', false)
+
+.controller('CarouselController', ['$scope', '$element', '$controller', '$log', '$carouselSuppressWarning', function($scope, $element, $controller, $log, $carouselSuppressWarning) {
+  if (!$carouselSuppressWarning) {
+    $log.warn('CarouselController is now deprecated. Use UibCarouselController instead.');
+  }
+
+  angular.extend(this, $controller('UibCarouselController', {
+    $scope: $scope,
+    $element: $element
+  }));
+}])
+
+.directive('carousel', ['$log', '$carouselSuppressWarning', function($log, $carouselSuppressWarning) {
+  return {
+    transclude: true,
+    replace: true,
+    controller: 'CarouselController',
+    controllerAs: 'carousel',
+    require: 'carousel',
+    templateUrl: function(element, attrs) {
+      return attrs.templateUrl || 'template/carousel/carousel.html';
+    },
+    scope: {
+      interval: '=',
+      noTransition: '=',
+      noPause: '=',
+      noWrap: '&'
+    },
+    link: function() {
+      if (!$carouselSuppressWarning) {
+        $log.warn('carousel is now deprecated. Use uib-carousel instead.');
+      }
+    }
+  };
 }])
 
+.directive('slide', ['$log', '$carouselSuppressWarning', function($log, $carouselSuppressWarning) {
+  return {
+    require: '^carousel',
+    transclude: true,
+    replace: true,
+    templateUrl: function(element, attrs) {
+      return attrs.templateUrl || 'template/carousel/slide.html';
+    },
+    scope: {
+      active: '=?',
+      actual: '=?',
+      index: '=?'
+    },
+    link: function (scope, element, attrs, carouselCtrl) {
+      if (!$carouselSuppressWarning) {
+        $log.warn('slide is now deprecated. Use uib-slide instead.');
+      }
+
+      carouselCtrl.addSlide(scope, element);
+      //when the scope is destroyed then remove the slide from the current slides array
+      scope.$on('$destroy', function() {
+        carouselCtrl.removeSlide(scope);
+      });
 
-;
+      scope.$watch('active', function(active) {
+        if (active) {
+          carouselCtrl.select(scope);
+        }
+      });
+    }
+  };
+}]);
diff --git a/src/carousel/docs/README.md b/src/carousel/docs/README.md
index bf8bbe2225..0fe1eba398 100644
--- a/src/carousel/docs/README.md
+++ b/src/carousel/docs/README.md
@@ -2,8 +2,10 @@ Carousel creates a carousel similar to bootstrap's image carousel.
 
 The carousel also offers support for touchscreen devices in the form of swiping. To enable swiping, load the `ngTouch` module as a dependency.
 
-Use a `<carousel>` element with `<slide>` elements inside it.  It will automatically cycle through the slides at a given rate, and a current-index variable will be kept in sync with the currently visible slide.
+Use a `<uib-carousel>` element with `<uib-slide>` elements inside it.  It will automatically cycle through the slides at a given rate, and a current-index variable will be kept in sync with the currently visible slide.
 
-Use the `no-wrap` attribute on a `<carousel>` element to control the looping of slides; setting `no-wrap` to an expression which evaluates to a truthy value will prevent looping
+Use the `no-wrap` attribute on a `<uib-carousel>` element to control the looping of slides; setting `no-wrap` to an expression which evaluates to a truthy value will prevent looping.
 
-Use the `template-url` attribute on a `<carousel>` or `<slide>` element to specify the url of a custom template to override the default templates
+Use the `template-url` attribute on a `<uib-carousel>` or `<uib-slide>` element to specify the url of a custom template to override the default templates.
+
+Use the `actual` attribute on a `<uib-slide>` element to bind the slide model (or any object of interest) onto the slide directive's `$scope`, which makes it available for customization in the carousel template.
diff --git a/src/carousel/docs/demo.html b/src/carousel/docs/demo.html
index 151528d43c..0383722387 100644
--- a/src/carousel/docs/demo.html
+++ b/src/carousel/docs/demo.html
@@ -1,14 +1,14 @@
 <div ng-controller="CarouselDemoCtrl">
   <div style="height: 305px">
-    <carousel interval="myInterval" no-wrap="noWrapSlides">
-      <slide ng-repeat="slide in slides" active="slide.active">
+    <uib-carousel interval="myInterval" no-wrap="noWrapSlides">
+      <uib-slide ng-repeat="slide in slides" active="slide.active">
         <img ng-src="{{slide.image}}" style="margin:auto;">
         <div class="carousel-caption">
           <h4>Slide {{$index}}</h4>
           <p>{{slide.text}}</p>
         </div>
-      </slide>
-    </carousel>
+      </uib-slide>
+    </uib-carousel>
   </div>
   <div class="row">
     <div class="col-md-6">
diff --git a/src/carousel/test/carousel.spec.js b/src/carousel/test/carousel.spec.js
index e1db5a5155..adb9c76ecc 100644
--- a/src/carousel/test/carousel.spec.js
+++ b/src/carousel/test/carousel.spec.js
@@ -33,11 +33,11 @@ describe('carousel', function() {
         {active:false,content:'three'}
       ];
       elm = $compile(
-        '<carousel interval="interval" no-transition="true" no-pause="nopause">' +
-          '<slide ng-repeat="slide in slides" active="slide.active">' +
+        '<uib-carousel interval="interval" no-transition="true" no-pause="nopause">' +
+          '<uib-slide ng-repeat="slide in slides" active="slide.active">' +
             '{{slide.content}}' +
-          '</slide>' +
-        '</carousel>'
+          '</uib-slide>' +
+        '</uib-carousel>'
       )(scope);
       scope.interval = 5000;
       scope.nopause = undefined;
@@ -45,7 +45,7 @@ describe('carousel', function() {
     });
 
     function testSlideActive(slideIndex) {
-      for (var i=0; i<scope.slides.length; i++) {
+      for (var i = 0; i < scope.slides.length; i++) {
         if (i == slideIndex) {
           expect(scope.slides[i].active).toBe(true);
         } else {
@@ -57,7 +57,7 @@ describe('carousel', function() {
     it('should allow overriding of the carousel template', function() {
       $templateCache.put('foo/bar.html', '<div>foo</div>');
 
-      elm = $compile('<carousel template-url="foo/bar.html"></carousel>')(scope);
+      elm = $compile('<uib-carousel template-url="foo/bar.html"></uib-carousel>')(scope);
       $rootScope.$digest();
 
       expect(elm.html()).toBe('foo');
@@ -67,9 +67,9 @@ describe('carousel', function() {
       $templateCache.put('foo/bar.html', '<div class="slide">bar</div>');
 
       elm = $compile(
-        '<carousel interval="interval" no-transition="true" no-pause="nopause">' +
-          '<slide template-url="foo/bar.html"></slide>' + 
-        '</carousel>'
+        '<uib-carousel interval="interval" no-transition="true" no-pause="nopause">' +
+          '<uib-slide template-url="foo/bar.html"></uib-slide>' + 
+        '</uib-carousel>'
       )(scope);
       $rootScope.$digest();
 
@@ -99,11 +99,11 @@ describe('carousel', function() {
 
     it('should stop cycling slides forward when noWrap is truthy', function () {
       elm = $compile(
-          '<carousel interval="interval" no-wrap="noWrap">' +
-            '<slide ng-repeat="slide in slides" active="slide.active">' +
+          '<uib-carousel interval="interval" no-wrap="noWrap">' +
+            '<uib-slide ng-repeat="slide in slides" active="slide.active">' +
               '{{slide.content}}' +
-            '</slide>' +
-          '</carousel>'
+            '</uib-slide>' +
+          '</uib-carousel>'
         )(scope);
 
       scope.noWrap = true;
@@ -123,11 +123,11 @@ describe('carousel', function() {
 
     it('should stop cycling slides backward when noWrap is truthy', function () {
       elm = $compile(
-          '<carousel interval="interval" no-wrap="noWrap">' +
-            '<slide ng-repeat="slide in slides" active="slide.active">' +
+          '<uib-carousel interval="interval" no-wrap="noWrap">' +
+            '<uib-slide ng-repeat="slide in slides" active="slide.active">' +
               '{{slide.content}}' +
-            '</slide>' +
-          '</carousel>'
+            '</uib-slide>' +
+          '</uib-carousel>'
         )(scope);
 
       scope.noWrap = true;
@@ -143,14 +143,14 @@ describe('carousel', function() {
     });
 
     it('should hide navigation when only one slide', function () {
-      scope.slides=[{active:false,content:'one'}];
+      scope.slides = [{active:false,content:'one'}];
       scope.$apply();
       elm = $compile(
-          '<carousel interval="interval" no-transition="true">' +
-            '<slide ng-repeat="slide in slides" active="slide.active">' +
+          '<uib-carousel interval="interval" no-transition="true">' +
+            '<uib-slide ng-repeat="slide in slides" active="slide.active">' +
               '{{slide.content}}' +
-            '</slide>' +
-          '</carousel>'
+            '</uib-slide>' +
+          '</uib-carousel>'
         )(scope);
       var indicators = elm.find('ol.carousel-indicators > li');
       expect(indicators.length).toBe(0);
@@ -302,7 +302,7 @@ describe('carousel', function() {
     });
 
     it('should change dom when you reassign ng-repeat slides array', function() {
-      scope.slides=[{content:'new1'},{content:'new2'},{content:'new3'}];
+      scope.slides = [{content:'new1'},{content:'new2'},{content:'new3'}];
       scope.$apply();
       var contents = elm.find('div.item');
       expect(contents.length).toBe(3);
@@ -339,8 +339,22 @@ describe('carousel', function() {
       expect($interval.cancel).toHaveBeenCalled();
     });
 
-    describe('slide order', function() {
+    it('issue 4390 - should reset the currentTransition if there are no slides', function() {
+      var carouselScope = elm.children().scope();
+      var next = elm.find('a.right');
+      scope.slides = [{content:'new1'},{content:'new2'},{content:'new3'}];
+      scope.$apply();
+
+      testSlideActive(0);
+      carouselScope.$currentTransition = true;
 
+      scope.slides = [];
+      scope.$apply();
+
+      expect(carouselScope.$currentTransition).toBe(null);
+    });
+
+    describe('slide order', function() {
       beforeEach(function() {
         scope.slides = [
           {active:false,content:'one', id:1},
@@ -348,11 +362,11 @@ describe('carousel', function() {
           {active:false,content:'three', id:3}
         ];
         elm = $compile(
-          '<carousel interval="interval" no-transition="true" no-pause="nopause">' +
-            '<slide ng-repeat="slide in slides | orderBy: \'id\' " active="slide.active" index="$index">' +
+          '<uib-carousel interval="interval" no-transition="true" no-pause="nopause">' +
+            '<uib-slide ng-repeat="slide in slides | orderBy: \'id\' " active="slide.active" index="$index">' +
               '{{slide.content}}' +
-            '</slide>' +
-          '</carousel>'
+            '</uib-slide>' +
+          '</uib-carousel>'
         )(scope);
         scope.$apply();
         scope.slides[0].id = 3;
@@ -418,7 +432,7 @@ describe('carousel', function() {
 
     beforeEach(function() {
       scope = $rootScope.$new();
-      ctrl = $controller('CarouselController', {$scope: scope, $element: angular.element('<div></div>')});
+      ctrl = $controller('UibCarouselController', {$scope: scope, $element: angular.element('<div></div>')});
       for(var i = 0;i < slides.length;i++){
         ctrl.addSlide(slides[i]);
       }
@@ -486,10 +500,10 @@ describe('carousel', function() {
       $templateCache.put('template/carousel/carousel.html', '<div>{{carousel.text}}</div>');
 
       var scope = $rootScope.$new();
-      var elm = $compile('<carousel interval="bar" no-transition="false" no-pause="true"></carousel>')(scope);
+      var elm = $compile('<uib-carousel interval="bar" no-transition="false" no-pause="true"></uib-carousel>')(scope);
       $rootScope.$digest();
 
-      var ctrl = elm.controller('carousel');
+      var ctrl = elm.controller('uibCarousel');
 
       expect(ctrl).toBeDefined();
 
@@ -499,4 +513,82 @@ describe('carousel', function() {
       expect(elm.html()).toBe('foo');
     }));
   });
+
+  it('should expose a custom model in the carousel slide', function() {
+    var scope = $rootScope.$new();
+    scope.slides = [
+      {active:false,content:'one'},
+      {active:false,content:'two'},
+      {active:false,content:'three'}
+    ];
+    var elm = $compile(
+      '<uib-carousel interval="interval" no-transition="true" no-pause="nopause">' +
+        '<uib-slide ng-repeat="slide in slides" active="slide.active" actual="slide">' +
+          '{{slide.content}}' +
+        '</uib-slide>' +
+      '</uib-carousel>'
+    )(scope);
+    $rootScope.$digest();
+
+    var ctrl = elm.controller('uibCarousel');
+
+    expect(angular.equals(ctrl.slides.map(function(slide) {
+      return slide.actual;
+    }), scope.slides)).toBe(true);
+  });
+});
+
+describe('carousel deprecation', function() {
+  beforeEach(module('ui.bootstrap.carousel'));
+  beforeEach(module('template/carousel/carousel.html', 'template/carousel/slide.html'));
+
+  it('should suppress warning', function() {
+    module(function($provide) {
+      $provide.value('$carouselSuppressWarning', true);
+    });
+
+    inject(function($compile, $log, $rootScope) {
+      spyOn($log, 'warn');
+
+      var element = '<carousel interval="interval" no-transition="true" no-pause="nopause">' +
+          '<slide ng-repeat="slide in slides" active="slide.active">' +
+            '{{slide.content}}' +
+          '</slide>' +
+        '</carousel>';
+      element = $compile(element)($rootScope);
+      $rootScope.$digest();
+      expect($log.warn.calls.count()).toBe(0);
+    });
+  });
+
+  it('should give warning by default', inject(function($compile, $log, $rootScope) {
+    spyOn($log, 'warn');
+
+    var element = '<carousel interval="interval" no-transition="true" no-pause="nopause">' +
+        '<slide ng-repeat="slide in slides" active="slide.active">' +
+          '{{slide.content}}' +
+        '</slide>' +
+      '</carousel>';
+    element = $compile(element)($rootScope);
+    $rootScope.$digest();
+
+    expect($log.warn.calls.count()).toBe(2);
+    expect($log.warn.calls.argsFor(0)).toEqual(['CarouselController is now deprecated. Use UibCarouselController instead.']);
+    expect($log.warn.calls.argsFor(1)).toEqual(['carousel is now deprecated. Use uib-carousel instead.']);
+  }));
+  
+   it('should give warning by default for slider', inject(function($compile, $log, $rootScope) {
+    spyOn($log, 'warn');
+
+    var element = '<carousel interval="interval" no-transition="true" no-pause="nopause">' +
+        '<slide></slide>' + 
+      '</carousel>';
+    element = $compile(element)($rootScope);
+    $rootScope.$digest();
+
+    expect($log.warn.calls.count()).toBe(3);
+    expect($log.warn.calls.argsFor(0)).toEqual(['CarouselController is now deprecated. Use UibCarouselController instead.']);
+    expect($log.warn.calls.argsFor(1)).toEqual(['slide is now deprecated. Use uib-slide instead.']);
+    expect($log.warn.calls.argsFor(2)).toEqual(['carousel is now deprecated. Use uib-carousel instead.']);
+  }));
 });
diff --git a/src/collapse/collapse.js b/src/collapse/collapse.js
index a2d17a1d88..1b0044c35a 100644
--- a/src/collapse/collapse.js
+++ b/src/collapse/collapse.js
@@ -1,6 +1,7 @@
 angular.module('ui.bootstrap.collapse', [])
 
-  .directive('collapse', ['$animate', function($animate) {
+  .directive('uibCollapse', ['$animate', '$injector', function($animate, $injector) {
+    var $animateCss = $injector.has('$animateCss') ? $injector.get('$animateCss') : null;
     return {
       link: function(scope, element, attrs) {
         function expand() {
@@ -9,18 +10,112 @@ angular.module('ui.bootstrap.collapse', [])
             .attr('aria-expanded', true)
             .attr('aria-hidden', false);
 
-          $animate.addClass(element, 'in', {
-            to: { height: element[0].scrollHeight + 'px' }
-          }).then(expandDone);
+          if ($animateCss) {
+            $animateCss(element, {
+              addClass: 'in',
+              easing: 'ease',
+              to: { height: element[0].scrollHeight + 'px' }
+            }).start().done(expandDone);
+          } else {
+            $animate.addClass(element, 'in', {
+              to: { height: element[0].scrollHeight + 'px' }
+            }).then(expandDone);
+          }
+        }
+
+        function expandDone() {
+          element.removeClass('collapsing')
+            .addClass('collapse')
+            .css({height: 'auto'});
+        }
+
+        function collapse() {
+          if (!element.hasClass('collapse') && !element.hasClass('in')) {
+            return collapseDone();
+          }
+
+          element
+            // IMPORTANT: The height must be set before adding "collapsing" class.
+            // Otherwise, the browser attempts to animate from height 0 (in
+            // collapsing class) to the given height here.
+            .css({height: element[0].scrollHeight + 'px'})
+            // initially all panel collapse have the collapse class, this removal
+            // prevents the animation from jumping to collapsed state
+            .removeClass('collapse')
+            .addClass('collapsing')
+            .attr('aria-expanded', false)
+            .attr('aria-hidden', true);
+
+          if ($animateCss) {
+            $animateCss(element, {
+              removeClass: 'in',
+              to: {height: '0'}
+            }).start().done(collapseDone);
+          } else {
+            $animate.removeClass(element, 'in', {
+              to: {height: '0'}
+            }).then(collapseDone);
+          }
+        }
+
+        function collapseDone() {
+          element.css({height: '0'}); // Required so that collapse works when animation is disabled
+          element.removeClass('collapsing')
+            .addClass('collapse');
+        }
+
+        scope.$watch(attrs.uibCollapse, function(shouldCollapse) {
+          if (shouldCollapse) {
+            collapse();
+          } else {
+            expand();
+          }
+        });
+      }
+    };
+  }]);
+
+/* Deprecated collapse below */
+
+angular.module('ui.bootstrap.collapse')
+
+  .value('$collapseSuppressWarning', false)
+
+  .directive('collapse', ['$animate', '$injector', '$log', '$collapseSuppressWarning', function($animate, $injector, $log, $collapseSuppressWarning) {
+    var $animateCss = $injector.has('$animateCss') ? $injector.get('$animateCss') : null;
+    return {
+      link: function(scope, element, attrs) {
+        if (!$collapseSuppressWarning) {
+          $log.warn('collapse is now deprecated. Use uib-collapse instead.');
+        }
+
+        function expand() {
+          element.removeClass('collapse')
+            .addClass('collapsing')
+            .attr('aria-expanded', true)
+            .attr('aria-hidden', false);
+
+          if ($animateCss) {
+            $animateCss(element, {
+              addClass: 'in',
+              easing: 'ease',
+              to: { height: element[0].scrollHeight + 'px' }
+            }).start().done(expandDone);
+          } else {
+            $animate.addClass(element, 'in', {
+              to: { height: element[0].scrollHeight + 'px' }
+            }).then(expandDone);
+          }
         }
 
         function expandDone() {
-          element.removeClass('collapsing');
-          element.css({height: 'auto'});
+          element.removeClass('collapsing')
+            .addClass('collapse')
+            .css({height: 'auto'});
         }
 
         function collapse() {
-          if(! element.hasClass('collapse') && ! element.hasClass('in')) {
+          if (!element.hasClass('collapse') && !element.hasClass('in')) {
             return collapseDone();
           }
 
@@ -36,15 +131,22 @@ angular.module('ui.bootstrap.collapse', [])
             .attr('aria-expanded', false)
             .attr('aria-hidden', true);
 
-          $animate.removeClass(element, 'in', {
-            to: {height: '0'}
-          }).then(collapseDone);
+          if ($animateCss) {
+            $animateCss(element, {
+              removeClass: 'in',
+              to: {height: '0'}
+            }).start().done(collapseDone);
+          } else {
+            $animate.removeClass(element, 'in', {
+              to: {height: '0'}
+            }).then(collapseDone);
+          }
         }
 
         function collapseDone() {
           element.css({height: '0'}); // Required so that collapse works when animation is disabled
-          element.removeClass('collapsing');
-          element.addClass('collapse');
+          element.removeClass('collapsing')
+            .addClass('collapse');
         }
 
         scope.$watch(attrs.collapse, function(shouldCollapse) {
diff --git a/src/collapse/docs/demo.html b/src/collapse/docs/demo.html
index b05869e0d7..462bda3ba0 100644
--- a/src/collapse/docs/demo.html
+++ b/src/collapse/docs/demo.html
@@ -1,7 +1,7 @@
 <div ng-controller="CollapseDemoCtrl">
 	<button type="button" class="btn btn-default" ng-click="isCollapsed = !isCollapsed">Toggle collapse</button>
 	<hr>
-	<div collapse="isCollapsed">
-		<div class="well well-lg">Some content</div> 
+	<div uib-collapse="isCollapsed">
+		<div class="well well-lg">Some content</div>
 	</div>
-</div>
\ No newline at end of file
+</div>
diff --git a/src/collapse/docs/readme.md b/src/collapse/docs/readme.md
index 7699f3775a..b2bd63caec 100644
--- a/src/collapse/docs/readme.md
+++ b/src/collapse/docs/readme.md
@@ -1,2 +1,8 @@
-AngularJS version of Bootstrap's collapse plugin.
-Provides a simple way to hide and show an element with a css transition
+**uib-collapse** provides a simple way to hide and show an element with a css transition
+
+### uib-collapse settings
+
+* `uib-collapse`
+  <i class="glyphicon glyphicon-eye-open"></i>
+  _(Default: `false`)_ -
+  Whether the element should be collapsed or not.
diff --git a/src/collapse/test/collapse.spec.js b/src/collapse/test/collapse.spec.js
index 8025dc8835..60547367b4 100644
--- a/src/collapse/test/collapse.spec.js
+++ b/src/collapse/test/collapse.spec.js
@@ -1,6 +1,5 @@
 describe('collapse directive', function() {
-  var scope, $compile, $animate;
-  var element;
+  var element, scope, $compile, $animate;
 
   beforeEach(module('ui.bootstrap.collapse'));
   beforeEach(module('ngAnimateMock'));
@@ -11,7 +10,7 @@ describe('collapse directive', function() {
   }));
 
   beforeEach(function() {
-    element = $compile('<div collapse="isCollapsed">Some Content</div>')(scope);
+    element = $compile('<div uib-collapse="isCollapsed">Some Content</div>')(scope);
     angular.element(document.body).append(element);
   });
 
@@ -19,65 +18,79 @@ describe('collapse directive', function() {
     element.remove();
   });
 
-  it('should be hidden on initialization if isCollapsed = true without transition', function() {
+  it('should be hidden on initialization if isCollapsed = true', function() {
     scope.isCollapsed = true;
     scope.$digest();
     expect(element.height()).toBe(0);
   });
 
-  it('should collapse if isCollapsed = true with animation on subsequent use', function() {
+  it('should collapse if isCollapsed = true on subsequent use', function() {
     scope.isCollapsed = false;
     scope.$digest();
+    $animate.flush();
     scope.isCollapsed = true;
     scope.$digest();
+    $animate.flush();
     expect(element.height()).toBe(0);
   });
 
-  it('should be shown on initialization if isCollapsed = false without transition', function() {
+  it('should be shown on initialization if isCollapsed = false', function() {
     scope.isCollapsed = false;
     scope.$digest();
+    $animate.flush();
     expect(element.height()).not.toBe(0);
   });
 
-  it('should expand if isCollapsed = false with animation on subsequent use', function() {
+  it('should expand if isCollapsed = false on subsequent use', function() {
     scope.isCollapsed = false;
     scope.$digest();
+    $animate.flush();
     scope.isCollapsed = true;
     scope.$digest();
+    $animate.flush();
     scope.isCollapsed = false;
     scope.$digest();
+    $animate.flush();
     expect(element.height()).not.toBe(0);
   });
 
-  it('should expand if isCollapsed = true with animation on subsequent uses', function() {
+  it('should expand if isCollapsed = true on subsequent uses', function() {
     scope.isCollapsed = false;
     scope.$digest();
+    $animate.flush();
     scope.isCollapsed = true;
     scope.$digest();
+    $animate.flush();
     scope.isCollapsed = false;
     scope.$digest();
+    $animate.flush();
     scope.isCollapsed = true;
     scope.$digest();
+    $animate.flush();
     expect(element.height()).toBe(0);
   });
 
   it('should change aria-expanded attribute', function() {
     scope.isCollapsed = false;
     scope.$digest();
+    $animate.flush();
     expect(element.attr('aria-expanded')).toBe('true');
 
     scope.isCollapsed = true;
     scope.$digest();
+    $animate.flush();
     expect(element.attr('aria-expanded')).toBe('false');
   });
 
   it('should change aria-hidden attribute', function() {
     scope.isCollapsed = false;
     scope.$digest();
+    $animate.flush();
     expect(element.attr('aria-hidden')).toBe('false');
 
     scope.isCollapsed = true;
     scope.$digest();
+    $animate.flush();
     expect(element.attr('aria-hidden')).toBe('true');
   });
 
@@ -85,7 +98,7 @@ describe('collapse directive', function() {
     var element;
 
     beforeEach(function() {
-      element = angular.element('<div collapse="isCollapsed"><p>Initial content</p><div ng-show="exp">Additional content</div></div>');
+      element = angular.element('<div uib-collapse="isCollapsed"><p>Initial content</p><div ng-show="exp">Additional content</div></div>');
       $compile(element)(scope);
       angular.element(document.body).append(element);
     });
@@ -98,9 +111,9 @@ describe('collapse directive', function() {
       scope.exp = false;
       scope.isCollapsed = false;
       scope.$digest();
-      $animate.triggerCallbacks();
       var collapseHeight = element.height();
       scope.exp = true;
+      $animate.flush();
       scope.$digest();
       expect(element.height()).toBeGreaterThan(collapseHeight);
     });
@@ -109,7 +122,6 @@ describe('collapse directive', function() {
       scope.exp = true;
       scope.isCollapsed = false;
       scope.$digest();
-      $animate.triggerCallbacks();
       var collapseHeight = element.height();
       scope.exp = false;
       scope.$digest();
@@ -117,3 +129,36 @@ describe('collapse directive', function() {
     });
   });
 });
+
+/* Deprecation tests below */
+
+describe('collapse deprecation', function() {
+  beforeEach(module('ui.bootstrap.collapse'));
+  beforeEach(module('ngAnimateMock'));
+
+  it('should suppress warning', function() {
+    module(function($provide) {
+      $provide.value('$collapseSuppressWarning', true);
+    });
+
+    inject(function($compile, $log, $rootScope) {
+      spyOn($log, 'warn');
+
+      var element = $compile('<div collapse="isCollapsed">Some Content</div>')($rootScope);
+      $rootScope.$digest();
+
+      expect($log.warn.calls.count()).toBe(0);
+    });
+  });
+
+  it('should give warning by default', inject(function($compile, $log, $rootScope) {
+    spyOn($log, 'warn');
+
+    var element = $compile('<div collapse="isCollapsed">Some Content</div>')($rootScope);
+    $rootScope.$digest();
+
+    expect($log.warn.calls.count()).toBe(1);
+    expect($log.warn.calls.argsFor(0)).toEqual(['collapse is now deprecated. Use uib-collapse instead.']);
+
+  }));
+});
diff --git a/src/dateparser/dateparser.js b/src/dateparser/dateparser.js
index cbd1f1b527..a135974b43 100644
--- a/src/dateparser/dateparser.js
+++ b/src/dateparser/dateparser.js
@@ -1,100 +1,113 @@
 angular.module('ui.bootstrap.dateparser', [])
 
-.service('dateParser', ['$log', '$locale', 'orderByFilter', function($log, $locale, orderByFilter) {
+.service('uibDateParser', ['$log', '$locale', 'orderByFilter', function($log, $locale, orderByFilter) {
   // Pulled from https://github.com/mbostock/d3/blob/master/src/format/requote.js
   var SPECIAL_CHARACTERS_REGEXP = /[\\\^\$\*\+\?\|\[\]\(\)\.\{\}]/g;
 
-  this.parsers = {};
-
-  var formatCodeToRegex = {
-    'yyyy': {
-      regex: '\\d{4}',
-      apply: function(value) { this.year = +value; }
-    },
-    'yy': {
-      regex: '\\d{2}',
-      apply: function(value) { this.year = +value + 2000; }
-    },
-    'y': {
-      regex: '\\d{1,4}',
-      apply: function(value) { this.year = +value; }
-    },
-    'MMMM': {
-      regex: $locale.DATETIME_FORMATS.MONTH.join('|'),
-      apply: function(value) { this.month = $locale.DATETIME_FORMATS.MONTH.indexOf(value); }
-    },
-    'MMM': {
-      regex: $locale.DATETIME_FORMATS.SHORTMONTH.join('|'),
-      apply: function(value) { this.month = $locale.DATETIME_FORMATS.SHORTMONTH.indexOf(value); }
-    },
-    'MM': {
-      regex: '0[1-9]|1[0-2]',
-      apply: function(value) { this.month = value - 1; }
-    },
-    'M': {
-      regex: '[1-9]|1[0-2]',
-      apply: function(value) { this.month = value - 1; }
-    },
-    'dd': {
-      regex: '[0-2][0-9]{1}|3[0-1]{1}',
-      apply: function(value) { this.date = +value; }
-    },
-    'd': {
-      regex: '[1-2]?[0-9]{1}|3[0-1]{1}',
-      apply: function(value) { this.date = +value; }
-    },
-    'EEEE': {
-      regex: $locale.DATETIME_FORMATS.DAY.join('|')
-    },
-    'EEE': {
-      regex: $locale.DATETIME_FORMATS.SHORTDAY.join('|')
-    },
-    'HH': {
-      regex: '(?:0|1)[0-9]|2[0-3]',
-      apply: function(value) { this.hours = +value; }
-    },
-    'hh': {
-      regex: '0[0-9]|1[0-2]',
-      apply: function(value) { this.hours = +value; }
-    },
-    'H': {
-      regex: '1?[0-9]|2[0-3]',
-      apply: function(value) { this.hours = +value; }
-    },
-    'mm': {
-      regex: '[0-5][0-9]',
-      apply: function(value) { this.minutes = +value; }
-    },
-    'm': {
-      regex: '[0-9]|[1-5][0-9]',
-      apply: function(value) { this.minutes = +value; }
-    },
-    'sss': {
-      regex: '[0-9][0-9][0-9]',
-      apply: function(value) { this.milliseconds = +value; }
-    },
-    'ss': {
-      regex: '[0-5][0-9]',
-      apply: function(value) { this.seconds = +value; }
-    },
-    's': {
-      regex: '[0-9]|[1-5][0-9]',
-      apply: function(value) { this.seconds = +value; }
-    },
-    'a': {
-      regex: $locale.DATETIME_FORMATS.AMPMS.join('|'),
-      apply: function(value) {
-        if (this.hours === 12) {
-          this.hours = 0;
-        }
-
-        if (value === 'PM') {
-          this.hours += 12;
+  var localeId;
+  var formatCodeToRegex;
+
+  this.init = function() {
+    localeId = $locale.id;
+
+    this.parsers = {};
+
+    formatCodeToRegex = {
+      'yyyy': {
+        regex: '\\d{4}',
+        apply: function(value) { this.year = +value; }
+      },
+      'yy': {
+        regex: '\\d{2}',
+        apply: function(value) { this.year = +value + 2000; }
+      },
+      'y': {
+        regex: '\\d{1,4}',
+        apply: function(value) { this.year = +value; }
+      },
+      'MMMM': {
+        regex: $locale.DATETIME_FORMATS.MONTH.join('|'),
+        apply: function(value) { this.month = $locale.DATETIME_FORMATS.MONTH.indexOf(value); }
+      },
+      'MMM': {
+        regex: $locale.DATETIME_FORMATS.SHORTMONTH.join('|'),
+        apply: function(value) { this.month = $locale.DATETIME_FORMATS.SHORTMONTH.indexOf(value); }
+      },
+      'MM': {
+        regex: '0[1-9]|1[0-2]',
+        apply: function(value) { this.month = value - 1; }
+      },
+      'M': {
+        regex: '[1-9]|1[0-2]',
+        apply: function(value) { this.month = value - 1; }
+      },
+      'dd': {
+        regex: '[0-2][0-9]{1}|3[0-1]{1}',
+        apply: function(value) { this.date = +value; }
+      },
+      'd': {
+        regex: '[1-2]?[0-9]{1}|3[0-1]{1}',
+        apply: function(value) { this.date = +value; }
+      },
+      'EEEE': {
+        regex: $locale.DATETIME_FORMATS.DAY.join('|')
+      },
+      'EEE': {
+        regex: $locale.DATETIME_FORMATS.SHORTDAY.join('|')
+      },
+      'HH': {
+        regex: '(?:0|1)[0-9]|2[0-3]',
+        apply: function(value) { this.hours = +value; }
+      },
+      'hh': {
+        regex: '0[0-9]|1[0-2]',
+        apply: function(value) { this.hours = +value; }
+      },
+      'H': {
+        regex: '1?[0-9]|2[0-3]',
+        apply: function(value) { this.hours = +value; }
+      },
+      'h': {
+        regex: '[0-9]|1[0-2]',
+        apply: function(value) { this.hours = +value; }
+      },
+      'mm': {
+        regex: '[0-5][0-9]',
+        apply: function(value) { this.minutes = +value; }
+      },
+      'm': {
+        regex: '[0-9]|[1-5][0-9]',
+        apply: function(value) { this.minutes = +value; }
+      },
+      'sss': {
+        regex: '[0-9][0-9][0-9]',
+        apply: function(value) { this.milliseconds = +value; }
+      },
+      'ss': {
+        regex: '[0-5][0-9]',
+        apply: function(value) { this.seconds = +value; }
+      },
+      's': {
+        regex: '[0-9]|[1-5][0-9]',
+        apply: function(value) { this.seconds = +value; }
+      },
+      'a': {
+        regex: $locale.DATETIME_FORMATS.AMPMS.join('|'),
+        apply: function(value) {
+          if (this.hours === 12) {
+            this.hours = 0;
+          }
+
+          if (value === 'PM') {
+            this.hours += 12;
+          }
         }
       }
-    }
+    };
   };
 
+  this.init();
+
   function createParser(format) {
     var map = [], regex = format.split('');
 
@@ -130,6 +143,10 @@ angular.module('ui.bootstrap.dateparser', [])
     format = $locale.DATETIME_FORMATS[format] || format;
     format = format.replace(SPECIAL_CHARACTERS_REGEXP, '\\$&');
 
+    if ($locale.id !== localeId) {
+      this.init();
+    }
+
     if (!this.parsers[format]) {
       this.parsers[format] = createParser(format);
     }
@@ -193,3 +210,17 @@ angular.module('ui.bootstrap.dateparser', [])
     return true;
   }
 }]);
+
+/* Deprecated dateparser below */
+
+angular.module('ui.bootstrap.dateparser')
+
+.value('$dateParserSuppressWarning', false)
+
+.service('dateParser', ['$log', '$dateParserSuppressWarning', 'uibDateParser', function($log, $dateParserSuppressWarning, uibDateParser) {
+  if (!$dateParserSuppressWarning) {
+    $log.warn('dateParser is now deprecated. Use uibDateParser instead.');
+  }
+
+  angular.extend(this, uibDateParser);
+}]);
diff --git a/src/dateparser/test/dateparser.spec.js b/src/dateparser/test/dateparser.spec.js
index 4b1da98664..fb8897c832 100644
--- a/src/dateparser/test/dateparser.spec.js
+++ b/src/dateparser/test/dateparser.spec.js
@@ -2,8 +2,8 @@ describe('date parser', function() {
   var dateParser;
 
   beforeEach(module('ui.bootstrap.dateparser'));
-  beforeEach(inject(function (_dateParser_) {
-    dateParser = _dateParser_;
+  beforeEach(inject(function (uibDateParser) {
+    dateParser = uibDateParser;
   }));
 
   function expectParse(input, format, date) {
@@ -71,7 +71,7 @@ describe('date parser', function() {
     it('should work correctly for `hh`', function() {
       expectParse('22.March.15.22', 'd.MMMM.yy.hh', undefined);
       expectParse('22.March.15.12', 'd.MMMM.yy.hh', new Date(2015, 2, 22, 12));
-      expectParse('8-March-1991-11', 'd-MMMM-yyyy-HH', new Date(1991, 2, 8, 11));
+      expectParse('8-March-1991-11', 'd-MMMM-yyyy-hh', new Date(1991, 2, 8, 11));
       expectParse('February/5/1980/00', 'MMMM/d/yyyy/hh', new Date(1980, 1, 5, 0));
       expectParse('1955/February/5 03', 'yyyy/MMMM/d hh', new Date(1955, 1, 5, 3));
       expectParse('11-08-13 23', 'd-MM-yy hh', undefined);
@@ -86,6 +86,14 @@ describe('date parser', function() {
       expectParse('11-08-13 23', 'd-MM-yy H', new Date(2013, 7, 11, 23));
     });
 
+    it('should work correctly for `h`', function() {
+      expectParse('22.March.15.12', 'd.MMMM.yy.h', new Date(2015, 2, 22, 12));
+      expectParse('8-March-1991-11', 'd-MMMM-yyyy-h', new Date(1991, 2, 8, 11));
+      expectParse('February/5/1980/0', 'MMMM/d/yyyy/h', new Date(1980, 1, 5, 0));
+      expectParse('1955/February/5 3', 'yyyy/MMMM/d h', new Date(1955, 1, 5, 3));
+      expectParse('11-08-13 3', 'd-MM-yy h', new Date(2013, 7, 11, 3));
+    });
+
     it('should work correctly for `mm`', function() {
       expectParse('22.March.15.22', 'd.MMMM.yy.mm', new Date(2015, 2, 22, 0, 22));
       expectParse('8-March-1991-59', 'd-MMMM-yyyy-mm', new Date(1991, 2, 8, 0, 59));
@@ -204,4 +212,46 @@ describe('date parser', function() {
   it('should not parse if no format is specified', function() {
     expect(dateParser.parse('21.08.1951', '')).toBe('21.08.1951');
   });
+
+  it('should reinitialize when locale changes', inject(function($locale) {
+    spyOn(dateParser, 'init').and.callThrough();
+    expect($locale.id).toBe('en-us');
+
+    $locale.id = 'en-uk';
+
+    dateParser.parse('22.March.15.22', 'd.MMMM.yy.s');
+
+    expect(dateParser.init).toHaveBeenCalled();
+  }));
+});
+
+/* Deprecation tests below */
+
+describe('date parser deprecation', function() {
+  beforeEach(module('ui.bootstrap.dateparser'));
+
+  it('should suppress warning', function() {
+    module(function($provide) {
+      $provide.value('$dateParserSuppressWarning', true);
+    });
+
+    inject(function($log, dateParser) {
+      spyOn($log, 'warn');
+
+      dateParser.parse('01.10.2015', 'dd.MM.yyyy');
+
+      expect($log.warn.calls.count()).toBe(0);
+    });
+  });
+
+  it('should give warning by default', inject(function($log) {
+    spyOn($log, 'warn');
+
+    inject(function(dateParser) {
+      dateParser.parse('01.10.2015', 'dd.MM.yyyy');
+
+      expect($log.warn.calls.count()).toBe(1);
+      expect($log.warn.calls.argsFor(0)).toEqual(['dateParser is now deprecated. Use uibDateParser instead.']);
+    });
+  }));
 });
diff --git a/src/datepicker/datepicker.js b/src/datepicker/datepicker.js
index 799c652941..6891b50645 100644
--- a/src/datepicker/datepicker.js
+++ b/src/datepicker/datepicker.js
@@ -2,7 +2,7 @@ angular.module('ui.bootstrap.datepicker', ['ui.bootstrap.dateparser', 'ui.bootst
 
 .value('$datepickerSuppressError', false)
 
-.constant('datepickerConfig', {
+.constant('uibDatepickerConfig', {
   formatDay: 'dd',
   formatMonth: 'MMMM',
   formatYear: 'yyyy',
@@ -20,7 +20,7 @@ angular.module('ui.bootstrap.datepicker', ['ui.bootstrap.dateparser', 'ui.bootst
   shortcutPropagation: false
 })
 
-.controller('DatepickerController', ['$scope', '$attrs', '$parse', '$interpolate', '$log', 'dateFilter', 'datepickerConfig', '$datepickerSuppressError', function($scope, $attrs, $parse, $interpolate, $log, dateFilter, datepickerConfig, $datepickerSuppressError) {
+.controller('UibDatepickerController', ['$scope', '$attrs', '$parse', '$interpolate', '$log', 'dateFilter', 'uibDatepickerConfig', '$datepickerSuppressError', function($scope, $attrs, $parse, $interpolate, $log, dateFilter, datepickerConfig, $datepickerSuppressError) {
   var self = this,
       ngModelCtrl = { $setViewValue: angular.noop }; // nullModelCtrl;
 
@@ -72,7 +72,7 @@ angular.module('ui.bootstrap.datepicker', ['ui.bootstrap.dateparser', 'ui.bootst
       }
     });
   } else {
-    this.activeDate =  new Date();
+    this.activeDate = new Date();
   }
 
   $scope.isActive = function(dateObject) {
@@ -191,7 +191,7 @@ angular.module('ui.bootstrap.datepicker', ['ui.bootstrap.dateparser', 'ui.bootst
   };
 
   // Listen for focus requests from popup directive
-  $scope.$on('datepicker.focus', focusElement);
+  $scope.$on('uib:datepicker.focus', focusElement);
 
   $scope.keydown = function(evt) {
     var key = $scope.keys[evt.which];
@@ -210,10 +210,8 @@ angular.module('ui.bootstrap.datepicker', ['ui.bootstrap.dateparser', 'ui.bootst
         return; // do nothing
       }
       $scope.select(self.activeDate);
-      focusElement();
     } else if (evt.ctrlKey && (key === 'up' || key === 'down')) {
       $scope.toggleMode(key === 'up' ? 1 : -1);
-      focusElement();
     } else {
       self.handleKeyDown(key, evt);
       self.refreshView();
@@ -221,262 +219,289 @@ angular.module('ui.bootstrap.datepicker', ['ui.bootstrap.dateparser', 'ui.bootst
   };
 }])
 
-.directive('datepicker', function() {
-  return {
-    restrict: 'EA',
-    replace: true,
-    templateUrl: function(element, attrs) {
-      return attrs.templateUrl || 'template/datepicker/datepicker.html';
-    },
-    scope: {
-      datepickerMode: '=?',
-      dateDisabled: '&',
-      customClass: '&',
-      shortcutPropagation: '&?'
-    },
-    require: ['datepicker', '^ngModel'],
-    controller: 'DatepickerController',
-    controllerAs: 'datepicker',
-    link: function(scope, element, attrs, ctrls) {
-      var datepickerCtrl = ctrls[0], ngModelCtrl = ctrls[1];
+.controller('UibDaypickerController', ['$scope', '$element', 'dateFilter', function(scope, $element, dateFilter) {
+  var DAYS_IN_MONTH = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
 
-      datepickerCtrl.init(ngModelCtrl);
+  this.step = { months: 1 };
+  this.element = $element;
+  function getDaysInMonth(year, month) {
+    return ((month === 1) && (year % 4 === 0) && ((year % 100 !== 0) || (year % 400 === 0))) ? 29 : DAYS_IN_MONTH[month];
+  }
+
+  this.init = function(ctrl) {
+    angular.extend(ctrl, this);
+    scope.showWeeks = ctrl.showWeeks;
+    ctrl.refreshView();
+  };
+
+  this.getDates = function(startDate, n) {
+    var dates = new Array(n), current = new Date(startDate), i = 0, date;
+    while (i < n) {
+      date = new Date(current);
+      this.fixTimeZone(date);
+      dates[i++] = date;
+      current.setDate(current.getDate() + 1);
     }
+    return dates;
   };
-})
 
-.directive('daypicker', ['dateFilter', function(dateFilter) {
-  return {
-    restrict: 'EA',
-    replace: true,
-    templateUrl: 'template/datepicker/day.html',
-    require: '^datepicker',
-    link: function(scope, element, attrs, ctrl) {
-      scope.showWeeks = ctrl.showWeeks;
+  this._refreshView = function() {
+    var year = this.activeDate.getFullYear(),
+      month = this.activeDate.getMonth(),
+      firstDayOfMonth = new Date(year, month, 1),
+      difference = this.startingDay - firstDayOfMonth.getDay(),
+      numDisplayedFromPreviousMonth = (difference > 0) ? 7 - difference : - difference,
+      firstDate = new Date(firstDayOfMonth);
 
-      ctrl.step = { months: 1 };
-      ctrl.element = element;
+    if (numDisplayedFromPreviousMonth > 0) {
+      firstDate.setDate(-numDisplayedFromPreviousMonth + 1);
+    }
 
-      var DAYS_IN_MONTH = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
-      function getDaysInMonth(year, month) {
-        return ((month === 1) && (year % 4 === 0) && ((year % 100 !== 0) || (year % 400 === 0))) ? 29 : DAYS_IN_MONTH[month];
-      }
+    // 42 is the number of days on a six-month calendar
+    var days = this.getDates(firstDate, 42);
+    for (var i = 0; i < 42; i ++) {
+      days[i] = angular.extend(this.createDateObject(days[i], this.formatDay), {
+        secondary: days[i].getMonth() !== month,
+        uid: scope.uniqueId + '-' + i
+      });
+    }
 
-      function getDates(startDate, n) {
-        var dates = new Array(n), current = new Date(startDate), i = 0, date;
-        while (i < n) {
-          date = new Date(current);
-          ctrl.fixTimeZone(date);
-          dates[i++] = date;
-          current.setDate(current.getDate() + 1);
-        }
-        return dates;
+    scope.labels = new Array(7);
+    for (var j = 0; j < 7; j++) {
+      scope.labels[j] = {
+        abbr: dateFilter(days[j].date, this.formatDayHeader),
+        full: dateFilter(days[j].date, 'EEEE')
+      };
+    }
+
+    scope.title = dateFilter(this.activeDate, this.formatDayTitle);
+    scope.rows = this.split(days, 7);
+
+    if (scope.showWeeks) {
+      scope.weekNumbers = [];
+      var thursdayIndex = (4 + 7 - this.startingDay) % 7,
+          numWeeks = scope.rows.length;
+      for (var curWeek = 0; curWeek < numWeeks; curWeek++) {
+        scope.weekNumbers.push(
+          getISO8601WeekNumber(scope.rows[curWeek][thursdayIndex].date));
       }
+    }
+  };
 
-      ctrl._refreshView = function() {
-        var year = ctrl.activeDate.getFullYear(),
-          month = ctrl.activeDate.getMonth(),
-          firstDayOfMonth = new Date(year, month, 1),
-          difference = ctrl.startingDay - firstDayOfMonth.getDay(),
-          numDisplayedFromPreviousMonth = (difference > 0) ? 7 - difference : - difference,
-          firstDate = new Date(firstDayOfMonth);
+  this.compare = function(date1, date2) {
+    return (new Date(date1.getFullYear(), date1.getMonth(), date1.getDate()) - new Date(date2.getFullYear(), date2.getMonth(), date2.getDate()));
+  };
 
-        if (numDisplayedFromPreviousMonth > 0) {
-          firstDate.setDate(-numDisplayedFromPreviousMonth + 1);
-        }
+  function getISO8601WeekNumber(date) {
+    var checkDate = new Date(date);
+    checkDate.setDate(checkDate.getDate() + 4 - (checkDate.getDay() || 7)); // Thursday
+    var time = checkDate.getTime();
+    checkDate.setMonth(0); // Compare with Jan 1
+    checkDate.setDate(1);
+    return Math.floor(Math.round((time - checkDate) / 86400000) / 7) + 1;
+  }
 
-        // 42 is the number of days on a six-month calendar
-        var days = getDates(firstDate, 42);
-        for (var i = 0; i < 42; i ++) {
-          days[i] = angular.extend(ctrl.createDateObject(days[i], ctrl.formatDay), {
-            secondary: days[i].getMonth() !== month,
-            uid: scope.uniqueId + '-' + i
-          });
-        }
+  this.handleKeyDown = function(key, evt) {
+    var date = this.activeDate.getDate();
+
+    if (key === 'left') {
+      date = date - 1;   // up
+    } else if (key === 'up') {
+      date = date - 7;   // down
+    } else if (key === 'right') {
+      date = date + 1;   // down
+    } else if (key === 'down') {
+      date = date + 7;
+    } else if (key === 'pageup' || key === 'pagedown') {
+      var month = this.activeDate.getMonth() + (key === 'pageup' ? - 1 : 1);
+      this.activeDate.setMonth(month, 1);
+      date = Math.min(getDaysInMonth(this.activeDate.getFullYear(), this.activeDate.getMonth()), date);
+    } else if (key === 'home') {
+      date = 1;
+    } else if (key === 'end') {
+      date = getDaysInMonth(this.activeDate.getFullYear(), this.activeDate.getMonth());
+    }
+    this.activeDate.setDate(date);
+  };
+}])
 
-        scope.labels = new Array(7);
-        for (var j = 0; j < 7; j++) {
-          scope.labels[j] = {
-            abbr: dateFilter(days[j].date, ctrl.formatDayHeader),
-            full: dateFilter(days[j].date, 'EEEE')
-          };
-        }
+.controller('UibMonthpickerController', ['$scope', '$element', 'dateFilter', function(scope, $element, dateFilter) {
+  this.step = { years: 1 };
+  this.element = $element;
 
-        scope.title = dateFilter(ctrl.activeDate, ctrl.formatDayTitle);
-        scope.rows = ctrl.split(days, 7);
+  this.init = function(ctrl) {
+    angular.extend(ctrl, this);
+    ctrl.refreshView();
+  };
 
-        if (scope.showWeeks) {
-          scope.weekNumbers = [];
-          var thursdayIndex = (4 + 7 - ctrl.startingDay) % 7,
-              numWeeks = scope.rows.length;
-          for (var curWeek = 0; curWeek < numWeeks; curWeek++) {
-            scope.weekNumbers.push(
-              getISO8601WeekNumber(scope.rows[curWeek][thursdayIndex].date));
-          }
-        }
-      };
+  this._refreshView = function() {
+    var months = new Array(12),
+        year = this.activeDate.getFullYear(),
+        date;
 
-      ctrl.compare = function(date1, date2) {
-        return (new Date(date1.getFullYear(), date1.getMonth(), date1.getDate()) - new Date(date2.getFullYear(), date2.getMonth(), date2.getDate()));
-      };
+    for (var i = 0; i < 12; i++) {
+      date = new Date(year, i, 1);
+      this.fixTimeZone(date);
+      months[i] = angular.extend(this.createDateObject(date, this.formatMonth), {
+        uid: scope.uniqueId + '-' + i
+      });
+    }
 
-      function getISO8601WeekNumber(date) {
-        var checkDate = new Date(date);
-        checkDate.setDate(checkDate.getDate() + 4 - (checkDate.getDay() || 7)); // Thursday
-        var time = checkDate.getTime();
-        checkDate.setMonth(0); // Compare with Jan 1
-        checkDate.setDate(1);
-        return Math.floor(Math.round((time - checkDate) / 86400000) / 7) + 1;
-      }
+    scope.title = dateFilter(this.activeDate, this.formatMonthTitle);
+    scope.rows = this.split(months, 3);
+  };
 
-      ctrl.handleKeyDown = function(key, evt) {
-        var date = ctrl.activeDate.getDate();
-
-        if (key === 'left') {
-          date = date - 1;   // up
-        } else if (key === 'up') {
-          date = date - 7;   // down
-        } else if (key === 'right') {
-          date = date + 1;   // down
-        } else if (key === 'down') {
-          date = date + 7;
-        } else if (key === 'pageup' || key === 'pagedown') {
-          var month = ctrl.activeDate.getMonth() + (key === 'pageup' ? - 1 : 1);
-          ctrl.activeDate.setMonth(month, 1);
-          date = Math.min(getDaysInMonth(ctrl.activeDate.getFullYear(), ctrl.activeDate.getMonth()), date);
-        } else if (key === 'home') {
-          date = 1;
-        } else if (key === 'end') {
-          date = getDaysInMonth(ctrl.activeDate.getFullYear(), ctrl.activeDate.getMonth());
-        }
-        ctrl.activeDate.setDate(date);
-      };
+  this.compare = function(date1, date2) {
+    return new Date(date1.getFullYear(), date1.getMonth()) - new Date(date2.getFullYear(), date2.getMonth());
+  };
 
-      ctrl.refreshView();
+  this.handleKeyDown = function(key, evt) {
+    var date = this.activeDate.getMonth();
+
+    if (key === 'left') {
+      date = date - 1;   // up
+    } else if (key === 'up') {
+      date = date - 3;   // down
+    } else if (key === 'right') {
+      date = date + 1;   // down
+    } else if (key === 'down') {
+      date = date + 3;
+    } else if (key === 'pageup' || key === 'pagedown') {
+      var year = this.activeDate.getFullYear() + (key === 'pageup' ? - 1 : 1);
+      this.activeDate.setFullYear(year);
+    } else if (key === 'home') {
+      date = 0;
+    } else if (key === 'end') {
+      date = 11;
     }
+    this.activeDate.setMonth(date);
   };
 }])
 
-.directive('monthpicker', ['dateFilter', function(dateFilter) {
-  return {
-    restrict: 'EA',
-    replace: true,
-    templateUrl: 'template/datepicker/month.html',
-    require: '^datepicker',
-    link: function(scope, element, attrs, ctrl) {
-      ctrl.step = { years: 1 };
-      ctrl.element = element;
-
-      ctrl._refreshView = function() {
-        var months = new Array(12),
-            year = ctrl.activeDate.getFullYear(),
-            date;
-
-        for (var i = 0; i < 12; i++) {
-          date = new Date(year, i, 1);
-          ctrl.fixTimeZone(date);
-          months[i] = angular.extend(ctrl.createDateObject(date, ctrl.formatMonth), {
-            uid: scope.uniqueId + '-' + i
-          });
-        }
+.controller('UibYearpickerController', ['$scope', '$element', 'dateFilter', function(scope, $element, dateFilter) {
+  var range;
+  this.element = $element;
 
-        scope.title = dateFilter(ctrl.activeDate, ctrl.formatMonthTitle);
-        scope.rows = ctrl.split(months, 3);
-      };
+  function getStartingYear(year) {
+    return parseInt((year - 1) / range, 10) * range + 1;
+  }
 
-      ctrl.compare = function(date1, date2) {
-        return new Date(date1.getFullYear(), date1.getMonth()) - new Date(date2.getFullYear(), date2.getMonth());
-      };
+  this.yearpickerInit = function() {
+    range = this.yearRange;
+    this.step = { years: range };
+  };
 
-      ctrl.handleKeyDown = function(key, evt) {
-        var date = ctrl.activeDate.getMonth();
-
-        if (key === 'left') {
-          date = date - 1;   // up
-        } else if (key === 'up') {
-          date = date - 3;   // down
-        } else if (key === 'right') {
-          date = date + 1;   // down
-        } else if (key === 'down') {
-          date = date + 3;
-        } else if (key === 'pageup' || key === 'pagedown') {
-          var year = ctrl.activeDate.getFullYear() + (key === 'pageup' ? - 1 : 1);
-          ctrl.activeDate.setFullYear(year);
-        } else if (key === 'home') {
-          date = 0;
-        } else if (key === 'end') {
-          date = 11;
-        }
-        ctrl.activeDate.setMonth(date);
-      };
+  this._refreshView = function() {
+    var years = new Array(range), date;
 
-      ctrl.refreshView();
+    for (var i = 0, start = getStartingYear(this.activeDate.getFullYear()); i < range; i++) {
+      date = new Date(start + i, 0, 1);
+      this.fixTimeZone(date);
+      years[i] = angular.extend(this.createDateObject(date, this.formatYear), {
+        uid: scope.uniqueId + '-' + i
+      });
+    }
+
+    scope.title = [years[0].label, years[range - 1].label].join(' - ');
+    scope.rows = this.split(years, 5);
+  };
+
+  this.compare = function(date1, date2) {
+    return date1.getFullYear() - date2.getFullYear();
+  };
+
+  this.handleKeyDown = function(key, evt) {
+    var date = this.activeDate.getFullYear();
+
+    if (key === 'left') {
+      date = date - 1;   // up
+    } else if (key === 'up') {
+      date = date - 5;   // down
+    } else if (key === 'right') {
+      date = date + 1;   // down
+    } else if (key === 'down') {
+      date = date + 5;
+    } else if (key === 'pageup' || key === 'pagedown') {
+      date += (key === 'pageup' ? - 1 : 1) * this.step.years;
+    } else if (key === 'home') {
+      date = getStartingYear(this.activeDate.getFullYear());
+    } else if (key === 'end') {
+      date = getStartingYear(this.activeDate.getFullYear()) + range - 1;
     }
+    this.activeDate.setFullYear(date);
   };
 }])
 
-.directive('yearpicker', ['dateFilter', function(dateFilter) {
+.directive('uibDatepicker', function() {
   return {
-    restrict: 'EA',
     replace: true,
-    templateUrl: 'template/datepicker/year.html',
-    require: '^datepicker',
-    link: function(scope, element, attrs, ctrl) {
-      var range = ctrl.yearRange;
-
-      ctrl.step = { years: range };
-      ctrl.element = element;
+    templateUrl: function(element, attrs) {
+      return attrs.templateUrl || 'template/datepicker/datepicker.html';
+    },
+    scope: {
+      datepickerMode: '=?',
+      dateDisabled: '&',
+      customClass: '&',
+      shortcutPropagation: '&?'
+    },
+    require: ['uibDatepicker', '^ngModel'],
+    controller: 'UibDatepickerController',
+    controllerAs: 'datepicker',
+    link: function(scope, element, attrs, ctrls) {
+      var datepickerCtrl = ctrls[0], ngModelCtrl = ctrls[1];
 
-      function getStartingYear( year ) {
-        return parseInt((year - 1) / range, 10) * range + 1;
-      }
+      datepickerCtrl.init(ngModelCtrl);
+    }
+  };
+})
 
-      ctrl._refreshView = function() {
-        var years = new Array(range), date;
+.directive('uibDaypicker', function() {
+  return {
+    replace: true,
+    templateUrl: 'template/datepicker/day.html',
+    require: ['^?uibDatepicker', 'uibDaypicker', '^?datepicker'],
+    controller: 'UibDaypickerController',
+    link: function(scope, element, attrs, ctrls) {
+      var datepickerCtrl = ctrls[0] || ctrls[2],
+        daypickerCtrl = ctrls[1];
 
-        for (var i = 0, start = getStartingYear(ctrl.activeDate.getFullYear()); i < range; i++) {
-          date = new Date(start + i, 0, 1);
-          ctrl.fixTimeZone(date);
-          years[i] = angular.extend(ctrl.createDateObject(date, ctrl.formatYear), {
-            uid: scope.uniqueId + '-' + i
-          });
-        }
+      daypickerCtrl.init(datepickerCtrl);
+    }
+  };
+})
 
-        scope.title = [years[0].label, years[range - 1].label].join(' - ');
-        scope.rows = ctrl.split(years, 5);
-      };
+.directive('uibMonthpicker', function() {
+  return {
+    replace: true,
+    templateUrl: 'template/datepicker/month.html',
+    require: ['^?uibDatepicker', 'uibMonthpicker', '^?datepicker'],
+    controller: 'UibMonthpickerController',
+    link: function(scope, element, attrs, ctrls) {
+      var datepickerCtrl = ctrls[0] || ctrls[2],
+        monthpickerCtrl = ctrls[1];
 
-      ctrl.compare = function(date1, date2) {
-        return date1.getFullYear() - date2.getFullYear();
-      };
+      monthpickerCtrl.init(datepickerCtrl);
+    }
+  };
+})
 
-      ctrl.handleKeyDown = function(key, evt) {
-        var date = ctrl.activeDate.getFullYear();
-
-        if (key === 'left') {
-          date = date - 1;   // up
-        } else if (key === 'up') {
-          date = date - 5;   // down
-        } else if (key === 'right') {
-          date = date + 1;   // down
-        } else if (key === 'down') {
-          date = date + 5;
-        } else if (key === 'pageup' || key === 'pagedown') {
-          date += (key === 'pageup' ? - 1 : 1) * ctrl.step.years;
-        } else if (key === 'home') {
-          date = getStartingYear(ctrl.activeDate.getFullYear());
-        } else if (key === 'end') {
-          date = getStartingYear(ctrl.activeDate.getFullYear()) + range - 1;
-        }
-        ctrl.activeDate.setFullYear(date);
-      };
+.directive('uibYearpicker', function() {
+  return {
+    replace: true,
+    templateUrl: 'template/datepicker/year.html',
+    require: ['^?uibDatepicker', 'uibYearpicker', '^?datepicker'],
+    controller: 'UibYearpickerController',
+    link: function(scope, element, attrs, ctrls) {
+      var ctrl = ctrls[0] || ctrls[2];
+      angular.extend(ctrl, ctrls[1]);
+      ctrl.yearpickerInit();
 
       ctrl.refreshView();
     }
   };
-}])
+})
 
-.constant('datepickerPopupConfig', {
+.constant('uibDatepickerPopupConfig', {
   datepickerPopup: 'yyyy-MM-dd',
   datepickerPopupTemplateUrl: 'template/datepicker/popup.html',
   datepickerTemplateUrl: 'template/datepicker/datepicker.html',
@@ -494,310 +519,671 @@ angular.module('ui.bootstrap.datepicker', ['ui.bootstrap.dateparser', 'ui.bootst
   onOpenFocus: true
 })
 
-.directive('datepickerPopup', ['$compile', '$parse', '$document', '$rootScope', '$position', 'dateFilter', 'dateParser', 'datepickerPopupConfig', '$timeout',
-function($compile, $parse, $document, $rootScope, $position, dateFilter, dateParser, datepickerPopupConfig, $timeout) {
-  return {
-    restrict: 'EA',
-    require: 'ngModel',
-    scope: {
-      isOpen: '=?',
-      currentText: '@',
-      clearText: '@',
-      closeText: '@',
-      dateDisabled: '&',
-      customClass: '&'
-    },
-    link: function(scope, element, attrs, ngModel) {
-      var dateFormat,
-          closeOnDateSelection = angular.isDefined(attrs.closeOnDateSelection) ? scope.$parent.$eval(attrs.closeOnDateSelection) : datepickerPopupConfig.closeOnDateSelection,
-          appendToBody = angular.isDefined(attrs.datepickerAppendToBody) ? scope.$parent.$eval(attrs.datepickerAppendToBody) : datepickerPopupConfig.appendToBody,
-          onOpenFocus = angular.isDefined(attrs.onOpenFocus) ? scope.$parent.$eval(attrs.onOpenFocus) : datepickerPopupConfig.onOpenFocus,
-          datepickerPopupTemplateUrl = angular.isDefined(attrs.datepickerPopupTemplateUrl) ? attrs.datepickerPopupTemplateUrl : datepickerPopupConfig.datepickerPopupTemplateUrl,
-          datepickerTemplateUrl = angular.isDefined(attrs.datepickerTemplateUrl) ? attrs.datepickerTemplateUrl : datepickerPopupConfig.datepickerTemplateUrl;
-
-      scope.showButtonBar = angular.isDefined(attrs.showButtonBar) ? scope.$parent.$eval(attrs.showButtonBar) : datepickerPopupConfig.showButtonBar;
-
-      scope.getText = function(key) {
-        return scope[key + 'Text'] || datepickerPopupConfig[key + 'Text'];
-      };
-
-      var isHtml5DateInput = false;
-      if (datepickerPopupConfig.html5Types[attrs.type]) {
-        dateFormat = datepickerPopupConfig.html5Types[attrs.type];
-        isHtml5DateInput = true;
-      } else {
-        dateFormat = attrs.datepickerPopup || datepickerPopupConfig.datepickerPopup;
-        attrs.$observe('datepickerPopup', function(value, oldValue) {
-            var newDateFormat = value || datepickerPopupConfig.datepickerPopup;
-            // Invalidate the $modelValue to ensure that formatters re-run
-            // FIXME: Refactor when PR is merged: https://github.com/angular/angular.js/pull/10764
-            if (newDateFormat !== dateFormat) {
-              dateFormat = newDateFormat;
-              ngModel.$modelValue = null;
-
-              if (!dateFormat) {
-                throw new Error('datepickerPopup must have a date format specified.');
-              }
+.controller('UibDatepickerPopupController', ['$scope', '$element', '$attrs', '$compile', '$parse', '$document', '$rootScope', '$uibPosition', 'dateFilter', 'uibDateParser', 'uibDatepickerPopupConfig', '$timeout',
+function(scope, element, attrs, $compile, $parse, $document, $rootScope, $position, dateFilter, dateParser, datepickerPopupConfig, $timeout) {
+  var self = this;
+  var cache = {},
+    isHtml5DateInput = false;
+  var dateFormat, closeOnDateSelection, appendToBody, onOpenFocus,
+    datepickerPopupTemplateUrl, datepickerTemplateUrl, popupEl, datepickerEl,
+    ngModel, $popup;
+
+  scope.watchData = {};
+
+  this.init = function(_ngModel_) {
+    ngModel = _ngModel_;
+    closeOnDateSelection = angular.isDefined(attrs.closeOnDateSelection) ? scope.$parent.$eval(attrs.closeOnDateSelection) : datepickerPopupConfig.closeOnDateSelection;
+    appendToBody = angular.isDefined(attrs.datepickerAppendToBody) ? scope.$parent.$eval(attrs.datepickerAppendToBody) : datepickerPopupConfig.appendToBody;
+    onOpenFocus = angular.isDefined(attrs.onOpenFocus) ? scope.$parent.$eval(attrs.onOpenFocus) : datepickerPopupConfig.onOpenFocus;
+    datepickerPopupTemplateUrl = angular.isDefined(attrs.datepickerPopupTemplateUrl) ? attrs.datepickerPopupTemplateUrl : datepickerPopupConfig.datepickerPopupTemplateUrl;
+    datepickerTemplateUrl = angular.isDefined(attrs.datepickerTemplateUrl) ? attrs.datepickerTemplateUrl : datepickerPopupConfig.datepickerTemplateUrl;
+
+    scope.showButtonBar = angular.isDefined(attrs.showButtonBar) ? scope.$parent.$eval(attrs.showButtonBar) : datepickerPopupConfig.showButtonBar;
+
+    if (datepickerPopupConfig.html5Types[attrs.type]) {
+      dateFormat = datepickerPopupConfig.html5Types[attrs.type];
+      isHtml5DateInput = true;
+    } else {
+      dateFormat = attrs.datepickerPopup || datepickerPopupConfig.datepickerPopup;
+      attrs.$observe('uibDatepickerPopup', function(value, oldValue) {
+          var newDateFormat = value || datepickerPopupConfig.datepickerPopup;
+          // Invalidate the $modelValue to ensure that formatters re-run
+          // FIXME: Refactor when PR is merged: https://github.com/angular/angular.js/pull/10764
+          if (newDateFormat !== dateFormat) {
+            dateFormat = newDateFormat;
+            ngModel.$modelValue = null;
+
+            if (!dateFormat) {
+              throw new Error('uibDatepickerPopup must have a date format specified.');
             }
-        });
-      }
-
-      if (!dateFormat) {
-        throw new Error('datepickerPopup must have a date format specified.');
-      }
+          }
+      });
+    }
 
-      if (isHtml5DateInput && attrs.datepickerPopup) {
-        throw new Error('HTML5 date input types do not support custom formats.');
-      }
+    if (!dateFormat) {
+      throw new Error('uibDatepickerPopup must have a date format specified.');
+    }
 
-      // popup element used to display calendar
-      var popupEl = angular.element('<div datepicker-popup-wrap><div datepicker></div></div>');
-      popupEl.attr({
-        'ng-model': 'date',
-        'ng-change': 'dateSelection(date)',
-        'template-url': datepickerPopupTemplateUrl
-      });
+    if (isHtml5DateInput && attrs.datepickerPopup) {
+      throw new Error('HTML5 date input types do not support custom formats.');
+    }
 
-      function cameltoDash(string) {
-        return string.replace(/([A-Z])/g, function($1) { return '-' + $1.toLowerCase(); });
-      }
+    // popup element used to display calendar
+    popupEl = angular.element('<div uib-datepicker-popup-wrap><div uib-datepicker></div></div>');
+    popupEl.attr({
+      'ng-model': 'date',
+      'ng-change': 'dateSelection(date)',
+      'template-url': datepickerPopupTemplateUrl
+    });
 
-      // datepicker element
-      var datepickerEl = angular.element(popupEl.children()[0]);
-      datepickerEl.attr('template-url', datepickerTemplateUrl);
+    // datepicker element
+    datepickerEl = angular.element(popupEl.children()[0]);
+    datepickerEl.attr('template-url', datepickerTemplateUrl);
 
-      if (isHtml5DateInput) {
-        if (attrs.type === 'month') {
-          datepickerEl.attr('datepicker-mode', '"month"');
-          datepickerEl.attr('min-mode', 'month');
-        }
+    if (isHtml5DateInput) {
+      if (attrs.type === 'month') {
+        datepickerEl.attr('datepicker-mode', '"month"');
+        datepickerEl.attr('min-mode', 'month');
       }
+    }
 
-      if (attrs.datepickerOptions) {
-        var options = scope.$parent.$eval(attrs.datepickerOptions);
-        if (options && options.initDate) {
-          scope.initDate = options.initDate;
-          datepickerEl.attr('init-date', 'initDate');
-          delete options.initDate;
-        }
-        angular.forEach(options, function(value, option) {
-          datepickerEl.attr( cameltoDash(option), value );
-        });
+    if (attrs.datepickerOptions) {
+      var options = scope.$parent.$eval(attrs.datepickerOptions);
+      if (options && options.initDate) {
+        scope.initDate = options.initDate;
+        datepickerEl.attr('init-date', 'initDate');
+        delete options.initDate;
       }
+      angular.forEach(options, function(value, option) {
+        datepickerEl.attr(cameltoDash(option), value);
+      });
+    }
 
-      scope.watchData = {};
-      angular.forEach(['minMode', 'maxMode', 'minDate', 'maxDate', 'datepickerMode', 'initDate', 'shortcutPropagation'], function(key) {
-        if (attrs[key]) {
-          var getAttribute = $parse(attrs[key]);
-          scope.$parent.$watch(getAttribute, function(value) {
-            scope.watchData[key] = value;
-          });
-          datepickerEl.attr(cameltoDash(key), 'watchData.' + key);
-
-          // Propagate changes from datepicker to outside
-          if (key === 'datepickerMode') {
-            var setAttribute = getAttribute.assign;
-            scope.$watch('watchData.' + key, function(value, oldvalue) {
-              if (angular.isFunction(setAttribute) && value !== oldvalue) {
-                setAttribute(scope.$parent, value);
-              }
-            });
+    angular.forEach(['minMode', 'maxMode', 'minDate', 'maxDate', 'datepickerMode', 'initDate', 'shortcutPropagation'], function(key) {
+      if (attrs[key]) {
+        var getAttribute = $parse(attrs[key]);
+        scope.$parent.$watch(getAttribute, function(value) {
+          scope.watchData[key] = value;
+          if (key === 'minDate' || key === 'maxDate') {
+            cache[key] = new Date(value);
           }
+        });
+        datepickerEl.attr(cameltoDash(key), 'watchData.' + key);
+
+        // Propagate changes from datepicker to outside
+        if (key === 'datepickerMode') {
+          var setAttribute = getAttribute.assign;
+          scope.$watch('watchData.' + key, function(value, oldvalue) {
+            if (angular.isFunction(setAttribute) && value !== oldvalue) {
+              setAttribute(scope.$parent, value);
+            }
+          });
         }
-      });
-      if (attrs.dateDisabled) {
-        datepickerEl.attr('date-disabled', 'dateDisabled({ date: date, mode: mode })');
       }
+    });
+    if (attrs.dateDisabled) {
+      datepickerEl.attr('date-disabled', 'dateDisabled({ date: date, mode: mode })');
+    }
 
-      if (attrs.showWeeks) {
-        datepickerEl.attr('show-weeks', attrs.showWeeks);
-      }
+    if (attrs.showWeeks) {
+      datepickerEl.attr('show-weeks', attrs.showWeeks);
+    }
 
-      if (attrs.customClass) {
-        datepickerEl.attr('custom-class', 'customClass({ date: date, mode: mode })');
-      }
+    if (attrs.customClass) {
+      datepickerEl.attr('custom-class', 'customClass({ date: date, mode: mode })');
+    }
 
-      function parseDate(viewValue) {
-        if (angular.isNumber(viewValue)) {
-          // presumably timestamp to date object
-          viewValue = new Date(viewValue);
-        }
+    if (!isHtml5DateInput) {
+      // Internal API to maintain the correct ng-invalid-[key] class
+      ngModel.$$parserName = 'date';
+      ngModel.$validators.date = validator;
+      ngModel.$parsers.unshift(parseDate);
+      ngModel.$formatters.push(function(value) {
+        scope.date = value;
+        return ngModel.$isEmpty(value) ? value : dateFilter(value, dateFormat);
+      });
+    } else {
+      ngModel.$formatters.push(function(value) {
+        scope.date = value;
+        return value;
+      });
+    }
 
-        if (!viewValue) {
-          return null;
-        } else if (angular.isDate(viewValue) && !isNaN(viewValue)) {
-          return viewValue;
-        } else if (angular.isString(viewValue)) {
-          var date = dateParser.parse(viewValue, dateFormat, scope.date);
-          if (isNaN(date)) {
-            return undefined;
-          } else {
-            return date;
-          }
-        } else {
-          return undefined;
-        }
-      }
+    // Detect changes in the view from the text box
+    ngModel.$viewChangeListeners.push(function() {
+      scope.date = dateParser.parse(ngModel.$viewValue, dateFormat, scope.date);
+    });
 
-      function validator(modelValue, viewValue) {
-        var value = modelValue || viewValue;
+    element.bind('keydown', inputKeydownBind);
 
-        if (!attrs.ngRequired && !value) {
-          return true;
-        }
+    $popup = $compile(popupEl)(scope);
+    // Prevent jQuery cache memory leak (template is now redundant after linking)
+    popupEl.remove();
 
-        if (angular.isNumber(value)) {
-          value = new Date(value);
-        }
-        if (!value) {
-          return true;
-        } else if (angular.isDate(value) && !isNaN(value)) {
-          return true;
-        } else if (angular.isString(value)) {
-          var date = dateParser.parse(value, dateFormat);
-          return !isNaN(date);
-        } else {
-          return false;
+    if (appendToBody) {
+      $document.find('body').append($popup);
+    } else {
+      element.after($popup);
+    }
+
+    scope.$on('$destroy', function() {
+      if (scope.isOpen === true) {
+        if (!$rootScope.$$phase) {
+          scope.$apply(function() {
+            scope.isOpen = false;
+          });
         }
       }
 
-      if (!isHtml5DateInput) {
-        // Internal API to maintain the correct ng-invalid-[key] class
-        ngModel.$$parserName = 'date';
-        ngModel.$validators.date = validator;
-        ngModel.$parsers.unshift(parseDate);
-        ngModel.$formatters.push(function(value) {
-          scope.date = value;
-          return ngModel.$isEmpty(value) ? value : dateFilter(value, dateFormat);
-        });
-      } else {
-        ngModel.$formatters.push(function(value) {
-          scope.date = value;
-          return value;
-        });
-      }
+      $popup.remove();
+      element.unbind('keydown', inputKeydownBind);
+      $document.unbind('click', documentClickBind);
+    });
+  };
 
-      // Inner change
-      scope.dateSelection = function(dt) {
-        if (angular.isDefined(dt)) {
-          scope.date = dt;
-        }
-        var date = scope.date ? dateFilter(scope.date, dateFormat) : null; // Setting to NULL is necessary for form validators to function
-        element.val(date);
-        ngModel.$setViewValue(date);
+  scope.getText = function(key) {
+    return scope[key + 'Text'] || datepickerPopupConfig[key + 'Text'];
+  };
 
-        if (closeOnDateSelection) {
-          scope.isOpen = false;
-          element[0].focus();
-        }
-      };
+  scope.isDisabled = function(date) {
+    if (date === 'today') {
+      date = new Date();
+    }
 
-      // Detect changes in the view from the text box
-      ngModel.$viewChangeListeners.push(function() {
-        scope.date = dateParser.parse(ngModel.$viewValue, dateFormat, scope.date);
-      });
+    return ((scope.watchData.minDate && scope.compare(date, cache.minDate) < 0) ||
+      (scope.watchData.maxDate && scope.compare(date, cache.maxDate) > 0));
+  };
 
-      var documentClickBind = function(event) {
-        if (scope.isOpen && !element[0].contains(event.target)) {
-          scope.$apply(function() {
-            scope.isOpen = false;
-          });
-        }
-      };
+  scope.compare = function(date1, date2) {
+    return (new Date(date1.getFullYear(), date1.getMonth(), date1.getDate()) - new Date(date2.getFullYear(), date2.getMonth(), date2.getDate()));
+  };
 
-      var inputKeydownBind = function(evt) {
-        if (evt.which === 27 && scope.isOpen) {
-          evt.preventDefault();
-          evt.stopPropagation();
-          scope.$apply(function() {
-            scope.isOpen = false;
-          });
-          element[0].focus();
-        } else if (evt.which === 40 && !scope.isOpen) {
-          evt.preventDefault();
-          evt.stopPropagation();
-          scope.$apply(function() {
-            scope.isOpen = true;
-          });
-        }
-      };
-      element.bind('keydown', inputKeydownBind);
+  // Inner change
+  scope.dateSelection = function(dt) {
+    if (angular.isDefined(dt)) {
+      scope.date = dt;
+    }
+    var date = scope.date ? dateFilter(scope.date, dateFormat) : null; // Setting to NULL is necessary for form validators to function
+    element.val(date);
+    ngModel.$setViewValue(date);
 
-      scope.keydown = function(evt) {
-        if (evt.which === 27) {
-          scope.isOpen = false;
-          element[0].focus();
-        }
-      };
+    if (closeOnDateSelection) {
+      scope.isOpen = false;
+      element[0].focus();
+    }
+  };
 
-      scope.$watch('isOpen', function(value) {
-        if (value) {
-          scope.position = appendToBody ? $position.offset(element) : $position.position(element);
-          scope.position.top = scope.position.top + element.prop('offsetHeight');
+  scope.keydown = function(evt) {
+    if (evt.which === 27) {
+      scope.isOpen = false;
+      element[0].focus();
+    }
+  };
 
-          $timeout(function() {
-            if (onOpenFocus) {
-              scope.$broadcast('datepicker.focus');
-            }
-            $document.bind('click', documentClickBind);
-          }, 0, false);
-        } else {
-          $document.unbind('click', documentClickBind);
-        }
-      });
+  scope.select = function(date) {
+    if (date === 'today') {
+      var today = new Date();
+      if (angular.isDate(scope.date)) {
+        date = new Date(scope.date);
+        date.setFullYear(today.getFullYear(), today.getMonth(), today.getDate());
+      } else {
+        date = new Date(today.setHours(0, 0, 0, 0));
+      }
+    }
+    scope.dateSelection(date);
+  };
 
-      scope.select = function(date) {
-        if (date === 'today') {
-          var today = new Date();
-          if (angular.isDate(scope.date)) {
-            date = new Date(scope.date);
-            date.setFullYear(today.getFullYear(), today.getMonth(), today.getDate());
-          } else {
-            date = new Date(today.setHours(0, 0, 0, 0));
-          }
+  scope.close = function() {
+    scope.isOpen = false;
+    element[0].focus();
+  };
+
+  scope.$watch('isOpen', function(value) {
+    if (value) {
+      scope.position = appendToBody ? $position.offset(element) : $position.position(element);
+      scope.position.top = scope.position.top + element.prop('offsetHeight');
+
+      $timeout(function() {
+        if (onOpenFocus) {
+          scope.$broadcast('uib:datepicker.focus');
         }
-        scope.dateSelection(date);
-      };
+        $document.bind('click', documentClickBind);
+      }, 0, false);
+    } else {
+      $document.unbind('click', documentClickBind);
+    }
+  });
 
-      scope.close = function() {
-        scope.isOpen = false;
-        element[0].focus();
-      };
+  function cameltoDash(string) {
+    return string.replace(/([A-Z])/g, function($1) { return '-' + $1.toLowerCase(); });
+  }
 
-      var $popup = $compile(popupEl)(scope);
-      // Prevent jQuery cache memory leak (template is now redundant after linking)
-      popupEl.remove();
+  function parseDate(viewValue) {
+    if (angular.isNumber(viewValue)) {
+      // presumably timestamp to date object
+      viewValue = new Date(viewValue);
+    }
 
-      if (appendToBody) {
-        $document.find('body').append($popup);
+    if (!viewValue) {
+      return null;
+    } else if (angular.isDate(viewValue) && !isNaN(viewValue)) {
+      return viewValue;
+    } else if (angular.isString(viewValue)) {
+      var date = dateParser.parse(viewValue, dateFormat, scope.date);
+      if (isNaN(date)) {
+        return undefined;
       } else {
-        element.after($popup);
+        return date;
       }
+    } else {
+      return undefined;
+    }
+  }
 
-      scope.$on('$destroy', function() {
-        if (scope.isOpen === true) {
-          if (!$rootScope.$$phase) {
-            scope.$apply(function() {
-              scope.isOpen = false;
-            });
-          }
-        }
+  function validator(modelValue, viewValue) {
+    var value = modelValue || viewValue;
 
-        $popup.remove();
-        element.unbind('keydown', inputKeydownBind);
-        $document.unbind('click', documentClickBind);
-      });
+    if (!attrs.ngRequired && !value) {
+      return true;
     }
-  };
-}])
 
-.directive('datepickerPopupWrap', function() {
-  return {
-    restrict:'EA',
-    replace: true,
-    transclude: true,
-    templateUrl: function(element, attrs) {
-      return attrs.templateUrl || 'template/datepicker/popup.html';
+    if (angular.isNumber(value)) {
+      value = new Date(value);
     }
-  };
-});
+    if (!value) {
+      return true;
+    } else if (angular.isDate(value) && !isNaN(value)) {
+      return true;
+    } else if (angular.isString(value)) {
+      var date = dateParser.parse(value, dateFormat);
+      return !isNaN(date);
+    } else {
+      return false;
+    }
+  }
+
+  function documentClickBind(event) {
+    var popup = $popup[0];
+    var dpContainsTarget = element[0].contains(event.target);
+    // The popup node may not be an element node
+    // In some browsers (IE) only element nodes have the 'contains' function
+    var popupContainsTarget = popup.contains !== undefined && popup.contains(event.target);
+    if (scope.isOpen && !(dpContainsTarget || popupContainsTarget)) {
+      scope.$apply(function() {
+        scope.isOpen = false;
+      });
+    }
+  }
+
+  function inputKeydownBind(evt) {
+    if (evt.which === 27 && scope.isOpen) {
+      evt.preventDefault();
+      evt.stopPropagation();
+      scope.$apply(function() {
+        scope.isOpen = false;
+      });
+      element[0].focus();
+    } else if (evt.which === 40 && !scope.isOpen) {
+      evt.preventDefault();
+      evt.stopPropagation();
+      scope.$apply(function() {
+        scope.isOpen = true;
+      });
+    }
+  }
+}])
+
+.directive('uibDatepickerPopup', function() {
+  return {
+    require: ['ngModel', 'uibDatepickerPopup'],
+    controller: 'UibDatepickerPopupController',
+    scope: {
+      isOpen: '=?',
+      currentText: '@',
+      clearText: '@',
+      closeText: '@',
+      dateDisabled: '&',
+      customClass: '&'
+    },
+    link: function(scope, element, attrs, ctrls) {
+      var ngModel = ctrls[0],
+        ctrl = ctrls[1];
+
+      ctrl.init(ngModel);
+    }
+  };
+})
+
+.directive('uibDatepickerPopupWrap', function() {
+  return {
+    replace: true,
+    transclude: true,
+    templateUrl: function(element, attrs) {
+      return attrs.templateUrl || 'template/datepicker/popup.html';
+    }
+  };
+});
+
+/* Deprecated datepicker below */
+
+angular.module('ui.bootstrap.datepicker')
+
+.value('$datepickerSuppressWarning', false)
+
+.controller('DatepickerController', ['$scope', '$attrs', '$parse', '$interpolate', '$log', 'dateFilter', 'uibDatepickerConfig', '$datepickerSuppressError', '$datepickerSuppressWarning', function($scope, $attrs, $parse, $interpolate, $log, dateFilter, datepickerConfig, $datepickerSuppressError, $datepickerSuppressWarning) {
+  if (!$datepickerSuppressWarning) {
+    $log.warn('DatepickerController is now deprecated. Use UibDatepickerController instead.');
+  }
+
+  var self = this,
+    ngModelCtrl = { $setViewValue: angular.noop }; // nullModelCtrl;
+
+  this.modes = ['day', 'month', 'year'];
+
+  angular.forEach(['formatDay', 'formatMonth', 'formatYear', 'formatDayHeader', 'formatDayTitle', 'formatMonthTitle',
+    'showWeeks', 'startingDay', 'yearRange', 'shortcutPropagation'], function(key, index) {
+    self[key] = angular.isDefined($attrs[key]) ? (index < 6 ? $interpolate($attrs[key])($scope.$parent) : $scope.$parent.$eval($attrs[key])) : datepickerConfig[key];
+  });
+
+  angular.forEach(['minDate', 'maxDate'], function(key) {
+    if ($attrs[key]) {
+      $scope.$parent.$watch($parse($attrs[key]), function(value) {
+        self[key] = value ? new Date(value) : null;
+        self.refreshView();
+      });
+    } else {
+      self[key] = datepickerConfig[key] ? new Date(datepickerConfig[key]) : null;
+    }
+  });
+
+  angular.forEach(['minMode', 'maxMode'], function(key) {
+    if ($attrs[key]) {
+      $scope.$parent.$watch($parse($attrs[key]), function(value) {
+        self[key] = angular.isDefined(value) ? value : $attrs[key];
+        $scope[key] = self[key];
+        if ((key == 'minMode' && self.modes.indexOf($scope.datepickerMode) < self.modes.indexOf(self[key])) || (key == 'maxMode' && self.modes.indexOf($scope.datepickerMode) > self.modes.indexOf(self[key]))) {
+          $scope.datepickerMode = self[key];
+        }
+      });
+    } else {
+      self[key] = datepickerConfig[key] || null;
+      $scope[key] = self[key];
+    }
+  });
+
+  $scope.datepickerMode = $scope.datepickerMode || datepickerConfig.datepickerMode;
+  $scope.uniqueId = 'datepicker-' + $scope.$id + '-' + Math.floor(Math.random() * 10000);
+
+  if (angular.isDefined($attrs.initDate)) {
+    this.activeDate = $scope.$parent.$eval($attrs.initDate) || new Date();
+    $scope.$parent.$watch($attrs.initDate, function(initDate) {
+      if (initDate && (ngModelCtrl.$isEmpty(ngModelCtrl.$modelValue) || ngModelCtrl.$invalid)) {
+        self.activeDate = initDate;
+        self.refreshView();
+      }
+    });
+  } else {
+    this.activeDate = new Date();
+  }
+
+  $scope.isActive = function(dateObject) {
+    if (self.compare(dateObject.date, self.activeDate) === 0) {
+      $scope.activeDateId = dateObject.uid;
+      return true;
+    }
+    return false;
+  };
+
+  this.init = function(ngModelCtrl_) {
+    ngModelCtrl = ngModelCtrl_;
+
+    ngModelCtrl.$render = function() {
+      self.render();
+    };
+  };
+
+  this.render = function() {
+    if (ngModelCtrl.$viewValue) {
+      var date = new Date(ngModelCtrl.$viewValue),
+        isValid = !isNaN(date);
+
+      if (isValid) {
+        this.activeDate = date;
+      } else if (!$datepickerSuppressError) {
+        $log.error('Datepicker directive: "ng-model" value must be a Date object, a number of milliseconds since 01.01.1970 or a string representing an RFC2822 or ISO 8601 date.');
+      }
+    }
+    this.refreshView();
+  };
+
+  this.refreshView = function() {
+    if (this.element) {
+      this._refreshView();
+
+      var date = ngModelCtrl.$viewValue ? new Date(ngModelCtrl.$viewValue) : null;
+      ngModelCtrl.$setValidity('dateDisabled', !date || (this.element && !this.isDisabled(date)));
+    }
+  };
+
+  this.createDateObject = function(date, format) {
+    var model = ngModelCtrl.$viewValue ? new Date(ngModelCtrl.$viewValue) : null;
+    return {
+      date: date,
+      label: dateFilter(date, format),
+      selected: model && this.compare(date, model) === 0,
+      disabled: this.isDisabled(date),
+      current: this.compare(date, new Date()) === 0,
+      customClass: this.customClass(date)
+    };
+  };
+
+  this.isDisabled = function(date) {
+    return ((this.minDate && this.compare(date, this.minDate) < 0) || (this.maxDate && this.compare(date, this.maxDate) > 0) || ($attrs.dateDisabled && $scope.dateDisabled({date: date, mode: $scope.datepickerMode})));
+  };
+
+  this.customClass = function(date) {
+    return $scope.customClass({date: date, mode: $scope.datepickerMode});
+  };
+
+  // Split array into smaller arrays
+  this.split = function(arr, size) {
+    var arrays = [];
+    while (arr.length > 0) {
+      arrays.push(arr.splice(0, size));
+    }
+    return arrays;
+  };
+
+  this.fixTimeZone = function(date) {
+    var hours = date.getHours();
+    date.setHours(hours === 23 ? hours + 2 : 0);
+  };
+
+  $scope.select = function(date) {
+    if ($scope.datepickerMode === self.minMode) {
+      var dt = ngModelCtrl.$viewValue ? new Date(ngModelCtrl.$viewValue) : new Date(0, 0, 0, 0, 0, 0, 0);
+      dt.setFullYear(date.getFullYear(), date.getMonth(), date.getDate());
+      ngModelCtrl.$setViewValue(dt);
+      ngModelCtrl.$render();
+    } else {
+      self.activeDate = date;
+      $scope.datepickerMode = self.modes[self.modes.indexOf($scope.datepickerMode) - 1];
+    }
+  };
+
+  $scope.move = function(direction) {
+    var year = self.activeDate.getFullYear() + direction * (self.step.years || 0),
+      month = self.activeDate.getMonth() + direction * (self.step.months || 0);
+    self.activeDate.setFullYear(year, month, 1);
+    self.refreshView();
+  };
+
+  $scope.toggleMode = function(direction) {
+    direction = direction || 1;
+
+    if (($scope.datepickerMode === self.maxMode && direction === 1) || ($scope.datepickerMode === self.minMode && direction === -1)) {
+      return;
+    }
+
+    $scope.datepickerMode = self.modes[self.modes.indexOf($scope.datepickerMode) + direction];
+  };
+
+  // Key event mapper
+  $scope.keys = { 13: 'enter', 32: 'space', 33: 'pageup', 34: 'pagedown', 35: 'end', 36: 'home', 37: 'left', 38: 'up', 39: 'right', 40: 'down' };
+
+  var focusElement = function() {
+    self.element[0].focus();
+  };
+  
+  $scope.$on('uib:datepicker.focus', focusElement);
+
+  $scope.keydown = function(evt) {
+    var key = $scope.keys[evt.which];
+
+    if (!key || evt.shiftKey || evt.altKey) {
+      return;
+    }
+
+    evt.preventDefault();
+    if (!self.shortcutPropagation) {
+      evt.stopPropagation();
+    }
+
+    if (key === 'enter' || key === 'space') {
+      if (self.isDisabled(self.activeDate)) {
+        return; // do nothing
+      }
+      $scope.select(self.activeDate);
+    } else if (evt.ctrlKey && (key === 'up' || key === 'down')) {
+      $scope.toggleMode(key === 'up' ? 1 : -1);
+    } else {
+      self.handleKeyDown(key, evt);
+      self.refreshView();
+    }
+  };
+}])
+
+.directive('datepicker', ['$log', '$datepickerSuppressWarning', function($log, $datepickerSuppressWarning) {
+  return {
+    replace: true,
+    templateUrl: function(element, attrs) {
+      return attrs.templateUrl || 'template/datepicker/datepicker.html';
+    },
+    scope: {
+      datepickerMode: '=?',
+      dateDisabled: '&',
+      customClass: '&',
+      shortcutPropagation: '&?'
+    },
+    require: ['datepicker', '^ngModel'],
+    controller: 'DatepickerController',
+    controllerAs: 'datepicker',
+    link: function(scope, element, attrs, ctrls) {
+      if (!$datepickerSuppressWarning) {
+        $log.warn('datepicker is now deprecated. Use uib-datepicker instead.');
+      }
+
+      var datepickerCtrl = ctrls[0], ngModelCtrl = ctrls[1];
+
+      datepickerCtrl.init(ngModelCtrl);
+    }
+  };
+}])
+
+.directive('daypicker', ['$log', '$datepickerSuppressWarning', function($log, $datepickerSuppressWarning) {
+  return {
+    replace: true,
+    templateUrl: 'template/datepicker/day.html',
+    require: ['^datepicker', 'daypicker'],
+    controller: 'UibDaypickerController',
+    link: function(scope, element, attrs, ctrls) {
+      if (!$datepickerSuppressWarning) {
+        $log.warn('daypicker is now deprecated. Use uib-daypicker instead.');
+      }
+
+      var datepickerCtrl = ctrls[0],
+        daypickerCtrl = ctrls[1];
+
+      daypickerCtrl.init(datepickerCtrl);
+    }
+  };
+}])
+
+.directive('monthpicker', ['$log', '$datepickerSuppressWarning', function($log, $datepickerSuppressWarning) {
+  return {
+    replace: true,
+    templateUrl: 'template/datepicker/month.html',
+    require: ['^datepicker', 'monthpicker'],
+    controller: 'UibMonthpickerController',
+    link: function(scope, element, attrs, ctrls) {
+      if (!$datepickerSuppressWarning) {
+        $log.warn('monthpicker is now deprecated. Use uib-monthpicker instead.');
+      }
+
+      var datepickerCtrl = ctrls[0],
+        monthpickerCtrl = ctrls[1];
+
+      monthpickerCtrl.init(datepickerCtrl);
+    }
+  };
+}])
+
+.directive('yearpicker', ['$log', '$datepickerSuppressWarning', function($log, $datepickerSuppressWarning) {
+  return {
+    replace: true,
+    templateUrl: 'template/datepicker/year.html',
+    require: ['^datepicker', 'yearpicker'],
+    controller: 'UibYearpickerController',
+    link: function(scope, element, attrs, ctrls) {
+      if (!$datepickerSuppressWarning) {
+        $log.warn('yearpicker is now deprecated. Use uib-yearpicker instead.');
+      }
+
+      var ctrl = ctrls[0];
+      angular.extend(ctrl, ctrls[1]);
+      ctrl.yearpickerInit();
+
+      ctrl.refreshView();
+    }
+  };
+}])
+
+.directive('datepickerPopup', ['$log', '$datepickerSuppressWarning', function($log, $datepickerSuppressWarning) {
+  return {
+    require: ['ngModel', 'datepickerPopup'],
+    controller: 'UibDatepickerPopupController',
+    scope: {
+      isOpen: '=?',
+      currentText: '@',
+      clearText: '@',
+      closeText: '@',
+      dateDisabled: '&',
+      customClass: '&'
+    },
+    link: function(scope, element, attrs, ctrls) {
+      if (!$datepickerSuppressWarning) {
+        $log.warn('datepicker-popup is now deprecated. Use uib-datepicker-popup instead.');
+      }
+
+      var ngModel = ctrls[0],
+        ctrl = ctrls[1];
+
+      ctrl.init(ngModel);
+    }
+  };
+}])
+
+.directive('datepickerPopupWrap', ['$log', '$datepickerSuppressWarning', function($log, $datepickerSuppressWarning) {
+  return {
+    replace: true,
+    transclude: true,
+    templateUrl: function(element, attrs) {
+      return attrs.templateUrl || 'template/datepicker/popup.html';
+    },
+    link: function() {
+      if (!$datepickerSuppressWarning) {
+        $log.warn('datepicker-popup-wrap is now deprecated. Use uib-datepicker-popup-wrap instead.');
+      }
+    }
+  };
+}]);
diff --git a/src/datepicker/docs/demo.html b/src/datepicker/docs/demo.html
index 0aa4d3e52d..8a057a304c 100644
--- a/src/datepicker/docs/demo.html
+++ b/src/datepicker/docs/demo.html
@@ -15,14 +15,14 @@
 
     <h4>Inline</h4>
     <div style="display:inline-block; min-height:290px;">
-      <datepicker ng-model="dt" min-date="minDate" show-weeks="true" class="well well-sm" custom-class="getDayClass(date, mode)"></datepicker>
+      <uib-datepicker ng-model="dt" min-date="minDate" show-weeks="true" class="well well-sm" custom-class="getDayClass(date, mode)"></uib-datepicker>
     </div>
 
     <h4>Popup</h4>
     <div class="row">
         <div class="col-md-6">
             <p class="input-group">
-              <input type="text" class="form-control" datepicker-popup="{{format}}" ng-model="dt" is-open="status.opened" min-date="minDate" max-date="'2020-06-22'" datepicker-options="dateOptions" date-disabled="disabled(date, mode)" ng-required="true" close-text="Close" />
+              <input type="text" class="form-control" uib-datepicker-popup="{{format}}" ng-model="dt" is-open="status.opened" min-date="minDate" max-date="maxDate" datepicker-options="dateOptions" date-disabled="disabled(date, mode)" ng-required="true" close-text="Close" />
               <span class="input-group-btn">
                 <button type="button" class="btn btn-default" ng-click="open($event)"><i class="glyphicon glyphicon-calendar"></i></button>
               </span>
@@ -31,7 +31,7 @@ <h4>Popup</h4>
 
         <div class="col-md-6">
             <p class="input-group">
-              <input type="date" class="form-control" datepicker-popup ng-model="dt" is-open="status.opened" min-date="minDate" max-date="'2020-06-22'" datepicker-options="dateOptions" date-disabled="disabled(date, mode)" ng-required="true" close-text="Close" />
+              <input type="date" class="form-control" uib-datepicker-popup ng-model="dt" is-open="status.opened" min-date="minDate" max-date="maxDate" datepicker-options="dateOptions" date-disabled="disabled(date, mode)" ng-required="true" close-text="Close" />
               <span class="input-group-btn">
                 <button type="button" class="btn btn-default" ng-click="open($event)"><i class="glyphicon glyphicon-calendar"></i></button>
               </span>
@@ -46,7 +46,7 @@ <h4>Popup</h4>
 
     <hr />
     <button type="button" class="btn btn-sm btn-info" ng-click="today()">Today</button>
-    <button type="button" class="btn btn-sm btn-default" ng-click="dt = '2009-08-24'">2009-08-24</button>
+    <button type="button" class="btn btn-sm btn-default" ng-click="setDate(2009, 7, 24)">2009-08-24</button>
     <button type="button" class="btn btn-sm btn-danger" ng-click="clear()">Clear</button>
-    <button type="button" class="btn btn-sm btn-default" ng-click="toggleMin()" tooltip="After today restriction">Min date</button>
-</div>
\ No newline at end of file
+    <button type="button" class="btn btn-sm btn-default" ng-click="toggleMin()" uib-tooltip="After today restriction">Min date</button>
+</div>
diff --git a/src/datepicker/docs/demo.js b/src/datepicker/docs/demo.js
index 79624080ad..419cb3d2fb 100644
--- a/src/datepicker/docs/demo.js
+++ b/src/datepicker/docs/demo.js
@@ -17,11 +17,16 @@ angular.module('ui.bootstrap.demo').controller('DatepickerDemoCtrl', function ($
     $scope.minDate = $scope.minDate ? null : new Date();
   };
   $scope.toggleMin();
+  $scope.maxDate = new Date(2020, 5, 22);
 
   $scope.open = function($event) {
     $scope.status.opened = true;
   };
 
+  $scope.setDate = function(year, month, day) {
+    $scope.dt = new Date(year, month, day);
+  };
+
   $scope.dateOptions = {
     formatYear: 'yy',
     startingDay: 1
diff --git a/src/datepicker/docs/readme.md b/src/datepicker/docs/readme.md
index f8d5ce4c57..956032a04c 100644
--- a/src/datepicker/docs/readme.md
+++ b/src/datepicker/docs/readme.md
@@ -7,7 +7,7 @@ Everything is formatted using the [date filter](http://docs.angularjs.org/api/ng
 
 ### Datepicker Settings ###
 
-All settings can be provided as attributes in the `datepicker` or globally configured through the `datepickerConfig`.
+All settings can be provided as attributes in the `uib-datepicker` or globally configured through the `uibDatepickerConfig`.
 
  * `ng-model` <i class="glyphicon glyphicon-eye-open"></i>
  	:
@@ -93,9 +93,9 @@ All settings can be provided as attributes in the `datepicker` or globally confi
 ### Popup Settings ###
 
 Options for datepicker can be passed as JSON using the `datepicker-options` attribute.
-Specific settings for the `datepicker-popup`, that can globally configured through the `datepickerPopupConfig`, are:
+Specific settings for the `uib-datepicker-popup`, that can globally configured through the `uibDatepickerPopupConfig`, are:
 
- * `datepicker-popup`
+ * `uib-datepicker-popup`
  	_(Default: 'yyyy-MM-dd')_ :
  	The format for displayed dates.
 
@@ -129,7 +129,7 @@ Specific settings for the `datepicker-popup`, that can globally configured throu
 
  * `datepicker-append-to-body`
   _(Default: false)_:
-  Append the datepicker popup element to `body`, rather than inserting after `datepicker-popup`. For global configuration, use `datepickerPopupConfig.appendToBody`.
+  Append the datepicker popup element to `body`, rather than inserting after `datepicker-popup`. For global configuration, use `uibDatepickerPopupConfig.appendToBody`.
 
  * `is-open` <i class="glyphicon glyphicon-eye-open"></i>
   _(Default: false)_:
@@ -141,7 +141,7 @@ Specific settings for the `datepicker-popup`, that can globally configured throu
 
 ### Keyboard Support ###
 
-Depending on datepicker's current mode, the date may reffer either to day, month or year. Accordingly, the term view reffers either to a month, year or year range.
+Depending on datepicker's current mode, the date may refer either to day, month or year. Accordingly, the term view refers either to a month, year or year range.
 
  * `Left`: Move focus to the previous date. Will move to the last date of the previous view, if the current date is the first date of a view.
  * `Right`: Move focus to the next date. Will move to the first date of the following view, if the current date is the last date of a view.
diff --git a/src/datepicker/test/datepicker.spec.js b/src/datepicker/test/datepicker.spec.js
index ac33776936..7fce2492b6 100644
--- a/src/datepicker/test/datepicker.spec.js
+++ b/src/datepicker/test/datepicker.spec.js
@@ -58,7 +58,7 @@ describe('datepicker directive', function() {
     var els = getLabelsRow().find('th'),
         labels = [];
     for (var i = dayMode ? 1 : 0, n = els.length; i < n; i++) {
-      labels.push( els.eq(i).text() );
+      labels.push(els.eq(i).text());
     }
     return labels;
   }
@@ -67,7 +67,7 @@ describe('datepicker directive', function() {
     var rows = element.find('tbody').find('tr'),
         weeks = [];
     for (var i = 0, n = rows.length; i < n; i++) {
-      weeks.push( rows.eq(i).find('td').eq(0).first().text() );
+      weeks.push(rows.eq(i).find('td').eq(0).first().text());
     }
     return weeks;
   }
@@ -79,7 +79,7 @@ describe('datepicker directive', function() {
     for (var j = 0, numRows = tr.length; j < numRows; j++) {
       var cols = tr.eq(j).find('td'), days = [];
       for (var i = dayMode ? 1 : 0, n = cols.length; i < n; i++) {
-        days.push( cols.eq(i).find('button').text() );
+        days.push(cols.eq(i).find('button').text());
       }
       rows.push(days);
     }
@@ -106,7 +106,7 @@ describe('datepicker directive', function() {
   function expectSelectedElement(index) {
     var buttons = getAllOptionsEl();
     angular.forEach( buttons, function(button, idx) {
-      expect(angular.element(button).hasClass('btn-info')).toBe( idx === index );
+      expect(angular.element(button).hasClass('btn-info')).toBe(idx === index);
     });
   }
 
@@ -145,7 +145,7 @@ describe('datepicker directive', function() {
       });
 
       spyOn($log, 'error');
-      element = $compile('<datepicker ng-model="locals.date"></datepicker>')($scope);
+      element = $compile('<uib-datepicker ng-model="locals.date"></uib-datepicker>')($scope);
 
       $scope.locals = {
         date: 'lalala'
@@ -166,7 +166,7 @@ describe('datepicker directive', function() {
       });
 
       spyOn($log, 'error');
-      element = $compile('<datepicker ng-model="locals.date"></datepicker>')($scope);
+      element = $compile('<uib-datepicker ng-model="locals.date"></uib-datepicker>')($scope);
 
       $scope.locals = {
         date: 'lalala'
@@ -187,7 +187,7 @@ describe('datepicker directive', function() {
       });
       spyOn($log, 'error');
 
-      element = $compile('<datepicker ng-model="locals.date"></datepicker>')($scope);
+      element = $compile('<uib-datepicker ng-model="locals.date"></uib-datepicker>')($scope);
 
       $scope.locals = {
         date: 'lalala'
@@ -208,7 +208,7 @@ describe('datepicker directive', function() {
 
     describe('', function() {
       beforeEach(function() {
-        element = $compile('<datepicker ng-model="date"></datepicker>')($rootScope);
+        element = $compile('<uib-datepicker ng-model="date"></uib-datepicker>')($rootScope);
         $rootScope.$digest();
       });
 
@@ -322,12 +322,12 @@ describe('datepicker directive', function() {
         clickNextButton();
         expect($rootScope.date).toEqual(new Date('September 30, 2010 15:30:00'));
 
-        clickOption( 17 );
+        clickOption(17);
         expect($rootScope.date).toEqual(new Date('October 13, 2010 15:30:00'));
       });
 
       it('updates the calendar when a day of another month is selected', function() {
-        clickOption( 33 );
+        clickOption(33);
         expect($rootScope.date).toEqual(new Date('October 01, 2010 15:30:00'));
         expect(getTitle()).toBe('October 2010');
         expect(getLabels(true)).toEqual(['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']);
@@ -356,7 +356,7 @@ describe('datepicker directive', function() {
       it('should support custom templates', function() {
         $templateCache.put('foo/bar.html', '<div>baz</div>');
 
-        element = $compile('<datepicker ng-model="date" template-url="foo/bar.html"></datepicker>')($rootScope);
+        element = $compile('<uib-datepicker ng-model="date" template-url="foo/bar.html"></uib-datepicker>')($rootScope);
         $rootScope.$digest();
 
         expect(element.html()).toBe('baz');
@@ -365,10 +365,10 @@ describe('datepicker directive', function() {
       it('should expose the controller in the template', function() {
         $templateCache.put('template/datepicker/datepicker.html', '<div>{{datepicker.text}}</div>');
 
-        element = $compile('<datepicker ng-model="date"></datepicker>')($rootScope);
+        element = $compile('<uib-datepicker ng-model="date"></uib-datepicker>')($rootScope);
         $rootScope.$digest();
 
-        var ctrl = element.controller('datepicker');
+        var ctrl = element.controller('uib-datepicker');
         expect(ctrl).toBeDefined();
         expect(element.html()).toBe('');
 
@@ -381,7 +381,7 @@ describe('datepicker directive', function() {
       // issue #3079
       describe('time zone bug', function() {
         it('should deal with time zone bug', function() {
-          var ctrl = element.controller('datepicker'),
+          var ctrl = element.controller('uib-datepicker'),
               date = new Date('January 1, 2014');
           spyOn(date, 'getHours').and.returnValue(23);
           spyOn(date, 'setHours').and.returnValue();
@@ -392,7 +392,7 @@ describe('datepicker directive', function() {
         });
 
         it('should not change hours if time zone bug does not occur', function() {
-          var ctrl = element.controller('datepicker'),
+          var ctrl = element.controller('uib-datepicker'),
               date = new Date('January 1, 2014');
           spyOn(date, 'getHours').and.returnValue(0);
           spyOn(date, 'setHours').and.returnValue();
@@ -437,7 +437,6 @@ describe('datepicker directive', function() {
         });
 
         describe('not to a Date object', function() {
-
           it('to a Number, it updates calendar', function() {
             $rootScope.date = parseInt((new Date('November 7, 2005 23:30:00')).getTime(), 10);
             $rootScope.$digest();
@@ -846,7 +845,7 @@ describe('datepicker directive', function() {
     describe('attribute `starting-day`', function () {
       beforeEach(function() {
         $rootScope.startingDay = 1;
-        element = $compile('<datepicker ng-model="date" starting-day="startingDay"></datepicker>')($rootScope);
+        element = $compile('<uib-datepicker ng-model="date" starting-day="startingDay"></uib-datepicker>')($rootScope);
         $rootScope.$digest();
       });
 
@@ -873,7 +872,7 @@ describe('datepicker directive', function() {
     describe('attribute `show-weeks`', function() {
       beforeEach(function() {
         $rootScope.showWeeks = false;
-        element = $compile('<datepicker ng-model="date" show-weeks="showWeeks"></datepicker>')($rootScope);
+        element = $compile('<uib-datepicker ng-model="date" show-weeks="showWeeks"></uib-datepicker>')($rootScope);
         $rootScope.$digest();
       });
 
@@ -889,7 +888,7 @@ describe('datepicker directive', function() {
     describe('`min-date` attribute', function () {
       beforeEach(function() {
         $rootScope.mindate = new Date('September 12, 2010');
-        element = $compile('<datepicker ng-model="date" min-date="mindate"></datepicker>')($rootScope);
+        element = $compile('<uib-datepicker ng-model="date" min-date="mindate"></uib-datepicker>')($rootScope);
         $rootScope.$digest();
       });
 
@@ -977,7 +976,7 @@ describe('datepicker directive', function() {
     describe('`max-date` attribute', function() {
       beforeEach(function() {
         $rootScope.maxdate = new Date('September 25, 2010');
-        element = $compile('<datepicker ng-model="date" max-date="maxdate"></datepicker>')($rootScope);
+        element = $compile('<uib-datepicker ng-model="date" max-date="maxdate"></uib-datepicker>')($rootScope);
         $rootScope.$digest();
       });
 
@@ -1060,7 +1059,7 @@ describe('datepicker directive', function() {
     describe('date-disabled expression', function () {
       beforeEach(function() {
         $rootScope.dateDisabledHandler = jasmine.createSpy('dateDisabledHandler');
-        element = $compile('<datepicker ng-model="date" date-disabled="dateDisabledHandler(date, mode)"></datepicker>')($rootScope);
+        element = $compile('<uib-datepicker ng-model="date" date-disabled="dateDisabledHandler(date, mode)"></uib-datepicker>')($rootScope);
         $rootScope.$digest();
       });
 
@@ -1085,7 +1084,7 @@ describe('datepicker directive', function() {
     describe('custom-class expression', function() {
       beforeEach(function() {
         $rootScope.customClassHandler = jasmine.createSpy('customClassHandler');
-        element = $compile('<datepicker ng-model="date" custom-class="customClassHandler(date, mode)"></datepicker>')($rootScope);
+        element = $compile('<uib-datepicker ng-model="date" custom-class="customClassHandler(date, mode)"></uib-datepicker>')($rootScope);
         $rootScope.$digest();
       });
 
@@ -1110,14 +1109,14 @@ describe('datepicker directive', function() {
     describe('formatting', function() {
       beforeEach(function() {
         $rootScope.dayTitle = 'MMMM, yy';
-        element = $compile('<datepicker ng-model="date"' +
+        element = $compile('<uib-datepicker ng-model="date"' +
           'format-day="d"' +
           'format-day-header="EEEE"' +
           'format-day-title="{{dayTitle}}"' +
           'format-month="MMM"' +
           'format-month-title="yy"' +
           'format-year="yy"' +
-          'year-range="10"></datepicker>')($rootScope);
+          'year-range="10"></uib-datepicker>')($rootScope);
         $rootScope.$digest();
       });
 
@@ -1166,24 +1165,24 @@ describe('datepicker directive', function() {
 
     describe('setting datepickerConfig', function() {
       var originalConfig = {};
-      beforeEach(inject(function(datepickerConfig) {
-        angular.extend(originalConfig, datepickerConfig);
-        datepickerConfig.formatDay = 'd';
-        datepickerConfig.formatMonth = 'MMM';
-        datepickerConfig.formatYear = 'yy';
-        datepickerConfig.formatDayHeader = 'EEEE';
-        datepickerConfig.formatDayTitle = 'MMM, yy';
-        datepickerConfig.formatMonthTitle = 'yy';
-        datepickerConfig.showWeeks = false;
-        datepickerConfig.yearRange = 10;
-        datepickerConfig.startingDay = 6;
-
-        element = $compile('<datepicker ng-model="date"></datepicker>')($rootScope);
+      beforeEach(inject(function(uibDatepickerConfig) {
+        angular.extend(originalConfig, uibDatepickerConfig);
+        uibDatepickerConfig.formatDay = 'd';
+        uibDatepickerConfig.formatMonth = 'MMM';
+        uibDatepickerConfig.formatYear = 'yy';
+        uibDatepickerConfig.formatDayHeader = 'EEEE';
+        uibDatepickerConfig.formatDayTitle = 'MMM, yy';
+        uibDatepickerConfig.formatMonthTitle = 'yy';
+        uibDatepickerConfig.showWeeks = false;
+        uibDatepickerConfig.yearRange = 10;
+        uibDatepickerConfig.startingDay = 6;
+
+        element = $compile('<uib-datepicker ng-model="date"></uib-datepicker>')($rootScope);
         $rootScope.$digest();
       }));
-      afterEach(inject(function(datepickerConfig) {
+      afterEach(inject(function(uibDatepickerConfig) {
         // return it to the original state
-        angular.extend(datepickerConfig, originalConfig);
+        angular.extend(uibDatepickerConfig, originalConfig);
       }));
 
       it('changes the title format in `day` mode', function() {
@@ -1237,16 +1236,16 @@ describe('datepicker directive', function() {
 
     describe('setting datepickerPopupConfig', function() {
       var originalConfig = {};
-      beforeEach(inject(function(datepickerPopupConfig) {
-        angular.extend(originalConfig, datepickerPopupConfig);
-        datepickerPopupConfig.datepickerPopup = 'MM-dd-yyyy';
+      beforeEach(inject(function(uibDatepickerPopupConfig) {
+        angular.extend(originalConfig, uibDatepickerPopupConfig);
+        uibDatepickerPopupConfig.datepickerPopup = 'MM-dd-yyyy';
 
-        element = $compile('<input ng-model="date" datepicker-popup>')($rootScope);
+        element = $compile('<input ng-model="date" uib-datepicker-popup>')($rootScope);
         $rootScope.$digest();
       }));
-      afterEach(inject(function(datepickerPopupConfig) {
+      afterEach(inject(function(uibDatepickerPopupConfig) {
         // return it to the original state
-        angular.extend(datepickerPopupConfig, originalConfig);
+        angular.extend(uibDatepickerPopupConfig, originalConfig);
       }));
 
       it('changes date format', function() {
@@ -1257,16 +1256,16 @@ describe('datepicker directive', function() {
 
     describe('setting datepickerPopupConfig inside ng-if', function() {
       var originalConfig = {};
-      beforeEach(inject(function (datepickerPopupConfig) {
-        angular.extend(originalConfig, datepickerPopupConfig);
-        datepickerPopupConfig.datepickerPopup = 'MM-dd-yyyy';
+      beforeEach(inject(function (uibDatepickerPopupConfig) {
+        angular.extend(originalConfig, uibDatepickerPopupConfig);
+        uibDatepickerPopupConfig.datepickerPopup = 'MM-dd-yyyy';
 
-        element = $compile('<div><div ng-if="true"><input ng-model="date" datepicker-popup></div></div>')($rootScope);
+        element = $compile('<div><div ng-if="true"><input ng-model="date" uib-datepicker-popup></div></div>')($rootScope);
         $rootScope.$digest();
       }));
-      afterEach(inject(function (datepickerPopupConfig) {
+      afterEach(inject(function (uibDatepickerPopupConfig) {
         // return it to the original state
-        angular.extend(datepickerPopupConfig, originalConfig);
+        angular.extend(uibDatepickerPopupConfig, originalConfig);
       }));
 
       it('changes date format', function () {
@@ -1295,7 +1294,7 @@ describe('datepicker directive', function() {
           $sniffer = _$sniffer_;
           $rootScope.isopen = true;
           $rootScope.date = new Date('September 30, 2010 15:30:00');
-          var wrapElement = $compile('<div><input ng-model="date" datepicker-popup><div>')($rootScope);
+          var wrapElement = $compile('<div><input ng-model="date" uib-datepicker-popup><div>')($rootScope);
           $rootScope.$digest();
           assignElements(wrapElement);
         }));
@@ -1318,7 +1317,7 @@ describe('datepicker directive', function() {
           $timeout = _$timeout_;
           $rootScope.isopen = true;
           $rootScope.date = new Date('September 30, 2010 15:30:00');
-          wrapElement = $compile('<div><input ng-model="date" datepicker-popup is-open="isopen"><div>')($rootScope);
+          wrapElement = $compile('<div><input ng-model="date" uib-datepicker-popup is-open="isopen"><div>')($rootScope);
           $rootScope.$digest();
           assignElements(wrapElement);
         }));
@@ -1474,7 +1473,7 @@ describe('datepicker directive', function() {
             $rootScope.date = new Date('September 30, 2010 15:30:00');
             var wrapElement = $compile('<div><input ng-model="date" ' +
               'ng-model-options="{ debounce: 10000 }" ' +
-              'datepicker-popup is-open="isopen"><div>')($rootScope);
+              'uib-datepicker-popup is-open="isopen"><div>')($rootScope);
             $rootScope.$digest();
             assignElements(wrapElement);
           }));
@@ -1599,7 +1598,7 @@ describe('datepicker directive', function() {
 
           function setupInputWithType(type) {
             var wrapElement = $compile('<div><input type="' +
-              type + '" ng-model="date" datepicker-popup is-open="isopen"><div>')($rootScope);
+              type + '" ng-model="date" uib-datepicker-popup is-open="isopen"><div>')($rootScope);
             $rootScope.$digest();
             assignElements(wrapElement);
           }
@@ -1613,7 +1612,7 @@ describe('datepicker directive', function() {
             $rootScope.opts = {
               'show-weeks': false
             };
-            var wrapElement = $compile('<div><input ng-model="date" datepicker-popup datepicker-options="opts" is-open="true"></div>')($rootScope);
+            var wrapElement = $compile('<div><input ng-model="date" uib-datepicker-popup datepicker-options="opts" is-open="true"></div>')($rootScope);
             $rootScope.$digest();
             assignElements(wrapElement);
           });
@@ -1633,7 +1632,7 @@ describe('datepicker directive', function() {
             $rootScope.opts = {
               'initDate': new Date('November 9, 1980')
             };
-            var wrapElement = $compile('<div><input ng-model="date" datepicker-popup datepicker-options="opts" is-open="true"></div>')($rootScope);
+            var wrapElement = $compile('<div><input ng-model="date" uib-datepicker-popup datepicker-options="opts" is-open="true"></div>')($rootScope);
             $rootScope.$digest();
             assignElements(wrapElement);
           });
@@ -1656,7 +1655,7 @@ describe('datepicker directive', function() {
 
         describe('when initially set', function() {
           beforeEach(function() {
-            var wrapElement = $compile('<div><input ng-model="date" datepicker-popup init-date="initDate" is-open="true"></div>')($rootScope);
+            var wrapElement = $compile('<div><input ng-model="date" uib-datepicker-popup init-date="initDate" is-open="true"></div>')($rootScope);
             $rootScope.$digest();
             assignElements(wrapElement);
           });
@@ -1672,7 +1671,7 @@ describe('datepicker directive', function() {
 
         describe('when modified before date selected.', function() {
           beforeEach(function() {
-            var wrapElement = $compile('<div><input ng-model="date" datepicker-popup init-date="initDate" is-open="true"></div>')($rootScope);
+            var wrapElement = $compile('<div><input ng-model="date" uib-datepicker-popup init-date="initDate" is-open="true"></div>')($rootScope);
             $rootScope.$digest();
             assignElements(wrapElement);
 
@@ -1691,7 +1690,7 @@ describe('datepicker directive', function() {
 
         describe('when modified after date selected.', function() {
           beforeEach(function() {
-            var wrapElement = $compile('<div><input ng-model="date" datepicker-popup init-date="initDate" is-open="true"></div>')($rootScope);
+            var wrapElement = $compile('<div><input ng-model="date" uib-datepicker-popup init-date="initDate" is-open="true"></div>')($rootScope);
             $rootScope.$digest();
             assignElements(wrapElement);
             $rootScope.date = new Date('April 1, 1982');
@@ -1714,7 +1713,7 @@ describe('datepicker directive', function() {
 
         beforeEach(inject(function() {
           $rootScope.open = true;
-          wrapElement = $compile('<div><input ng-model="date" datepicker-popup is-open="open"><div>')($rootScope);
+          wrapElement = $compile('<div><input ng-model="date" uib-datepicker-popup is-open="open"><div>')($rootScope);
           $rootScope.$digest();
           assignElements(wrapElement);
         }));
@@ -1739,7 +1738,7 @@ describe('datepicker directive', function() {
 
       describe('custom format', function() {
         beforeEach(inject(function() {
-          var wrapElement = $compile('<div><input ng-model="date" datepicker-popup="dd-MMMM-yyyy" is-open="true"><div>')($rootScope);
+          var wrapElement = $compile('<div><input ng-model="date" uib-datepicker-popup="dd-MMMM-yyyy" is-open="true"><div>')($rootScope);
           $rootScope.$digest();
           assignElements(wrapElement);
         }));
@@ -1764,7 +1763,7 @@ describe('datepicker directive', function() {
       describe('dynamic custom format', function() {
         beforeEach(inject(function() {
           $rootScope.format = 'dd-MMMM-yyyy';
-          var wrapElement = $compile('<div><input ng-model="date" datepicker-popup="{{format}}" is-open="true"><div>')($rootScope);
+          var wrapElement = $compile('<div><input ng-model="date" uib-datepicker-popup="{{format}}" is-open="true"><div>')($rootScope);
           $rootScope.$digest();
           assignElements(wrapElement);
         }));
@@ -1794,7 +1793,7 @@ describe('datepicker directive', function() {
 
       describe('european format', function() {
         it('dd.MM.yyyy', function() {
-          var wrapElement = $compile('<div><input ng-model="date" datepicker-popup="dd.MM.yyyy"><div>')($rootScope);
+          var wrapElement = $compile('<div><input ng-model="date" uib-datepicker-popup="dd.MM.yyyy"><div>')($rootScope);
           $rootScope.$digest();
           assignElements(wrapElement);
 
@@ -1809,7 +1808,7 @@ describe('datepicker directive', function() {
         var wrapElement;
         beforeEach(inject(function() {
           $rootScope.close = false;
-          wrapElement = $compile('<div><input ng-model="date" datepicker-popup close-on-date-selection="close" is-open="true"><div>')($rootScope);
+          wrapElement = $compile('<div><input ng-model="date" uib-datepicker-popup close-on-date-selection="close" is-open="true"><div>')($rootScope);
           $rootScope.$digest();
           assignElements(wrapElement);
         }));
@@ -1834,7 +1833,7 @@ describe('datepicker directive', function() {
 
           beforeEach(inject(function() {
             $rootScope.isopen = true;
-            wrapElement = $compile('<div><input ng-model="date" datepicker-popup is-open="isopen"><div>')($rootScope);
+            wrapElement = $compile('<div><input ng-model="date" uib-datepicker-popup is-open="isopen"><div>')($rootScope);
             $rootScope.$digest();
             assignElements(wrapElement);
             assignButtonBar();
@@ -1896,7 +1895,7 @@ describe('datepicker directive', function() {
           it('should change text from attributes', function() {
             $rootScope.clearText = 'Null it!';
             $rootScope.close = 'Close';
-            var wrapElement = $compile('<div><input ng-model="date" datepicker-popup current-text="Now" clear-text="{{clearText}}" close-text="{{close}}ME" is-open="true"><div>')($rootScope);
+            var wrapElement = $compile('<div><input ng-model="date" uib-datepicker-popup current-text="Now" clear-text="{{clearText}}" close-text="{{close}}ME" is-open="true"><div>')($rootScope);
             $rootScope.$digest();
             assignElements(wrapElement);
             assignButtonBar();
@@ -1906,16 +1905,36 @@ describe('datepicker directive', function() {
             expect(buttons.eq(2).text()).toBe('CloseME');
           });
 
+          it('should disable today button if before min date', function() {
+            $rootScope.minDate = new Date().setDate(new Date().getDate() + 1);
+            var wrapElement = $compile('<div><input ng-model="date" uib-datepicker-popup min-date="minDate" is-open="true"><div>')($rootScope);
+            $rootScope.$digest();
+            assignElements(wrapElement);
+            assignButtonBar();
+
+            expect(buttons.eq(0).prop('disabled')).toBe(true);
+          });
+
+          it('should disable today button if after max date', function() {
+            $rootScope.maxDate = new Date().setDate(new Date().getDate() - 2);
+            var wrapElement = $compile('<div><input ng-model="date" uib-datepicker-popup max-date="maxDate" is-open="true"><div>')($rootScope);
+            $rootScope.$digest();
+            assignElements(wrapElement);
+            assignButtonBar();
+
+            expect(buttons.eq(0).prop('disabled')).toBe(true);
+          });
+
           it('should remove bar', function() {
             $rootScope.showBar = false;
-            var wrapElement = $compile('<div><input ng-model="date" datepicker-popup show-button-bar="showBar" is-open="true"><div>')($rootScope);
+            var wrapElement = $compile('<div><input ng-model="date" uib-datepicker-popup show-button-bar="showBar" is-open="true"><div>')($rootScope);
             $rootScope.$digest();
             assignElements(wrapElement);
             expect(dropdownEl.find('li').length).toBe(1);
           });
 
           it('should hide weeks column on popup', function() {
-            var wrapElement = $compile('<div><input ng-model="date" datepicker-popup show-weeks="false" is-open="true"><div>')($rootScope);
+            var wrapElement = $compile('<div><input ng-model="date" uib-datepicker-popup show-weeks="false" is-open="true"><div>')($rootScope);
             $rootScope.$digest();
             assignElements(wrapElement);
 
@@ -1927,7 +1946,7 @@ describe('datepicker directive', function() {
           });
 
           it('should show weeks column on popup', function() {
-            var wrapElement = $compile('<div><input ng-model="date" datepicker-popup show-weeks="true" is-open="true"><div>')($rootScope);
+            var wrapElement = $compile('<div><input ng-model="date" uib-datepicker-popup show-weeks="true" is-open="true"><div>')($rootScope);
             $rootScope.$digest();
             assignElements(wrapElement);
 
@@ -1942,7 +1961,7 @@ describe('datepicker directive', function() {
         describe('`ng-change`', function() {
           beforeEach(inject(function() {
             $rootScope.changeHandler = jasmine.createSpy('changeHandler');
-            var wrapElement = $compile('<div><input ng-model="date" datepicker-popup ng-change="changeHandler()" is-open="true"><div>')($rootScope);
+            var wrapElement = $compile('<div><input ng-model="date" uib-datepicker-popup ng-change="changeHandler()" is-open="true"><div>')($rootScope);
             $rootScope.$digest();
             assignElements(wrapElement);
             assignButtonBar();
@@ -1969,7 +1988,7 @@ describe('datepicker directive', function() {
         describe('`ng-required is true`', function() {
           beforeEach(inject(function() {
             $rootScope.date = '';
-            var wrapElement = $compile('<div><input ng-model="date" datepicker-popup ng-required="true"><div>')($rootScope);
+            var wrapElement = $compile('<div><input ng-model="date" uib-datepicker-popup ng-required="true"><div>')($rootScope);
             $rootScope.$digest();
             assignElements(wrapElement);
           }));
@@ -1993,7 +2012,7 @@ describe('datepicker directive', function() {
         describe('`ng-required is false`', function() {
           beforeEach(inject(function() {
             $rootScope.date = '';
-            var wrapElement = $compile('<div><input ng-model="date" datepicker-popup ng-required="false"><div>')($rootScope);
+            var wrapElement = $compile('<div><input ng-model="date" uib-datepicker-popup ng-required="false"><div>')($rootScope);
             $rootScope.$digest();
             assignElements(wrapElement);
           }));
@@ -2008,7 +2027,7 @@ describe('datepicker directive', function() {
         beforeEach(inject(function() {
           $rootScope.changeHandler = jasmine.createSpy('changeHandler');
           $rootScope.date = new Date('09/16/2010');
-          var wrapElement = $compile('<div><input ng-model="date" datepicker-popup ng-required="true" ng-change="changeHandler()" is-open="true"><div>')($rootScope);
+          var wrapElement = $compile('<div><input ng-model="date" uib-datepicker-popup ng-required="true" ng-change="changeHandler()" is-open="true"><div>')($rootScope);
           $rootScope.$digest();
           assignElements(wrapElement);
         }));
@@ -2041,7 +2060,7 @@ describe('datepicker directive', function() {
         it('should allow custom templates for the popup', function() {
           $templateCache.put('foo/bar.html', '<div>baz</div>');
 
-          var elm = angular.element('<div><input ng-model="date" datepicker-popup datepicker-popup-template-url="foo/bar.html" is-open="true"></div>');
+          var elm = angular.element('<div><input ng-model="date" uib-datepicker-popup datepicker-popup-template-url="foo/bar.html" is-open="true"></div>');
 
           $compile(elm)($rootScope);
           $rootScope.$digest();
@@ -2062,12 +2081,12 @@ describe('datepicker directive', function() {
         it('should allow custom templates for the datepicker', function() {
           $templateCache.put('foo/bar.html', '<div>baz</div>');
 
-          var elm = angular.element('<div><input ng-model="date" datepicker-popup datepicker-template-url="foo/bar.html" is-open="true"></div>');
+          var elm = angular.element('<div><input ng-model="date" uib-datepicker-popup datepicker-template-url="foo/bar.html" is-open="true"></div>');
 
           $compile(elm)($rootScope);
           $rootScope.$digest();
 
-          var datepicker = elm.find('[datepicker]');
+          var datepicker = elm.find('[uib-datepicker]');
 
           expect(datepicker.html()).toBe('baz');
         });
@@ -2079,14 +2098,14 @@ describe('datepicker directive', function() {
         });
 
         afterEach(function() {
-          $document.find('body').find('.dropdown-menu').remove();
+          $document.find('body').children().remove();
         });
 
         it('should append to the body', function() {
           var $body = $document.find('body'),
               bodyLength = $body.children().length,
               elm = angular.element(
-                '<div><input datepicker-popup ng-model="date" datepicker-append-to-body="true" is-open="true" /></div>'
+                '<div><input uib-datepicker-popup ng-model="date" datepicker-append-to-body="true" is-open="true" /></div>'
               );
           $compile(elm)($rootScope);
           $rootScope.$digest();
@@ -2099,7 +2118,7 @@ describe('datepicker directive', function() {
               bodyLength = $body.children().length,
               isolatedScope = $rootScope.$new(),
               elm = angular.element(
-                '<input datepicker-popup ng-model="date" datepicker-append-to-body="true" is-open="true" />'
+                '<input uib-datepicker-popup ng-model="date" datepicker-append-to-body="true" is-open="true" />'
               );
           $compile(elm)(isolatedScope);
           isolatedScope.$digest();
@@ -2111,17 +2130,17 @@ describe('datepicker directive', function() {
 
       describe('with setting datepickerConfig.showWeeks to false', function() {
         var originalConfig = {};
-        beforeEach(inject(function(datepickerConfig) {
-          angular.extend(originalConfig, datepickerConfig);
-          datepickerConfig.showWeeks = false;
+        beforeEach(inject(function(uibDatepickerConfig) {
+          angular.extend(originalConfig, uibDatepickerConfig);
+          uibDatepickerConfig.showWeeks = false;
 
-          var wrapElement = $compile('<div><input ng-model="date" datepicker-popup is-open="true"><div>')($rootScope);
+          var wrapElement = $compile('<div><input ng-model="date" uib-datepicker-popup is-open="true"><div>')($rootScope);
           $rootScope.$digest();
           assignElements(wrapElement);
         }));
-        afterEach(inject(function(datepickerConfig) {
+        afterEach(inject(function(uibDatepickerConfig) {
           // return it to the original state
-          angular.extend(datepickerConfig, originalConfig);
+          angular.extend(uibDatepickerConfig, originalConfig);
         }));
 
         it('changes initial visibility for weeks', function() {
@@ -2137,7 +2156,7 @@ describe('datepicker directive', function() {
         beforeEach(inject(function() {
           $rootScope.date = new Date('August 11, 2013');
           $rootScope.mode = 'month';
-          var wrapElement = $compile('<div><input ng-model="date" datepicker-popup datepicker-mode="mode" is-open="true"></div>')($rootScope);
+          var wrapElement = $compile('<div><input ng-model="date" uib-datepicker-popup datepicker-mode="mode" is-open="true"></div>')($rootScope);
           $rootScope.$digest();
           assignElements(wrapElement);
         }));
@@ -2157,7 +2176,7 @@ describe('datepicker directive', function() {
         beforeEach(function() {
           $rootScope.date = null;
           $rootScope.initDate = new Date('November 9, 1980');
-          var wrapElement = $compile('<div><input ng-model="date" datepicker-popup init-date="initDate" is-open="true"></div>')($rootScope);
+          var wrapElement = $compile('<div><input ng-model="date" uib-datepicker-popup init-date="initDate" is-open="true"></div>')($rootScope);
           $rootScope.$digest();
           assignElements(wrapElement);
         });
@@ -2175,7 +2194,7 @@ describe('datepicker directive', function() {
         beforeEach(function() {
           $rootScope.date = null;
           $rootScope.isopen = false;
-          var wrapElement = $compile('<div><input ng-model="date" datepicker-popup on-open-focus="false" is-open="isopen"></div>')($rootScope);
+          var wrapElement = $compile('<div><input ng-model="date" uib-datepicker-popup on-open-focus="false" is-open="isopen"></div>')($rootScope);
           $rootScope.$digest();
           assignElements(wrapElement);
         });
@@ -2200,7 +2219,7 @@ describe('datepicker directive', function() {
     describe('with empty initial state', function() {
       beforeEach(inject(function() {
         $rootScope.date = null;
-        element = $compile('<datepicker ng-model="date"></datepicker>')($rootScope);
+        element = $compile('<uib-datepicker ng-model="date"></uib-datepicker>')($rootScope);
         $rootScope.$digest();
       }));
 
@@ -2227,7 +2246,7 @@ describe('datepicker directive', function() {
       beforeEach(inject(function() {
         $rootScope.date = null;
         $rootScope.initDate = new Date('November 9, 1980');
-        element = $compile('<datepicker ng-model="date" init-date="initDate"></datepicker>')($rootScope);
+        element = $compile('<uib-datepicker ng-model="date" init-date="initDate"></uib-datepicker>')($rootScope);
         $rootScope.$digest();
       }));
 
@@ -2244,7 +2263,7 @@ describe('datepicker directive', function() {
       beforeEach(inject(function() {
         $rootScope.date = new Date('August 11, 2013');
         $rootScope.mode = 'month';
-        element = $compile('<datepicker ng-model="date" datepicker-mode="mode"></datepicker>')($rootScope);
+        element = $compile('<uib-datepicker ng-model="date" datepicker-mode="mode"></uib-datepicker>')($rootScope);
         $rootScope.$digest();
       }));
 
@@ -2263,7 +2282,7 @@ describe('datepicker directive', function() {
         $rootScope.date = new Date('August 11, 2013');
         $rootScope.mode = 'month';
         $rootScope.minMode = 'month';
-        element = $compile('<datepicker ng-model="date" min-mode="minMode" datepicker-mode="mode"></datepicker>')($rootScope);
+        element = $compile('<uib-datepicker ng-model="date" min-mode="minMode" datepicker-mode="mode"></uib-datepicker>')($rootScope);
         $rootScope.$digest();
       }));
 
@@ -2291,7 +2310,7 @@ describe('datepicker directive', function() {
       beforeEach(inject(function() {
         $rootScope.date = new Date('August 11, 2013');
         $rootScope.maxMode = 'month';
-        element = $compile('<datepicker ng-model="date" max-mode="maxMode"></datepicker>')($rootScope);
+        element = $compile('<uib-datepicker ng-model="date" max-mode="maxMode"></uib-datepicker>')($rootScope);
         $rootScope.$digest();
       }));
 
@@ -2339,7 +2358,7 @@ describe('datepicker directive', function() {
 
         // Use dateModel directive to add formatters and parsers to the
         // ngModelController that translate the custom date object.
-        element = $compile('<datepicker ng-model="date" date-model></datepicker>')($rootScope);
+        element = $compile('<uib-datepicker ng-model="date" date-model></uib-datepicker>')($rootScope);
         $rootScope.$digest();
       }));
 
@@ -2358,14 +2377,13 @@ describe('datepicker directive', function() {
       });
     });
 
-    describe('thurdays determine week count', function() {
-
+    describe('thursdays determine week count', function() {
       beforeEach(inject(function() {
         $rootScope.date = new Date('June 07, 2014');
       }));
 
       it('with the default starting day (sunday)', function() {
-        element = $compile('<datepicker ng-model="date"></datepicker>')($rootScope);
+        element = $compile('<uib-datepicker ng-model="date"></uib-datepicker>')($rootScope);
         $rootScope.$digest();
 
         expect(getWeeks()).toEqual(['23', '24', '25', '26', '27', '28']);
@@ -2373,21 +2391,21 @@ describe('datepicker directive', function() {
 
       describe('when starting date', function() {
         it('is monday', function() {
-          element = $compile('<datepicker ng-model="date" starting-day="1"></datepicker>')($rootScope);
+          element = $compile('<uib-datepicker ng-model="date" starting-day="1"></uib-datepicker>')($rootScope);
           $rootScope.$digest();
 
           expect(getWeeks()).toEqual(['22', '23', '24', '25', '26', '27']);
         });
 
         it('is thursday', function() {
-          element = $compile('<datepicker ng-model="date" starting-day="4"></datepicker>')($rootScope);
+          element = $compile('<uib-datepicker ng-model="date" starting-day="4"></uib-datepicker>')($rootScope);
           $rootScope.$digest();
 
           expect(getWeeks()).toEqual(['22', '23', '24', '25', '26', '27']);
         });
 
         it('is saturday', function() {
-          element = $compile('<datepicker ng-model="date" starting-day="6"></datepicker>')($rootScope);
+          element = $compile('<uib-datepicker ng-model="date" starting-day="6"></uib-datepicker>')($rootScope);
           $rootScope.$digest();
 
           expect(getWeeks()).toEqual(['23', '24', '25', '26', '27', '28']);
@@ -2397,7 +2415,7 @@ describe('datepicker directive', function() {
       describe('first week in january', function() {
         it('in current year', function() {
           $rootScope.date = new Date('January 07, 2014');
-          element = $compile('<datepicker ng-model="date"></datepicker>')($rootScope);
+          element = $compile('<uib-datepicker ng-model="date"></uib-datepicker>')($rootScope);
           $rootScope.$digest();
 
           expect(getWeeks()).toEqual(['1', '2', '3', '4', '5', '6']);
@@ -2405,7 +2423,7 @@ describe('datepicker directive', function() {
 
         it('in last year', function() {
           $rootScope.date = new Date('January 07, 2010');
-          element = $compile('<datepicker ng-model="date"></datepicker>')($rootScope);
+          element = $compile('<uib-datepicker ng-model="date"></uib-datepicker>')($rootScope);
           $rootScope.$digest();
 
           expect(getWeeks()).toEqual(['53', '1', '2', '3', '4', '5']);
@@ -2418,7 +2436,7 @@ describe('datepicker directive', function() {
         }));
 
         it('in next year', function() {
-           element = $compile('<datepicker ng-model="date"></datepicker>')($rootScope);
+           element = $compile('<uib-datepicker ng-model="date"></uib-datepicker>')($rootScope);
           $rootScope.$digest();
 
           expect(getWeeks()).toEqual(['49', '50', '51', '52', '1', '2']);
@@ -2427,3 +2445,79 @@ describe('datepicker directive', function() {
     });
   });
 });
+
+/* deprecation tests below */
+
+describe('datepicker deprecation', function() {
+  beforeEach(module('ui.bootstrap.datepicker'));
+  beforeEach(module('template/datepicker/datepicker.html'));
+  beforeEach(module('template/datepicker/day.html'));
+  beforeEach(module('template/datepicker/month.html'));
+  beforeEach(module('template/datepicker/year.html'));
+  beforeEach(module('template/datepicker/popup.html'));
+
+  it('should suppress warning', function() {
+    module(function($provide) {
+      $provide.value('$datepickerSuppressWarning', true);
+    });
+
+    inject(function($compile, $log, $rootScope) {
+      spyOn($log, 'warn');
+
+      var element = $compile('<datepicker ng-model="date"></datepicker>')($rootScope);
+      $rootScope.$digest();
+      expect($log.warn.calls.count()).toBe(0);
+    });
+  });
+
+  it('should give warning by default', inject(function($log) {
+    spyOn($log, 'warn');
+
+    inject(function($compile, $templateCache, $rootScope) {
+      var datepickerTemplate =
+        '<div ng-switch="datepickerMode" role="application" ng-keydown="keydown($event)">' +
+        '<daypicker ng-switch-when="day" tabindex="0"></daypicker>' +
+        '<monthpicker ng-switch-when="month" tabindex="0"></monthpicker>' +
+        '<yearpicker ng-switch-when="year" tabindex="0"></yearpicker> ' +
+        '</div>';
+      $templateCache.put('template/datepicker/datepicker.html', datepickerTemplate);
+
+      var element = $compile('<datepicker ng-model="date"></datepicker>')($rootScope);
+      $rootScope.$digest();
+
+      expect($log.warn.calls.count()).toBe(3);
+      expect($log.warn.calls.argsFor(0)).toEqual(['DatepickerController is now deprecated. Use UibDatepickerController instead.']);
+      expect($log.warn.calls.argsFor(1)).toEqual(['datepicker is now deprecated. Use uib-datepicker instead.']);
+      expect($log.warn.calls.argsFor(2)).toEqual(['daypicker is now deprecated. Use uib-daypicker instead.']);
+
+      $log.warn.calls.reset();
+
+      element = $compile('<datepicker datepicker-mode="\'month\'" ng-model="date"></datepicker>')($rootScope);
+      $rootScope.$digest();
+
+      expect($log.warn.calls.count()).toBe(3);
+      expect($log.warn.calls.argsFor(0)).toEqual(['DatepickerController is now deprecated. Use UibDatepickerController instead.']);
+      expect($log.warn.calls.argsFor(1)).toEqual(['datepicker is now deprecated. Use uib-datepicker instead.']);
+      expect($log.warn.calls.argsFor(2)).toEqual(['monthpicker is now deprecated. Use uib-monthpicker instead.']);
+
+      $log.warn.calls.reset();
+
+      element = $compile('<datepicker datepicker-mode="\'year\'" ng-model="date"></datepicker>')($rootScope);
+      $rootScope.$digest();
+
+      expect($log.warn.calls.count()).toBe(3);
+      expect($log.warn.calls.argsFor(0)).toEqual(['DatepickerController is now deprecated. Use UibDatepickerController instead.']);
+      expect($log.warn.calls.argsFor(1)).toEqual(['datepicker is now deprecated. Use uib-datepicker instead.']);
+      expect($log.warn.calls.argsFor(2)).toEqual(['yearpicker is now deprecated. Use uib-yearpicker instead.']);
+
+      $log.warn.calls.reset();
+
+
+      element = $compile('<input type="date" datepicker-popup ng-model="dt" />')($rootScope);
+      $rootScope.$digest();
+
+      expect($log.warn.calls.count()).toBe(1);
+      expect($log.warn.calls.argsFor(0)).toEqual(['datepicker-popup is now deprecated. Use uib-datepicker-popup instead.']);
+    });
+  }));
+});
diff --git a/src/dropdown/docs/demo.html b/src/dropdown/docs/demo.html
index 481cb75252..7d6f146ad7 100644
--- a/src/dropdown/docs/demo.html
+++ b/src/dropdown/docs/demo.html
@@ -1,11 +1,11 @@
 
 <div ng-controller="DropdownCtrl">
     <!-- Simple dropdown -->
-    <span dropdown on-toggle="toggled(open)">
-      <a href id="simple-dropdown" dropdown-toggle>
+    <span uib-dropdown on-toggle="toggled(open)">
+      <a href id="simple-dropdown" uib-dropdown-toggle>
         Click me for a dropdown, yo!
       </a>
-      <ul class="dropdown-menu" aria-labelledby="simple-dropdown">
+      <ul class="uib-dropdown-menu" aria-labelledby="simple-dropdown">
         <li ng-repeat="choice in items">
           <a href>{{choice}}</a>
         </li>
@@ -13,11 +13,11 @@
     </span>
 
     <!-- Single button -->
-    <div class="btn-group" dropdown is-open="status.isopen">
-      <button id="single-button" type="button" class="btn btn-primary" dropdown-toggle ng-disabled="disabled">
+    <div class="btn-group" uib-dropdown is-open="status.isopen">
+      <button id="single-button" type="button" class="btn btn-primary" uib-dropdown-toggle ng-disabled="disabled">
         Button dropdown <span class="caret"></span>
       </button>
-      <ul class="dropdown-menu" role="menu" aria-labelledby="single-button">
+      <ul class="uib-dropdown-menu" role="menu" aria-labelledby="single-button">
         <li role="menuitem"><a href="#">Action</a></li>
         <li role="menuitem"><a href="#">Another action</a></li>
         <li role="menuitem"><a href="#">Something else here</a></li>
@@ -27,13 +27,13 @@
     </div>
 
     <!-- Split button -->
-    <div class="btn-group" dropdown>
+    <div class="btn-group" uib-dropdown>
       <button id="split-button" type="button" class="btn btn-danger">Action</button>
-      <button type="button" class="btn btn-danger" dropdown-toggle>
+      <button type="button" class="btn btn-danger" uib-dropdown-toggle>
         <span class="caret"></span>
         <span class="sr-only">Split button!</span>
       </button>
-      <ul class="dropdown-menu" role="menu" aria-labelledby="split-button">
+      <ul class="uib-dropdown-menu" role="menu" aria-labelledby="split-button">
         <li role="menuitem"><a href="#">Action</a></li>
         <li role="menuitem"><a href="#">Another action</a></li>
         <li role="menuitem"><a href="#">Something else here</a></li>
@@ -43,11 +43,11 @@
     </div>
 
     <!-- Single button using append-to-body -->
-    <div class="btn-group" dropdown dropdown-append-to-body>
-      <button id="btn-append-to-body" type="button" class="btn btn-primary" dropdown-toggle>
+    <div class="btn-group" uib-dropdown dropdown-append-to-body>
+      <button id="btn-append-to-body" type="button" class="btn btn-primary" uib-dropdown-toggle>
         Dropdown on Body <span class="caret"></span>
       </button>
-      <ul class="dropdown-menu" role="menu" aria-labelledby="btn-append-to-body">
+      <ul class="uib-dropdown-menu" role="menu" aria-labelledby="btn-append-to-body">
         <li role="menuitem"><a href="#">Action</a></li>
         <li role="menuitem"><a href="#">Another action</a></li>
         <li role="menuitem"><a href="#">Something else here</a></li>
@@ -57,11 +57,11 @@
     </div>
     
     <!-- Single button using template-url -->
-    <div class="btn-group" dropdown>
-      <button id="button-template-url" type="button" class="btn btn-primary" dropdown-toggle ng-disabled="disabled">
+    <div class="btn-group" uib-dropdown>
+      <button id="button-template-url" type="button" class="btn btn-primary" uib-dropdown-toggle ng-disabled="disabled">
         Dropdown using template <span class="caret"></span>
       </button>
-      <ul class="dropdown-menu" template-url="dropdown.html" aria-labelledby="button-template-url">
+      <ul class="uib-dropdown-menu" template-url="dropdown.html" aria-labelledby="button-template-url">
       </ul>
     </div>
 
@@ -73,11 +73,11 @@
 
     <hr>
     <!-- Single button with keyboard nav -->
-    <div class="btn-group" dropdown keyboard-nav>
-        <button id="simple-btn-keyboard-nav" type="button" class="btn btn-primary" dropdown-toggle>
+    <div class="btn-group" uib-dropdown uib-keyboard-nav>
+        <button id="simple-btn-keyboard-nav" type="button" class="btn btn-primary" uib-dropdown-toggle>
             Dropdown with keyboard navigation <span class="caret"></span>
         </button>
-        <ul class="dropdown-menu" role="menu" aria-labelledby="simple-btn-keyboard-nav">
+        <ul class="uib-dropdown-menu" role="menu" aria-labelledby="simple-btn-keyboard-nav">
             <li role="menuitem"><a href="#">Action</a></li>
             <li role="menuitem"><a href="#">Another action</a></li>
             <li role="menuitem"><a href="#">Something else here</a></li>
@@ -87,7 +87,7 @@
     </div>
 
     <script type="text/ng-template" id="dropdown.html">
-        <ul class="dropdown-menu" role="menu" aria-labelledby="button-template-url">
+        <ul class="uib-dropdown-menu" role="menu" aria-labelledby="button-template-url">
           <li role="menuitem"><a href="#">Action in Template</a></li>
           <li role="menuitem"><a href="#">Another action in Template</a></li>
           <li role="menuitem"><a href="#">Something else here</a></li>
diff --git a/src/dropdown/docs/readme.md b/src/dropdown/docs/readme.md
index ff94a1cca1..b8571a175a 100644
--- a/src/dropdown/docs/readme.md
+++ b/src/dropdown/docs/readme.md
@@ -1,12 +1,12 @@
 
 Dropdown is a simple directive which will toggle a dropdown menu on click or programmatically.
-You can either use `is-open` to toggle or add inside a `<a dropdown-toggle>` element to toggle it when is clicked.
+You can either use `is-open` to toggle or add inside a `<a uib-dropdown-toggle>` element to toggle it when is clicked.
 There is also the `on-toggle(open)` optional expression fired when dropdown changes state.
 
-Add `dropdown-append-to-body` to the `dropdown` element to append to the inner `dropdown-menu` to the body.
+Add `dropdown-append-to-body` to the `uib-dropdown` element to append to the inner `dropdown-menu` to the body.
 This is useful when the dropdown button is inside a div with `overflow: hidden`, and the menu would otherwise be hidden.
 
-Add `keyboard-nav` to the `dropdown` element to enable navigation of dropdown list elements with the arrow keys.
+Add `uib-keyboard-nav` to the `uib-dropdown` element to enable navigation of dropdown list elements with the arrow keys.
 
 By default the dropdown will automatically close if any of its elements is clicked, you can change this behavior by setting the `auto-close` option as follows:
 
@@ -16,4 +16,4 @@ By default the dropdown will automatically close if any of its elements is click
 
 Optionally, you may specify a template for the dropdown menu using the `template-url` attribute. This is especially useful when you have multiple similar dropdowns in a repeater and you want to keep your HTML output lean and your number of scopes to a minimum. The template has full access to the scope in which the dropdown lies.
 
-Example: `<ul class="dropdown-menu" template-url="custom-dropdown.html"></ul>`.
+Example: `<ul class="uib-dropdown-menu" template-url="custom-dropdown.html"></ul>`.
diff --git a/src/dropdown/dropdown.js b/src/dropdown/dropdown.js
index fdb4e8b180..b41f1693d4 100644
--- a/src/dropdown/dropdown.js
+++ b/src/dropdown/dropdown.js
@@ -1,10 +1,10 @@
 angular.module('ui.bootstrap.dropdown', ['ui.bootstrap.position'])
 
-.constant('dropdownConfig', {
+.constant('uibDropdownConfig', {
   openClass: 'open'
 })
 
-.service('dropdownService', ['$document', '$rootScope', function($document, $rootScope) {
+.service('uibDropdownService', ['$document', '$rootScope', function($document, $rootScope) {
   var openScope = null;
 
   this.open = function(dropdownScope) {
@@ -57,8 +57,7 @@ angular.module('ui.bootstrap.dropdown', ['ui.bootstrap.position'])
     if (evt.which === 27) {
       openScope.focusToggleElement();
       closeDropdown();
-    }
-    else if (openScope.isKeynavEnabled() && /(38|40)/.test(evt.which) && openScope.isOpen) {
+    } else if (openScope.isKeynavEnabled() && /(38|40)/.test(evt.which) && openScope.isOpen) {
       evt.preventDefault();
       evt.stopPropagation();
       openScope.focusDropdownEntry(evt.which);
@@ -66,7 +65,7 @@ angular.module('ui.bootstrap.dropdown', ['ui.bootstrap.position'])
   };
 }])
 
-.controller('DropdownController', ['$scope', '$attrs', '$parse', 'dropdownConfig', 'dropdownService', '$animate', '$position', '$document', '$compile', '$templateRequest', function($scope, $attrs, $parse, dropdownConfig, dropdownService, $animate, $position, $document, $compile, $templateRequest) {
+.controller('UibDropdownController', ['$scope', '$element', '$attrs', '$parse', 'uibDropdownConfig', 'uibDropdownService', '$animate', '$uibPosition', '$document', '$compile', '$templateRequest', function($scope, $element, $attrs, $parse, dropdownConfig, uibDropdownService, $animate, $position, $document, $compile, $templateRequest) {
   var self = this,
     scope = $scope.$new(), // create a child scope so we are not polluting original one
     templateScope,
@@ -78,9 +77,10 @@ angular.module('ui.bootstrap.dropdown', ['ui.bootstrap.position'])
     keynavEnabled =false,
     selectedOption = null;
 
-  this.init = function(element) {
-    self.$element = element;
 
+  $element.addClass('dropdown');
+
+  this.init = function() {
     if ($attrs.isOpen) {
       getIsOpen = $parse($attrs.isOpen);
       setIsOpen = getIsOpen.assign;
@@ -91,11 +91,11 @@ angular.module('ui.bootstrap.dropdown', ['ui.bootstrap.position'])
     }
 
     appendToBody = angular.isDefined($attrs.dropdownAppendToBody);
-    keynavEnabled = angular.isDefined($attrs.keyboardNav);
+    keynavEnabled = angular.isDefined($attrs.uibKeyboardNav);
 
     if (appendToBody && self.dropdownMenu) {
-      $document.find('body').append( self.dropdownMenu );
-      element.on('$destroy', function handleDestroyEvent() {
+      $document.find('body').append(self.dropdownMenu);
+      $element.on('$destroy', function handleDestroyEvent() {
         self.dropdownMenu.remove();
       });
     }
@@ -119,7 +119,7 @@ angular.module('ui.bootstrap.dropdown', ['ui.bootstrap.position'])
   };
 
   scope.getElement = function() {
-    return self.$element;
+    return $element;
   };
 
   scope.isKeynavEnabled = function() {
@@ -129,7 +129,7 @@ angular.module('ui.bootstrap.dropdown', ['ui.bootstrap.position'])
   scope.focusDropdownEntry = function(keyCode) {
     var elems = self.dropdownMenu ? //If append to body is used.
       (angular.element(self.dropdownMenu).find('a')) :
-      (angular.element(self.$element).find('ul').eq(0).find('a'));
+      (angular.element($element).find('ul').eq(0).find('a'));
 
     switch (keyCode) {
       case (40): {
@@ -144,7 +144,7 @@ angular.module('ui.bootstrap.dropdown', ['ui.bootstrap.position'])
       }
       case (38): {
         if (!angular.isNumber(self.selectedOption)) {
-          return;
+          self.selectedOption = elems.length - 1;
         } else {
           self.selectedOption = self.selectedOption === 0 ?
             0 : self.selectedOption - 1;
@@ -167,27 +167,27 @@ angular.module('ui.bootstrap.dropdown', ['ui.bootstrap.position'])
 
   scope.$watch('isOpen', function(isOpen, wasOpen) {
     if (appendToBody && self.dropdownMenu) {
-      var pos = $position.positionElements(self.$element, self.dropdownMenu, 'bottom-left', true);
+      var pos = $position.positionElements($element, self.dropdownMenu, 'bottom-left', true);
       var css = {
-          top: pos.top + 'px',
-          display: isOpen ? 'block' : 'none'
+        top: pos.top + 'px',
+        display: isOpen ? 'block' : 'none'
       };
 
       var rightalign = self.dropdownMenu.hasClass('dropdown-menu-right');
       if (!rightalign) {
-          css.left = pos.left + 'px';
-          css.right = 'auto';
+        css.left = pos.left + 'px';
+        css.right = 'auto';
       } else {
-          css.left = 'auto';
-          css.right = (window.innerWidth - (pos.left + self.$element.prop('offsetWidth'))) + 'px';
+        css.left = 'auto';
+        css.right = (window.innerWidth - (pos.left + $element.prop('offsetWidth'))) + 'px';
       }
 
       self.dropdownMenu.css(css);
     }
 
-    $animate[isOpen ? 'addClass' : 'removeClass'](self.$element, openClass).then(function() {
+    $animate[isOpen ? 'addClass' : 'removeClass']($element, openClass).then(function() {
       if (angular.isDefined(isOpen) && isOpen !== wasOpen) {
-         toggleInvoker($scope, { open: !!isOpen });
+        toggleInvoker($scope, { open: !!isOpen });
       }
     });
 
@@ -204,7 +204,7 @@ angular.module('ui.bootstrap.dropdown', ['ui.bootstrap.position'])
       }
 
       scope.focusToggleElement();
-      dropdownService.open(scope);
+      uibDropdownService.open(scope);
     } else {
       if (self.dropdownMenuTemplateUrl) {
         if (templateScope) {
@@ -215,7 +215,7 @@ angular.module('ui.bootstrap.dropdown', ['ui.bootstrap.position'])
         self.dropdownMenu = newEl;
       }
 
-      dropdownService.close(scope);
+      uibDropdownService.close(scope);
       self.selectedOption = null;
     }
 
@@ -230,22 +230,323 @@ angular.module('ui.bootstrap.dropdown', ['ui.bootstrap.position'])
     }
   });
 
-  $scope.$on('$destroy', function() {
+  var offDestroy = $scope.$on('$destroy', function() {
     scope.$destroy();
   });
+  scope.$on('$destroy', offDestroy);
 }])
 
-.directive('dropdown', function() {
+.directive('uibDropdown', function() {
   return {
-    controller: 'DropdownController',
+    controller: 'UibDropdownController',
     link: function(scope, element, attrs, dropdownCtrl) {
-      dropdownCtrl.init( element );
-      element.addClass('dropdown');
+      dropdownCtrl.init();
     }
   };
 })
 
-.directive('dropdownMenu', function() {
+.directive('uibDropdownMenu', function() {
+  return {
+    restrict: 'AC',
+    require: '?^uibDropdown',
+    link: function(scope, element, attrs, dropdownCtrl) {
+      if (!dropdownCtrl || angular.isDefined(attrs.dropdownNested)) {
+        return;
+      }
+
+      element.addClass('dropdown-menu');
+
+      var tplUrl = attrs.templateUrl;
+      if (tplUrl) {
+        dropdownCtrl.dropdownMenuTemplateUrl = tplUrl;
+      }
+
+      if (!dropdownCtrl.dropdownMenu) {
+        dropdownCtrl.dropdownMenu = element;
+      }
+    }
+  };
+})
+
+.directive('uibKeyboardNav', function() {
+  return {
+    restrict: 'A',
+    require: '?^uibDropdown',
+    link: function(scope, element, attrs, dropdownCtrl) {
+      element.bind('keydown', function(e) {
+        if ([38, 40].indexOf(e.which) !== -1) {
+          e.preventDefault();
+          e.stopPropagation();
+
+          var elems = dropdownCtrl.dropdownMenu.find('a');
+
+          switch (e.which) {
+            case (40): { // Down
+              if (!angular.isNumber(dropdownCtrl.selectedOption)) {
+                dropdownCtrl.selectedOption = 0;
+              } else {
+                dropdownCtrl.selectedOption = dropdownCtrl.selectedOption === elems.length -1 ?
+                  dropdownCtrl.selectedOption : dropdownCtrl.selectedOption + 1;
+              }
+              break;
+            }
+            case (38): { // Up
+              if (!angular.isNumber(dropdownCtrl.selectedOption)) {
+                dropdownCtrl.selectedOption = elems.length - 1;
+              } else {
+                dropdownCtrl.selectedOption = dropdownCtrl.selectedOption === 0 ?
+                  0 : dropdownCtrl.selectedOption - 1;
+              }
+              break;
+            }
+          }
+          elems[dropdownCtrl.selectedOption].focus();
+        }
+      });
+    }
+  };
+})
+
+.directive('uibDropdownToggle', function() {
+  return {
+    require: '?^uibDropdown',
+    link: function(scope, element, attrs, dropdownCtrl) {
+      if (!dropdownCtrl) {
+        return;
+      }
+
+      element.addClass('dropdown-toggle');
+
+      dropdownCtrl.toggleElement = element;
+
+      var toggleDropdown = function(event) {
+        event.preventDefault();
+
+        if (!element.hasClass('disabled') && !attrs.disabled) {
+          scope.$apply(function() {
+            dropdownCtrl.toggle();
+          });
+        }
+      };
+
+      element.bind('click', toggleDropdown);
+
+      // WAI-ARIA
+      element.attr({ 'aria-haspopup': true, 'aria-expanded': false });
+      scope.$watch(dropdownCtrl.isOpen, function(isOpen) {
+        element.attr('aria-expanded', !!isOpen);
+      });
+
+      scope.$on('$destroy', function() {
+        element.unbind('click', toggleDropdown);
+      });
+    }
+  };
+});
+
+/* Deprecated dropdown below */
+
+angular.module('ui.bootstrap.dropdown')
+
+.value('$dropdownSuppressWarning', false)
+
+.service('dropdownService', ['$log', '$dropdownSuppressWarning', 'uibDropdownService', function($log, $dropdownSuppressWarning, uibDropdownService) {
+  if (!$dropdownSuppressWarning) {
+    $log.warn('dropdownService is now deprecated. Use uibDropdownService instead.');
+  }
+
+  angular.extend(this, uibDropdownService);
+}])
+
+.controller('DropdownController', ['$scope', '$element', '$attrs', '$parse', 'uibDropdownConfig', 'uibDropdownService', '$animate', '$uibPosition', '$document', '$compile', '$templateRequest', '$log', '$dropdownSuppressWarning', function($scope, $element, $attrs, $parse, dropdownConfig, uibDropdownService, $animate, $position, $document, $compile, $templateRequest, $log, $dropdownSuppressWarning) {
+  if (!$dropdownSuppressWarning) {
+    $log.warn('DropdownController is now deprecated. Use UibDropdownController instead.');
+  }
+
+  var self = this,
+    scope = $scope.$new(), // create a child scope so we are not polluting original one
+    templateScope,
+    openClass = dropdownConfig.openClass,
+    getIsOpen,
+    setIsOpen = angular.noop,
+    toggleInvoker = $attrs.onToggle ? $parse($attrs.onToggle) : angular.noop,
+    appendToBody = false,
+    keynavEnabled =false,
+    selectedOption = null;
+
+
+  $element.addClass('dropdown');
+
+  this.init = function() {
+    if ($attrs.isOpen) {
+      getIsOpen = $parse($attrs.isOpen);
+      setIsOpen = getIsOpen.assign;
+
+      $scope.$watch(getIsOpen, function(value) {
+        scope.isOpen = !!value;
+      });
+    }
+
+    appendToBody = angular.isDefined($attrs.dropdownAppendToBody);
+    keynavEnabled = angular.isDefined($attrs.uibKeyboardNav);
+
+    if (appendToBody && self.dropdownMenu) {
+      $document.find('body').append(self.dropdownMenu);
+      $element.on('$destroy', function handleDestroyEvent() {
+        self.dropdownMenu.remove();
+      });
+    }
+  };
+
+  this.toggle = function(open) {
+    return scope.isOpen = arguments.length ? !!open : !scope.isOpen;
+  };
+
+  // Allow other directives to watch status
+  this.isOpen = function() {
+    return scope.isOpen;
+  };
+
+  scope.getToggleElement = function() {
+    return self.toggleElement;
+  };
+
+  scope.getAutoClose = function() {
+    return $attrs.autoClose || 'always'; //or 'outsideClick' or 'disabled'
+  };
+
+  scope.getElement = function() {
+    return $element;
+  };
+
+  scope.isKeynavEnabled = function() {
+    return keynavEnabled;
+  };
+
+  scope.focusDropdownEntry = function(keyCode) {
+    var elems = self.dropdownMenu ? //If append to body is used.
+      (angular.element(self.dropdownMenu).find('a')) :
+      (angular.element($element).find('ul').eq(0).find('a'));
+
+    switch (keyCode) {
+      case (40): {
+        if (!angular.isNumber(self.selectedOption)) {
+          self.selectedOption = 0;
+        } else {
+          self.selectedOption = (self.selectedOption === elems.length -1 ?
+            self.selectedOption :
+          self.selectedOption + 1);
+        }
+        break;
+      }
+      case (38): {
+        if (!angular.isNumber(self.selectedOption)) {
+          self.selectedOption = elems.length - 1;
+        } else {
+          self.selectedOption = self.selectedOption === 0 ?
+            0 : self.selectedOption - 1;
+        }
+        break;
+      }
+    }
+    elems[self.selectedOption].focus();
+  };
+
+  scope.getDropdownElement = function() {
+    return self.dropdownMenu;
+  };
+
+  scope.focusToggleElement = function() {
+    if (self.toggleElement) {
+      self.toggleElement[0].focus();
+    }
+  };
+
+  scope.$watch('isOpen', function(isOpen, wasOpen) {
+    if (appendToBody && self.dropdownMenu) {
+      var pos = $position.positionElements($element, self.dropdownMenu, 'bottom-left', true);
+      var css = {
+        top: pos.top + 'px',
+        display: isOpen ? 'block' : 'none'
+      };
+
+      var rightalign = self.dropdownMenu.hasClass('dropdown-menu-right');
+      if (!rightalign) {
+        css.left = pos.left + 'px';
+        css.right = 'auto';
+      } else {
+        css.left = 'auto';
+        css.right = (window.innerWidth - (pos.left + $element.prop('offsetWidth'))) + 'px';
+      }
+
+      self.dropdownMenu.css(css);
+    }
+
+    $animate[isOpen ? 'addClass' : 'removeClass']($element, openClass).then(function() {
+      if (angular.isDefined(isOpen) && isOpen !== wasOpen) {
+        toggleInvoker($scope, { open: !!isOpen });
+      }
+    });
+
+    if (isOpen) {
+      if (self.dropdownMenuTemplateUrl) {
+        $templateRequest(self.dropdownMenuTemplateUrl).then(function(tplContent) {
+          templateScope = scope.$new();
+          $compile(tplContent.trim())(templateScope, function(dropdownElement) {
+            var newEl = dropdownElement;
+            self.dropdownMenu.replaceWith(newEl);
+            self.dropdownMenu = newEl;
+          });
+        });
+      }
+
+      scope.focusToggleElement();
+      uibDropdownService.open(scope);
+    } else {
+      if (self.dropdownMenuTemplateUrl) {
+        if (templateScope) {
+          templateScope.$destroy();
+        }
+        var newEl = angular.element('<ul class="dropdown-menu"></ul>');
+        self.dropdownMenu.replaceWith(newEl);
+        self.dropdownMenu = newEl;
+      }
+
+      uibDropdownService.close(scope);
+      self.selectedOption = null;
+    }
+
+    if (angular.isFunction(setIsOpen)) {
+      setIsOpen($scope, isOpen);
+    }
+  });
+
+  $scope.$on('$locationChangeSuccess', function() {
+    if (scope.getAutoClose() !== 'disabled') {
+      scope.isOpen = false;
+    }
+  });
+
+  var offDestroy = $scope.$on('$destroy', function() {
+    scope.$destroy();
+  });
+  scope.$on('$destroy', offDestroy);
+}])
+
+.directive('dropdown', ['$log', '$dropdownSuppressWarning', function($log, $dropdownSuppressWarning) {
+  return {
+    controller: 'DropdownController',
+    link: function(scope, element, attrs, dropdownCtrl) {
+      if (!$dropdownSuppressWarning) {
+        $log.warn('dropdown is now deprecated. Use uib-dropdown instead.');
+      }
+
+      dropdownCtrl.init();
+    }
+  };
+}])
+
+.directive('dropdownMenu', ['$log', '$dropdownSuppressWarning', function($log, $dropdownSuppressWarning) {
   return {
     restrict: 'AC',
     require: '?^dropdown',
@@ -253,22 +554,33 @@ angular.module('ui.bootstrap.dropdown', ['ui.bootstrap.position'])
       if (!dropdownCtrl) {
         return;
       }
+
+      if (!$dropdownSuppressWarning) {
+        $log.warn('dropdown-menu is now deprecated. Use uib-dropdown-menu instead.');
+      }
+
+      element.addClass('dropdown-menu');
+
       var tplUrl = attrs.templateUrl;
       if (tplUrl) {
         dropdownCtrl.dropdownMenuTemplateUrl = tplUrl;
       }
+
       if (!dropdownCtrl.dropdownMenu) {
         dropdownCtrl.dropdownMenu = element;
       }
     }
   };
-})
+}])
 
-.directive('keyboardNav', function() {
+.directive('keyboardNav', ['$log', '$dropdownSuppressWarning', function($log, $dropdownSuppressWarning) {
   return {
     restrict: 'A',
     require: '?^dropdown',
-    link: function (scope, element, attrs, dropdownCtrl) {
+    link: function(scope, element, attrs, dropdownCtrl) {
+      if (!$dropdownSuppressWarning) {
+        $log.warn('keyboard-nav is now deprecated. Use uib-keyboard-nav instead.');
+      }
 
       element.bind('keydown', function(e) {
         if ([38, 40].indexOf(e.which) !== -1) {
@@ -288,8 +600,12 @@ angular.module('ui.bootstrap.dropdown', ['ui.bootstrap.position'])
               break;
             }
             case (38): { // Up
-              dropdownCtrl.selectedOption = dropdownCtrl.selectedOption === 0 ?
-                0 : dropdownCtrl.selectedOption - 1;
+              if (!angular.isNumber(dropdownCtrl.selectedOption)) {
+                dropdownCtrl.selectedOption = elems.length - 1;
+              } else {
+                dropdownCtrl.selectedOption = dropdownCtrl.selectedOption === 0 ?
+                  0 : dropdownCtrl.selectedOption - 1;
+              }
               break;
             }
           }
@@ -297,14 +613,17 @@ angular.module('ui.bootstrap.dropdown', ['ui.bootstrap.position'])
         }
       });
     }
-
   };
-})
+}])
 
-.directive('dropdownToggle', function() {
+.directive('dropdownToggle', ['$log', '$dropdownSuppressWarning', function($log, $dropdownSuppressWarning) {
   return {
     require: '?^dropdown',
     link: function(scope, element, attrs, dropdownCtrl) {
+      if (!$dropdownSuppressWarning) {
+        $log.warn('dropdown-toggle is now deprecated. Use uib-dropdown-toggle instead.');
+      }
+
       if (!dropdownCtrl) {
         return;
       }
@@ -327,7 +646,7 @@ angular.module('ui.bootstrap.dropdown', ['ui.bootstrap.position'])
 
       // WAI-ARIA
       element.attr({ 'aria-haspopup': true, 'aria-expanded': false });
-      scope.$watch(dropdownCtrl.isOpen, function( isOpen ) {
+      scope.$watch(dropdownCtrl.isOpen, function(isOpen) {
         element.attr('aria-expanded', !!isOpen);
       });
 
@@ -336,4 +655,5 @@ angular.module('ui.bootstrap.dropdown', ['ui.bootstrap.position'])
       });
     }
   };
-});
+}]);
+
diff --git a/src/dropdown/test/dropdown.spec.js b/src/dropdown/test/dropdown.spec.js
index ea693bfa6b..6d6a87d7d8 100644
--- a/src/dropdown/test/dropdown.spec.js
+++ b/src/dropdown/test/dropdown.spec.js
@@ -1,17 +1,18 @@
 describe('dropdownToggle', function() {
-  var $animate, $compile, $rootScope, $document, $templateCache, dropdownConfig, element, $browser;
+  var $animate, $compile, $rootScope, $document, $templateCache, dropdownConfig, element, $browser, $log;
 
   beforeEach(module('ngAnimateMock'));
   beforeEach(module('ui.bootstrap.dropdown'));
 
-  beforeEach(inject(function(_$animate_, _$compile_, _$rootScope_, _$document_, _$templateCache_, _dropdownConfig_, _$browser_) {
+  beforeEach(inject(function(_$animate_, _$compile_, _$rootScope_, _$document_, _$templateCache_, uibDropdownConfig, _$browser_, _$log_) {
     $animate = _$animate_;
     $compile = _$compile_;
     $rootScope = _$rootScope_;
     $document = _$document_;
     $templateCache = _$templateCache_;
-    dropdownConfig = _dropdownConfig_;
+    dropdownConfig = uibDropdownConfig;
     $browser = _$browser_;
+    $log = _$log_;
   }));
 
   afterEach(function() {
@@ -20,7 +21,7 @@ describe('dropdownToggle', function() {
 
   var clickDropdownToggle = function(elm) {
     elm = elm || element;
-    elm.find('a[dropdown-toggle]').click();
+    elm.find('a[uib-dropdown-toggle]').click();
   };
 
   var triggerKeyDown = function (element, keyCode) {
@@ -35,7 +36,7 @@ describe('dropdownToggle', function() {
 
   describe('basic', function() {
     function dropdown() {
-      return $compile('<li dropdown><a href dropdown-toggle></a><ul><li><a href>Hello</a></li></ul></li>')($rootScope);
+      return $compile('<li uib-dropdown><a href uib-dropdown-toggle></a><ul><li><a href>Hello</a></li></ul></li>')($rootScope);
     }
 
     beforeEach(function() {
@@ -106,20 +107,20 @@ describe('dropdownToggle', function() {
     });
 
     it('should not toggle if the element has `disabled` class', function() {
-      var elm = $compile('<li dropdown><a class="disabled" dropdown-toggle></a><ul><li>Hello</li></ul></li>')($rootScope);
+      var elm = $compile('<li uib-dropdown><a class="disabled" uib-dropdown-toggle></a><ul><li>Hello</li></ul></li>')($rootScope);
       clickDropdownToggle( elm );
       expect(elm.hasClass(dropdownConfig.openClass)).toBe(false);
     });
 
     it('should not toggle if the element is disabled', function() {
-      var elm = $compile('<li dropdown><button disabled="disabled" dropdown-toggle></button><ul><li>Hello</li></ul></li>')($rootScope);
+      var elm = $compile('<li uib-dropdown><button disabled="disabled" uib-dropdown-toggle></button><ul><li>Hello</li></ul></li>')($rootScope);
       elm.find('button').click();
       expect(elm.hasClass(dropdownConfig.openClass)).toBe(false);
     });
 
     it('should not toggle if the element has `ng-disabled` as true', function() {
       $rootScope.isdisabled = true;
-      var elm = $compile('<li dropdown><div ng-disabled="isdisabled" dropdown-toggle></div><ul><li>Hello</li></ul></li>')($rootScope);
+      var elm = $compile('<li uib-dropdown><div ng-disabled="isdisabled" uib-dropdown-toggle></div><ul><li>Hello</li></ul></li>')($rootScope);
       $rootScope.$digest();
       elm.find('div').click();
       expect(elm.hasClass(dropdownConfig.openClass)).toBe(false);
@@ -132,7 +133,7 @@ describe('dropdownToggle', function() {
 
     it('should unbind events on scope destroy', function() {
       var $scope = $rootScope.$new();
-      var elm = $compile('<li dropdown><button ng-disabled="isdisabled" dropdown-toggle></button><ul><li>Hello</li></ul></li>')($scope);
+      var elm = $compile('<li uib-dropdown><button ng-disabled="isdisabled" uib-dropdown-toggle></button><ul><li>Hello</li></ul></li>')($scope);
       $scope.$digest();
 
       var buttonEl = elm.find('button');
@@ -189,9 +190,9 @@ describe('dropdownToggle', function() {
 
   describe('using dropdownMenuTemplate', function() {
     function dropdown() {
-      $templateCache.put('custom.html', '<ul class="dropdown-menu"><li>Item 1</li></ul>');
+      $templateCache.put('custom.html', '<ul class="uib-dropdown-menu"><li>Item 1</li></ul>');
 
-      return $compile('<li dropdown><a href dropdown-toggle></a><ul class="dropdown-menu" template-url="custom.html"></ul></li>')($rootScope);
+      return $compile('<li uib-dropdown><a href uib-dropdown-toggle></a><ul class="uib-dropdown-menu" template-url="custom.html"></ul></li>')($rootScope);
     }
 
     beforeEach(function() {
@@ -200,20 +201,20 @@ describe('dropdownToggle', function() {
 
     it('should apply custom template for dropdown menu', function() {
       element.find('a').click();
-      expect(element.find('ul.dropdown-menu').eq(0).find('li').eq(0).text()).toEqual('Item 1');
+      expect(element.find('ul.uib-dropdown-menu').eq(0).find('li').eq(0).text()).toEqual('Item 1');
     });
 
     it('should clear ul when dropdown menu is closed', function() {
       element.find('a').click();
-      expect(element.find('ul.dropdown-menu').eq(0).find('li').eq(0).text()).toEqual('Item 1');
+      expect(element.find('ul.uib-dropdown-menu').eq(0).find('li').eq(0).text()).toEqual('Item 1');
       element.find('a').click();
-      expect(element.find('ul.dropdown-menu').eq(0).find('li').length).toEqual(0);
+      expect(element.find('ul.uib-dropdown-menu').eq(0).find('li').length).toEqual(0);
     });
   });
 
   describe('using dropdown-append-to-body', function() {
     function dropdown() {
-      return $compile('<li dropdown dropdown-append-to-body><a href dropdown-toggle></a><ul class="dropdown-menu" id="dropdown-menu"><li><a href>Hello On Body</a></li></ul></li>')($rootScope);
+      return $compile('<li uib-dropdown dropdown-append-to-body><a href uib-dropdown-toggle></a><ul class="uib-dropdown-menu" id="dropdown-menu"><li><a href>Hello On Body</a></li></ul></li>')($rootScope);
     }
 
     beforeEach(function() {
@@ -233,14 +234,13 @@ describe('dropdownToggle', function() {
 
   describe('integration with $location URL rewriting', function() {
     function dropdown() {
-
       // Simulate URL rewriting behavior
       $document.on('click', 'a[href="#something"]', function() {
         $rootScope.$broadcast('$locationChangeSuccess');
         $rootScope.$apply();
       });
 
-      return $compile('<li dropdown><a href dropdown-toggle></a>' +
+      return $compile('<li uib-dropdown><a href uib-dropdown-toggle></a>' +
         '<ul><li><a href="#something">Hello</a></li></ul></li>')($rootScope);
     }
 
@@ -261,7 +261,7 @@ describe('dropdownToggle', function() {
   describe('without trigger', function() {
     beforeEach(function() {
       $rootScope.isopen = true;
-      element = $compile('<li dropdown is-open="isopen"><ul><li>Hello</li></ul></li>')($rootScope);
+      element = $compile('<li uib-dropdown is-open="isopen"><ul><li>Hello</li></ul></li>')($rootScope);
       $rootScope.$digest();
     });
 
@@ -279,7 +279,7 @@ describe('dropdownToggle', function() {
   describe('`is-open`', function() {
     beforeEach(function() {
       $rootScope.isopen = true;
-      element = $compile('<li dropdown is-open="isopen"><a href dropdown-toggle></a><ul><li>Hello</li></ul></li>')($rootScope);
+      element = $compile('<li uib-dropdown is-open="isopen"><a href uib-dropdown-toggle></a><ul><li>Hello</li></ul></li>')($rootScope);
       $rootScope.$digest();
     });
 
@@ -314,7 +314,7 @@ describe('dropdownToggle', function() {
     beforeEach(function() {
       $rootScope.toggleHandler = jasmine.createSpy('toggleHandler');
       $rootScope.isopen = false;
-      element = $compile('<li dropdown on-toggle="toggleHandler(open)"  is-open="isopen"><a dropdown-toggle></a><ul><li>Hello</li></ul></li>')($rootScope);
+      element = $compile('<li uib-dropdown on-toggle="toggleHandler(open)"  is-open="isopen"><a uib-dropdown-toggle></a><ul><li>Hello</li></ul></li>')($rootScope);
       $rootScope.$digest();
     });
 
@@ -325,11 +325,14 @@ describe('dropdownToggle', function() {
     it('should call it correctly when toggles', function() {
       $rootScope.isopen = true;
       $rootScope.$digest();
-      $animate.triggerCallbacks();
+
+      $animate.flush();
+      $rootScope.$digest();
       expect($rootScope.toggleHandler).toHaveBeenCalledWith(true);
 
       clickDropdownToggle();
-      $animate.triggerCallbacks();
+      $animate.flush();
+      $rootScope.$digest();
       expect($rootScope.toggleHandler).toHaveBeenCalledWith(false);
     });
   });
@@ -338,24 +341,27 @@ describe('dropdownToggle', function() {
     beforeEach(function() {
       $rootScope.toggleHandler = jasmine.createSpy('toggleHandler');
       $rootScope.isopen = true;
-      element = $compile('<li dropdown on-toggle="toggleHandler(open)" is-open="isopen"><a dropdown-toggle></a><ul><li>Hello</li></ul></li>')($rootScope);
+      element = $compile('<li uib-dropdown on-toggle="toggleHandler(open)" is-open="isopen"><a uib-dropdown-toggle></a><ul><li>Hello</li></ul></li>')($rootScope);
       $rootScope.$digest();
     });
 
     it('should not have been called initially', function() {
-      $animate.triggerCallbacks();
       expect($rootScope.toggleHandler).not.toHaveBeenCalled();
     });
 
     it('should call it correctly when toggles', function() {
       $rootScope.isopen = false;
       $rootScope.$digest();
-      $animate.triggerCallbacks();
+
+      $animate.flush();
+      $rootScope.$digest();
       expect($rootScope.toggleHandler).toHaveBeenCalledWith(false);
 
       $rootScope.isopen = true;
       $rootScope.$digest();
-      $animate.triggerCallbacks();
+
+      $animate.flush();
+      $rootScope.$digest();
       expect($rootScope.toggleHandler).toHaveBeenCalledWith(true);
     });
   });
@@ -363,31 +369,34 @@ describe('dropdownToggle', function() {
   describe('`on-toggle` without is-open', function() {
     beforeEach(function() {
       $rootScope.toggleHandler = jasmine.createSpy('toggleHandler');
-      element = $compile('<li dropdown on-toggle="toggleHandler(open)"><a dropdown-toggle></a><ul><li>Hello</li></ul></li>')($rootScope);
+      element = $compile('<li uib-dropdown on-toggle="toggleHandler(open)"><a uib-dropdown-toggle></a><ul><li>Hello</li></ul></li>')($rootScope);
       $rootScope.$digest();
     });
 
     it('should not have been called initially', function() {
-      $animate.triggerCallbacks();
       expect($rootScope.toggleHandler).not.toHaveBeenCalled();
     });
 
     it('should call it when clicked', function() {
       clickDropdownToggle();
-      $animate.triggerCallbacks();
+
+      $animate.flush();
+      $rootScope.$digest();
       expect($rootScope.toggleHandler).toHaveBeenCalledWith(true);
 
       clickDropdownToggle();
-      $animate.triggerCallbacks();
+
+      $animate.flush();
+      $rootScope.$digest();
       expect($rootScope.toggleHandler).toHaveBeenCalledWith(false);
     });
   });
 
   describe('`auto-close` option', function() {
     function dropdown(autoClose) {
-      return $compile('<li dropdown ' +
+      return $compile('<li uib-dropdown ' +
         (autoClose === void 0 ? '' : 'auto-close="'+autoClose+'"') +
-        '><a href dropdown-toggle></a><ul><li><a href>Hello</a></li></ul></li>')($rootScope);
+        '><a href uib-dropdown-toggle></a><ul><li><a href>Hello</a></li></ul></li>')($rootScope);
     }
 
     it('should close on document click if no auto-close is specified', function() {
@@ -426,7 +435,7 @@ describe('dropdownToggle', function() {
       });
 
       it('should work with dropdown-append-to-body', function() {
-        element = $compile('<li dropdown dropdown-append-to-body auto-close="outsideClick"><a href dropdown-toggle></a><ul class="dropdown-menu" id="dropdown-menu"><li><a href>Hello On Body</a></li></ul></li>')($rootScope);
+        element = $compile('<li uib-dropdown dropdown-append-to-body auto-close="outsideClick"><a href uib-dropdown-toggle></a><ul class="uib-dropdown-menu" id="dropdown-menu"><li><a href>Hello On Body</a></li></ul></li>')($rootScope);
         clickDropdownToggle();
         expect(element.hasClass(dropdownConfig.openClass)).toBe(true);
         $document.find('#dropdown-menu').find('li').eq(0).trigger('click');
@@ -438,7 +447,7 @@ describe('dropdownToggle', function() {
 
     it('control with is-open', function() {
       $rootScope.isopen = true;
-      element = $compile('<li dropdown is-open="isopen" auto-close="disabled"><a href dropdown-toggle></a><ul><li>Hello</li></ul></li>')($rootScope);
+      element = $compile('<li uib-dropdown is-open="isopen" auto-close="disabled"><a href uib-dropdown-toggle></a><ul><li>Hello</li></ul></li>')($rootScope);
       $rootScope.$digest();
 
       expect(element.hasClass(dropdownConfig.openClass)).toBe(true);
@@ -494,7 +503,7 @@ describe('dropdownToggle', function() {
 
   describe('`keyboard-nav` option', function() {
     function dropdown() {
-      return $compile('<li dropdown keyboard-nav><a href dropdown-toggle></a><ul><li><a href>Hello</a></li><li><a href>Hello Again</a></li></ul></li>')($rootScope);
+      return $compile('<li uib-dropdown uib-keyboard-nav><a href uib-dropdown-toggle></a><ul><li><a href>Hello</a></li><li><a href>Hello Again</a></li></ul></li>')($rootScope);
     }
     beforeEach(function() {
       element = dropdown();
@@ -533,7 +542,7 @@ describe('dropdownToggle', function() {
 
   describe('`keyboard-nav` option', function() {
     function dropdown() {
-      return $compile('<li dropdown keyboard-nav><a href dropdown-toggle></a><ul><li><a href>Hello</a></li><li><a href>Hello Again</a></li></ul></li>')($rootScope);
+      return $compile('<li uib-dropdown uib-keyboard-nav><a href uib-dropdown-toggle></a><ul><li><a href>Hello</a></li><li><a href>Hello Again</a></li></ul></li>')($rootScope);
     }
     beforeEach(function() {
       element = dropdown();
@@ -559,6 +568,16 @@ describe('dropdownToggle', function() {
       expect(isFocused(focusEl)).toBe(false);
     });
 
+    it('should focus last list element when up arrow pressed after dropdown toggled', function() {
+      $document.find('body').append(element);
+      clickDropdownToggle();
+      triggerKeyDown($document, 38);
+
+      expect(element.hasClass(dropdownConfig.openClass)).toBe(true);
+      var focusEl = element.find('ul').eq(0).find('a').eq(1);
+      expect(isFocused(focusEl)).toBe(true);
+    });
+
     it('should not focus any list element when down arrow pressed if closed', function() {
       $document.find('body').append(element);
       triggerKeyDown($document, 40);
@@ -636,7 +655,7 @@ describe('dropdownToggle', function() {
 
   describe('`keyboard-nav` option with `dropdown-append-to-body` option', function() {
     function dropdown() {
-      return $compile('<li dropdown dropdown-append-to-body keyboard-nav><a href dropdown-toggle></a><ul class="dropdown-menu" id="dropdown-menu"><li><a href>Hello On Body</a></li><li><a href>Hello Again</a></li></ul></li>')($rootScope);
+      return $compile('<li uib-dropdown dropdown-append-to-body uib-keyboard-nav><a href uib-dropdown-toggle></a><ul class="uib-dropdown-menu" id="dropdown-menu"><li><a href>Hello On Body</a></li><li><a href>Hello Again</a></li></ul></li>')($rootScope);
     }
 
     beforeEach(function() {
@@ -666,3 +685,43 @@ describe('dropdownToggle', function() {
     });
   });
 });
+
+/* Deprecation tests below */
+
+describe('dropdown deprecation', function() {
+  beforeEach(module('ngAnimateMock'));
+  beforeEach(module('ui.bootstrap.dropdown'));
+  
+  it('should suppress warning', function() {
+    module(function($provide) {
+      $provide.value('$dropdownSuppressWarning', true);
+    });
+    
+    inject(function($compile, $log, $rootScope) {
+      spyOn($log, 'warn');
+      var element = $compile('<li dropdown><a href dropdown-toggle></a><ul><li><a href>Hello</a></li></ul></li>')($rootScope);
+      $rootScope.$digest();
+      expect($log.warn.calls.count()).toBe(0);
+    });
+  });
+  
+  it('should give warning by default', inject(function($compile, $log, $rootScope) {
+    spyOn($log, 'warn');
+    var element = $compile('<li dropdown><a href></a><ul><li><a href dropdown-toggle>Hello</a></li></ul></li>')($rootScope);
+    $rootScope.$digest();
+    expect($log.warn.calls.count()).toBe(3);
+    expect($log.warn.calls.argsFor(0)).toEqual(['DropdownController is now deprecated. Use UibDropdownController instead.']);
+    expect($log.warn.calls.argsFor(1)).toEqual(['dropdown-toggle is now deprecated. Use uib-dropdown-toggle instead.']);
+    expect($log.warn.calls.argsFor(2)).toEqual(['dropdown is now deprecated. Use uib-dropdown instead.']);
+  }));
+  
+  it('should give warning by default for keyboardNav', inject(function($compile, $log, $rootScope) {
+    spyOn($log, 'warn');
+    var element = $compile('<li dropdown keyboard-nav><a href ></a><ul><li><a href>Hello</a></li></ul></li>')($rootScope);
+    $rootScope.$digest();
+    expect($log.warn.calls.count()).toBe(3);
+    expect($log.warn.calls.argsFor(0)).toEqual(['DropdownController is now deprecated. Use UibDropdownController instead.']);
+    expect($log.warn.calls.argsFor(1)).toEqual(['keyboard-nav is now deprecated. Use uib-keyboard-nav instead.']);
+    expect($log.warn.calls.argsFor(2)).toEqual(['dropdown is now deprecated. Use uib-dropdown instead.']);
+  }));
+});
diff --git a/src/modal/docs/demo.js b/src/modal/docs/demo.js
index 4e1823c72f..07fba73d75 100644
--- a/src/modal/docs/demo.js
+++ b/src/modal/docs/demo.js
@@ -1,4 +1,4 @@
-angular.module('ui.bootstrap.demo').controller('ModalDemoCtrl', function ($scope, $modal, $log) {
+angular.module('ui.bootstrap.demo').controller('ModalDemoCtrl', function ($scope, $uibModal, $log) {
 
   $scope.items = ['item1', 'item2', 'item3'];
 
@@ -6,7 +6,7 @@ angular.module('ui.bootstrap.demo').controller('ModalDemoCtrl', function ($scope
 
   $scope.open = function (size) {
 
-    var modalInstance = $modal.open({
+    var modalInstance = $uibModal.open({
       animation: $scope.animationsEnabled,
       templateUrl: 'myModalContent.html',
       controller: 'ModalInstanceCtrl',
@@ -32,7 +32,7 @@ angular.module('ui.bootstrap.demo').controller('ModalDemoCtrl', function ($scope
 });
 
 // Please note that $modalInstance represents a modal window (instance) dependency.
-// It is not the same as the $modal service used above.
+// It is not the same as the $uibModal service used above.
 
 angular.module('ui.bootstrap.demo').controller('ModalInstanceCtrl', function ($scope, $modalInstance, items) {
 
diff --git a/src/modal/docs/readme.md b/src/modal/docs/readme.md
index 9c444f9201..1bf72279b5 100644
--- a/src/modal/docs/readme.md
+++ b/src/modal/docs/readme.md
@@ -1,11 +1,11 @@
-`$modal` is a service to quickly create AngularJS-powered modal windows.
+`$uibModal` is a service to quickly create AngularJS-powered modal windows.
 Creating custom modals is straightforward: create a partial view, its controller and reference them when using the service.
 
-The `$modal` service has only one method: `open(options)` where available options are like follows:
+The `$uibModal` service has only one method: `open(options)` where available options are like follows:
 
 * `templateUrl` - a path to a template representing modal's content
 * `template` - inline template representing the modal's content
-* `scope` - a scope instance to be used for the modal's content (actually the `$modal` service is going to create a child scope of a provided scope). Defaults to `$rootScope`
+* `scope` - a scope instance to be used for the modal's content (actually the `$uibModal` service is going to create a child scope of a provided scope). Defaults to `$rootScope`
 * `controller` - a controller for a modal instance - it can initialize scope used by modal. Accepts the "controller-as" syntax in the form 'SomeCtrl as myctrl'; can be injected with `$modalInstance`
 * `controllerAs` - an alternative to the controller-as syntax, matching the API of directive definitions. Requires the `controller` option to be provided as well
 * `bindToController` - when used with `controllerAs` & set to `true`, it will bind the $scope properties onto the controller directly
@@ -15,11 +15,12 @@ The `$modal` service has only one method: `open(options)` where available option
 * `keyboard` - indicates whether the dialog should be closable by hitting the ESC key, defaults to true
 * `backdropClass` - additional CSS class(es) to be added to a modal backdrop template
 * `windowClass` - additional CSS class(es) to be added to a modal window template
+* `windowTopClass` - CSS class(es) to be added to the top modal window
 * `windowTemplateUrl` - a path to a template overriding modal's window template
 * `size` - optional suffix of modal window class. The value used is appended to the `modal-` class, i.e. a value of `sm` gives `modal-sm`
 * `openedClass` - class added to the `body` element when the modal is opened. Defaults to `modal-open`
 
-Global defaults may be set for `$modal` via `$modalProvider.options`.
+Global defaults may be set for `$uibModal` via `$uibModalProvider.options`.
 
 The `open` method returns a modal instance, an object with the following properties:
 
diff --git a/src/modal/modal.js b/src/modal/modal.js
index 68a458eb9f..92d0885297 100644
--- a/src/modal/modal.js
+++ b/src/modal/modal.js
@@ -1,53 +1,53 @@
-angular.module('ui.bootstrap.modal', [])
-
+angular.module('ui.bootstrap.modal', ['ui.bootstrap.stackedMap'])
 /**
- * A helper, internal data structure that acts as a map but also allows getting / removing
- * elements in the LIFO order
+ * A helper, internal data structure that stores all references attached to key
  */
-  .factory('$$stackedMap', function() {
+  .factory('$$multiMap', function() {
     return {
       createNew: function() {
-        var stack = [];
+        var map = {};
 
         return {
-          add: function(key, value) {
-            stack.push({
-              key: key,
-              value: value
+          entries: function() {
+            return Object.keys(map).map(function(key) {
+              return {
+                key: key,
+                value: map[key]
+              };
             });
           },
           get: function(key) {
-            for (var i = 0; i < stack.length; i++) {
-              if (key == stack[i].key) {
-                return stack[i];
-              }
-            }
+            return map[key];
           },
-          keys: function() {
-            var keys = [];
-            for (var i = 0; i < stack.length; i++) {
-              keys.push(stack[i].key);
-            }
-            return keys;
+          hasKey: function(key) {
+            return !!map[key];
           },
-          top: function() {
-            return stack[stack.length - 1];
+          keys: function() {
+            return Object.keys(map);
           },
-          remove: function(key) {
-            var idx = -1;
-            for (var i = 0; i < stack.length; i++) {
-              if (key == stack[i].key) {
-                idx = i;
-                break;
-              }
+          put: function(key, value) {
+            if (!map[key]) {
+              map[key] = [];
             }
-            return stack.splice(idx, 1)[0];
-          },
-          removeTop: function() {
-            return stack.splice(stack.length - 1, 1)[0];
+
+            map[key].push(value);
           },
-          length: function() {
-            return stack.length;
+          remove: function(key, value) {
+            var values = map[key];
+
+            if (!values) {
+              return;
+            }
+
+            var idx = values.indexOf(value);
+
+            if (idx !== -1) {
+              values.splice(idx, 1);
+            }
+
+            if (!values.length) {
+              delete map[key];
+            }
           }
         };
       }
@@ -57,8 +57,8 @@ angular.module('ui.bootstrap.modal', [])
 /**
  * A helper directive for the $modal service. It creates a backdrop element.
  */
-  .directive('modalBackdrop', [
-           '$animate', '$injector', '$modalStack',
+  .directive('uibModalBackdrop', [
+           '$animate', '$injector', '$uibModalStack',
   function($animate ,  $injector,   $modalStack) {
     var $animateCss = null;
 
@@ -67,7 +67,6 @@ angular.module('ui.bootstrap.modal', [])
     }
 
     return {
-      restrict: 'EA',
       replace: true,
       templateUrl: 'template/modal/backdrop.html',
       compile: function(tElement, tAttrs) {
@@ -77,6 +76,9 @@ angular.module('ui.bootstrap.modal', [])
     };
 
     function linkFn(scope, element, attrs) {
+      // Temporary fix for prefixing
+      element.addClass('modal-backdrop');
+
       if (attrs.modalInClass) {
         if ($animateCss) {
           $animateCss(element, {
@@ -100,8 +102,8 @@ angular.module('ui.bootstrap.modal', [])
     }
   }])
 
-  .directive('modalWindow', [
-           '$modalStack', '$q', '$animate', '$injector',
+  .directive('uibModalWindow', [
+           '$uibModalStack', '$q', '$animate', '$injector',
   function($modalStack ,  $q ,  $animate,   $injector) {
     var $animateCss = null;
 
@@ -110,7 +112,6 @@ angular.module('ui.bootstrap.modal', [])
     }
 
     return {
-      restrict: 'EA',
       scope: {
         index: '@'
       },
@@ -121,6 +122,7 @@ angular.module('ui.bootstrap.modal', [])
       },
       link: function(scope, element, attrs) {
         element.addClass(attrs.windowClass || '');
+        element.addClass(attrs.windowTopClass || '');
         scope.size = attrs.size;
 
         scope.close = function(evt) {
@@ -132,6 +134,9 @@ angular.module('ui.bootstrap.modal', [])
           }
         };
 
+        // moved from template to fix issue #2280
+        element.on('click', scope.close);
+
         // This property is only added to the scope for the purpose of detecting when this directive is rendered.
         // We can detect that by using this property in the template associated with this directive and then use
         // {@link Attribute#$observe} on it. For more details please see {@link TableColumnResize}.
@@ -148,13 +153,15 @@ angular.module('ui.bootstrap.modal', [])
         });
 
         modalRenderDeferObj.promise.then(function() {
+          var animationPromise = null;
+
           if (attrs.modalInClass) {
             if ($animateCss) {
-              $animateCss(element, {
+              animationPromise = $animateCss(element, {
                 addClass: attrs.modalInClass
               }).start();
             } else {
-              $animate.addClass(element, attrs.modalInClass);
+              animationPromise = $animate.addClass(element, attrs.modalInClass);
             }
 
             scope.$on($modalStack.NOW_CLOSING_EVENT, function(e, setIsAsync) {
@@ -169,20 +176,23 @@ angular.module('ui.bootstrap.modal', [])
             });
           }
 
-          var inputsWithAutofocus = element[0].querySelectorAll('[autofocus]');
-          /**
-           * Auto-focusing of a freshly-opened modal element causes any child elements
-           * with the autofocus attribute to lose focus. This is an issue on touch
-           * based devices which will show and then hide the onscreen keyboard.
-           * Attempts to refocus the autofocus element via JavaScript will not reopen
-           * the onscreen keyboard. Fixed by updated the focusing logic to only autofocus
-           * the modal element if the modal does not contain an autofocus element.
-           */
-          if (inputsWithAutofocus.length) {
-            inputsWithAutofocus[0].focus();
-          } else {
-            element[0].focus();
-          }
+
+          $q.when(animationPromise).then(function() {
+            var inputsWithAutofocus = element[0].querySelectorAll('[autofocus]');
+            /**
+             * Auto-focusing of a freshly-opened modal element causes any child elements
+             * with the autofocus attribute to lose focus. This is an issue on touch
+             * based devices which will show and then hide the onscreen keyboard.
+             * Attempts to refocus the autofocus element via JavaScript will not reopen
+             * the onscreen keyboard. Fixed by updated the focusing logic to only autofocus
+             * the modal element if the modal does not contain an autofocus element.
+             */
+            if (inputsWithAutofocus.length) {
+              inputsWithAutofocus[0].focus();
+            } else {
+              element[0].focus();
+            }
+          });
 
           // Notify {@link $modalStack} that modal is rendered.
           var modal = $modalStack.getTop();
@@ -194,18 +204,17 @@ angular.module('ui.bootstrap.modal', [])
     };
   }])
 
-  .directive('modalAnimationClass', [
-    function () {
-      return {
-        compile: function(tElement, tAttrs) {
-          if (tAttrs.modalAnimation) {
-            tElement.addClass(tAttrs.modalAnimationClass);
-          }
+  .directive('uibModalAnimationClass', function() {
+    return {
+      compile: function(tElement, tAttrs) {
+        if (tAttrs.modalAnimation) {
+          tElement.addClass(tAttrs.uibModalAnimationClass);
         }
-      };
-    }])
+      }
+    };
+  })
 
-  .directive('modalTransclude', function() {
+  .directive('uibModalTransclude', function() {
     return {
       link: function($scope, $element, $attrs, controller, $transclude) {
         $transclude($scope.$parent, function(clone) {
@@ -216,14 +225,16 @@ angular.module('ui.bootstrap.modal', [])
     };
   })
 
-  .factory('$modalStack', [
+  .factory('$uibModalStack', [
              '$animate', '$timeout', '$document', '$compile', '$rootScope',
              '$q',
              '$injector',
+             '$$multiMap',
              '$$stackedMap',
     function($animate ,  $timeout ,  $document ,  $compile ,  $rootScope ,
               $q,
               $injector,
+              $$multiMap,
               $$stackedMap) {
       var $animateCss = null;
 
@@ -235,6 +246,7 @@ angular.module('ui.bootstrap.modal', [])
 
       var backdropDomEl, backdropScope;
       var openedWindows = $$stackedMap.createNew();
+      var openedClasses = $$multiMap.createNew();
       var $modalStack = {
         NOW_CLOSING_EVENT: 'modal.stack.now-closing'
       };
@@ -264,7 +276,6 @@ angular.module('ui.bootstrap.modal', [])
       });
 
       function removeModalWindow(modalInstance, elementToReceiveFocus) {
-
         var body = $document.find('body').eq(0);
         var modalWindow = openedWindows.get(modalInstance).value;
 
@@ -272,7 +283,10 @@ angular.module('ui.bootstrap.modal', [])
         openedWindows.remove(modalInstance);
 
         removeAfterAnimate(modalWindow.modalDomEl, modalWindow.modalScope, function() {
-          body.toggleClass(modalWindow.openedClass || OPENED_MODAL_CLASS, openedWindows.length() > 0);
+          var modalBodyClass = modalWindow.openedClass || OPENED_MODAL_CLASS;
+          openedClasses.remove(modalBodyClass, modalInstance);
+          body.toggleClass(modalBodyClass, openedClasses.hasKey(modalBodyClass));
+          toggleTopWindowClass(true);
         });
         checkRemoveBackdrop();
 
@@ -284,16 +298,26 @@ angular.module('ui.bootstrap.modal', [])
         }
       }
 
+      // Add or remove "windowTopClass" from the top window in the stack
+      function toggleTopWindowClass(toggleSwitch) {
+        var modalWindow;
+
+        if (openedWindows.length() > 0) {
+          modalWindow = openedWindows.top().value;
+          modalWindow.modalDomEl.toggleClass(modalWindow.windowTopClass || '', toggleSwitch);
+        }
+      }
+
       function checkRemoveBackdrop() {
-          //remove backdrop if no longer needed
-          if (backdropDomEl && backdropIndex() == -1) {
-            var backdropScopeRef = backdropScope;
-            removeAfterAnimate(backdropDomEl, backdropScope, function() {
-              backdropScopeRef = null;
-            });
-            backdropDomEl = undefined;
-            backdropScope = undefined;
-          }
+        //remove backdrop if no longer needed
+        if (backdropDomEl && backdropIndex() == -1) {
+          var backdropScopeRef = backdropScope;
+          removeAfterAnimate(backdropDomEl, backdropScope, function() {
+            backdropScopeRef = null;
+          });
+          backdropDomEl = undefined;
+          backdropScope = undefined;
+        }
       }
 
       function removeAfterAnimate(domEl, scope, done) {
@@ -345,7 +369,7 @@ angular.module('ui.bootstrap.modal', [])
 
         var modal = openedWindows.top();
         if (modal && modal.value.keyboard) {
-          switch (evt.which){
+          switch (evt.which) {
             case 27: {
               evt.preventDefault();
               $rootScope.$apply(function() {
@@ -377,7 +401,10 @@ angular.module('ui.bootstrap.modal', [])
       });
 
       $modalStack.open = function(modalInstance, modal) {
-        var modalOpener = $document[0].activeElement;
+        var modalOpener = $document[0].activeElement,
+          modalBodyClass = modal.openedClass || OPENED_MODAL_CLASS;
+
+        toggleTopWindowClass(false);
 
         openedWindows.add(modalInstance, {
           deferred: modal.deferred,
@@ -385,16 +412,19 @@ angular.module('ui.bootstrap.modal', [])
           modalScope: modal.scope,
           backdrop: modal.backdrop,
           keyboard: modal.keyboard,
-          openedClass: modal.openedClass
+          openedClass: modal.openedClass,
+          windowTopClass: modal.windowTopClass
         });
 
+        openedClasses.put(modalBodyClass, modalInstance);
+
         var body = $document.find('body').eq(0),
             currBackdropIndex = backdropIndex();
 
         if (currBackdropIndex >= 0 && !backdropDomEl) {
           backdropScope = $rootScope.$new(true);
           backdropScope.index = currBackdropIndex;
-          var angularBackgroundDomEl = angular.element('<div modal-backdrop="modal-backdrop"></div>');
+          var angularBackgroundDomEl = angular.element('<div uib-modal-backdrop="modal-backdrop"></div>');
           angularBackgroundDomEl.attr('backdrop-class', modal.backdropClass);
           if (modal.animation) {
             angularBackgroundDomEl.attr('modal-animation', 'true');
@@ -403,10 +433,11 @@ angular.module('ui.bootstrap.modal', [])
           body.append(backdropDomEl);
         }
 
-        var angularDomEl = angular.element('<div modal-window="modal-window"></div>');
+        var angularDomEl = angular.element('<div uib-modal-window="modal-window"></div>');
         angularDomEl.attr({
           'template-url': modal.windowTemplateUrl,
           'window-class': modal.windowClass,
+          'window-top-class': modal.windowTopClass,
           'size': modal.size,
           'index': openedWindows.length() - 1,
           'animate': 'animate'
@@ -419,12 +450,13 @@ angular.module('ui.bootstrap.modal', [])
         openedWindows.top().value.modalDomEl = modalDomEl;
         openedWindows.top().value.modalOpener = modalOpener;
         body.append(modalDomEl);
-        body.addClass(modal.openedClass || OPENED_MODAL_CLASS);
+        body.addClass(modalBodyClass);
+
         $modalStack.clearFocusListCache();
       };
 
       function broadcastClosing(modalWindow, resultOrReason, closing) {
-          return !modalWindow.value.modalScope.$broadcast('modal.closing', resultOrReason, closing).defaultPrevented;
+        return !modalWindow.value.modalScope.$broadcast('modal.closing', resultOrReason, closing).defaultPrevented;
       }
 
       $modalStack.close = function(modalInstance, result) {
@@ -502,7 +534,7 @@ angular.module('ui.bootstrap.modal', [])
       };
 
       $modalStack.loadFocusElementList = function(modalWindow) {
-        if (focusableElementList === undefined || !focusableElementList.length0) {
+        if (focusableElementList === undefined || !focusableElementList.length) {
           if (modalWindow) {
             var modalDomE1 = modalWindow.value.modalDomEl;
             if (modalDomE1 && modalDomE1.length) {
@@ -515,14 +547,14 @@ angular.module('ui.bootstrap.modal', [])
       return $modalStack;
     }])
 
-  .provider('$modal', function() {
+  .provider('$uibModal', function() {
     var $modalProvider = {
       options: {
         animation: true,
         backdrop: true, //can also be false or 'static'
         keyboard: true
       },
-      $get: ['$injector', '$rootScope', '$q', '$templateRequest', '$controller', '$modalStack',
+      $get: ['$injector', '$rootScope', '$q', '$templateRequest', '$controller', '$uibModalStack',
         function ($injector, $rootScope, $q, $templateRequest, $controller, $modalStack) {
           var $modal = {};
 
@@ -538,13 +570,19 @@ angular.module('ui.bootstrap.modal', [])
                 promisesArr.push($q.when($injector.invoke(value)));
               } else if (angular.isString(value)) {
                 promisesArr.push($q.when($injector.get(value)));
+              } else {
+                promisesArr.push($q.when(value));
               }
             });
             return promisesArr;
           }
 
-          $modal.open = function (modalOptions) {
+          var promiseChain = null;
+          $modal.getPromiseChain = function() {
+            return promiseChain;
+          };
 
+          $modal.open = function(modalOptions) {
             var modalResultDeferred = $q.defer();
             var modalOpenedDeferred = $q.defer();
             var modalRenderDeferred = $q.defer();
@@ -574,71 +612,313 @@ angular.module('ui.bootstrap.modal', [])
             var templateAndResolvePromise =
               $q.all([getTemplatePromise(modalOptions)].concat(getResolvePromises(modalOptions.resolve)));
 
+            function resolveWithTemplate() {
+              return templateAndResolvePromise;
+            }
 
-            templateAndResolvePromise.then(function resolveSuccess(tplAndVars) {
-
-              var modalScope = (modalOptions.scope || $rootScope).$new();
-              modalScope.$close = modalInstance.close;
-              modalScope.$dismiss = modalInstance.dismiss;
+            // Wait for the resolution of the existing promise chain.
+            // Then switch to our own combined promise dependency (regardless of how the previous modal fared).
+            // Then add to $modalStack and resolve opened.
+            // Finally clean up the chain variable if no subsequent modal has overwritten it.
+            var samePromise;
+            samePromise = promiseChain = $q.all([promiseChain])
+              .then(resolveWithTemplate, resolveWithTemplate)
+              .then(function resolveSuccess(tplAndVars) {
+
+                var modalScope = (modalOptions.scope || $rootScope).$new();
+                modalScope.$close = modalInstance.close;
+                modalScope.$dismiss = modalInstance.dismiss;
+
+                modalScope.$on('$destroy', function() {
+                  if (!modalScope.$$uibDestructionScheduled) {
+                    modalScope.$dismiss('$uibUnscheduledDestruction');
+                  }
+                });
 
-              modalScope.$on('$destroy', function() {
-                if (!modalScope.$$uibDestructionScheduled) {
-                  modalScope.$dismiss('$uibUnscheduledDestruction');
-                }
-              });
+                var ctrlInstance, ctrlLocals = {};
+                var resolveIter = 1;
 
-              var ctrlInstance, ctrlLocals = {};
-              var resolveIter = 1;
+                //controllers
+                if (modalOptions.controller) {
+                  ctrlLocals.$scope = modalScope;
+                  ctrlLocals.$modalInstance = modalInstance;
+                  angular.forEach(modalOptions.resolve, function(value, key) {
+                    ctrlLocals[key] = tplAndVars[resolveIter++];
+                  });
 
-              //controllers
-              if (modalOptions.controller) {
-                ctrlLocals.$scope = modalScope;
-                ctrlLocals.$modalInstance = modalInstance;
-                angular.forEach(modalOptions.resolve, function(value, key) {
-                  ctrlLocals[key] = tplAndVars[resolveIter++];
-                });
+                  ctrlInstance = $controller(modalOptions.controller, ctrlLocals);
+                  if (modalOptions.controllerAs) {
+                    if (modalOptions.bindToController) {
+                      angular.extend(ctrlInstance, modalScope);
+                    }
 
-                ctrlInstance = $controller(modalOptions.controller, ctrlLocals);
-                if (modalOptions.controllerAs) {
-                  if (modalOptions.bindToController) {
-                    angular.extend(ctrlInstance, modalScope);
+                    modalScope[modalOptions.controllerAs] = ctrlInstance;
                   }
-
-                  modalScope[modalOptions.controllerAs] = ctrlInstance;
                 }
-              }
 
-              $modalStack.open(modalInstance, {
-                scope: modalScope,
-                deferred: modalResultDeferred,
-                renderDeferred: modalRenderDeferred,
-                content: tplAndVars[0],
-                animation: modalOptions.animation,
-                backdrop: modalOptions.backdrop,
-                keyboard: modalOptions.keyboard,
-                backdropClass: modalOptions.backdropClass,
-                windowClass: modalOptions.windowClass,
-                windowTemplateUrl: modalOptions.windowTemplateUrl,
-                size: modalOptions.size,
-                openedClass: modalOptions.openedClass
-              });
+                $modalStack.open(modalInstance, {
+                  scope: modalScope,
+                  deferred: modalResultDeferred,
+                  renderDeferred: modalRenderDeferred,
+                  content: tplAndVars[0],
+                  animation: modalOptions.animation,
+                  backdrop: modalOptions.backdrop,
+                  keyboard: modalOptions.keyboard,
+                  backdropClass: modalOptions.backdropClass,
+                  windowTopClass: modalOptions.windowTopClass,
+                  windowClass: modalOptions.windowClass,
+                  windowTemplateUrl: modalOptions.windowTemplateUrl,
+                  size: modalOptions.size,
+                  openedClass: modalOptions.openedClass
+                });
+                modalOpenedDeferred.resolve(true);
 
             }, function resolveError(reason) {
-              modalResultDeferred.reject(reason);
-            });
-
-            templateAndResolvePromise.then(function() {
-              modalOpenedDeferred.resolve(true);
-            }, function(reason) {
               modalOpenedDeferred.reject(reason);
+              modalResultDeferred.reject(reason);
+            })
+            .finally(function() {
+              if (promiseChain === samePromise) {
+                promiseChain = null;
+              }
             });
 
             return modalInstance;
           };
 
           return $modal;
-        }]
+        }
+      ]
     };
 
     return $modalProvider;
   });
+
+/* deprecated modal below */
+
+angular.module('ui.bootstrap.modal')
+
+  .value('$modalSuppressWarning', false)
+
+  /**
+   * A helper directive for the $modal service. It creates a backdrop element.
+   */
+  .directive('modalBackdrop', [
+    '$animate', '$injector', '$modalStack', '$log', '$modalSuppressWarning',
+    function($animate ,  $injector,   $modalStack, $log, $modalSuppressWarning) {
+      var $animateCss = null;
+
+      if ($injector.has('$animateCss')) {
+        $animateCss = $injector.get('$animateCss');
+      }
+
+      return {
+        replace: true,
+        templateUrl: 'template/modal/backdrop.html',
+        compile: function(tElement, tAttrs) {
+          tElement.addClass(tAttrs.backdropClass);
+          return linkFn;
+        }
+      };
+
+      function linkFn(scope, element, attrs) {
+        if (!$modalSuppressWarning) {
+          $log.warn('modal-backdrop is now deprecated. Use uib-modal-backdrop instead.');
+        }
+        element.addClass('modal-backdrop');
+
+        if (attrs.modalInClass) {
+          if ($animateCss) {
+            $animateCss(element, {
+              addClass: attrs.modalInClass
+            }).start();
+          } else {
+            $animate.addClass(element, attrs.modalInClass);
+          }
+
+          scope.$on($modalStack.NOW_CLOSING_EVENT, function(e, setIsAsync) {
+            var done = setIsAsync();
+            if ($animateCss) {
+              $animateCss(element, {
+                removeClass: attrs.modalInClass
+              }).start().then(done);
+            } else {
+              $animate.removeClass(element, attrs.modalInClass).then(done);
+            }
+          });
+        }
+      }
+    }])
+
+  .directive('modalWindow', [
+    '$modalStack', '$q', '$animate', '$injector', '$log', '$modalSuppressWarning',
+    function($modalStack ,  $q ,  $animate,   $injector, $log, $modalSuppressWarning) {
+      var $animateCss = null;
+
+      if ($injector.has('$animateCss')) {
+        $animateCss = $injector.get('$animateCss');
+      }
+
+      return {
+        scope: {
+          index: '@'
+        },
+        replace: true,
+        transclude: true,
+        templateUrl: function(tElement, tAttrs) {
+          return tAttrs.templateUrl || 'template/modal/window.html';
+        },
+        link: function(scope, element, attrs) {
+          if (!$modalSuppressWarning) {
+            $log.warn('modal-window is now deprecated. Use uib-modal-window instead.');
+          }
+          element.addClass(attrs.windowClass || '');
+          element.addClass(attrs.windowTopClass || '');
+          scope.size = attrs.size;
+
+          scope.close = function(evt) {
+            var modal = $modalStack.getTop();
+            if (modal && modal.value.backdrop && modal.value.backdrop !== 'static' && (evt.target === evt.currentTarget)) {
+              evt.preventDefault();
+              evt.stopPropagation();
+              $modalStack.dismiss(modal.key, 'backdrop click');
+            }
+          };
+
+          // moved from template to fix issue #2280
+          element.on('click', scope.close);
+
+          // This property is only added to the scope for the purpose of detecting when this directive is rendered.
+          // We can detect that by using this property in the template associated with this directive and then use
+          // {@link Attribute#$observe} on it. For more details please see {@link TableColumnResize}.
+          scope.$isRendered = true;
+
+          // Deferred object that will be resolved when this modal is render.
+          var modalRenderDeferObj = $q.defer();
+          // Observe function will be called on next digest cycle after compilation, ensuring that the DOM is ready.
+          // In order to use this way of finding whether DOM is ready, we need to observe a scope property used in modal's template.
+          attrs.$observe('modalRender', function(value) {
+            if (value == 'true') {
+              modalRenderDeferObj.resolve();
+            }
+          });
+
+          modalRenderDeferObj.promise.then(function() {
+            var animationPromise = null;
+
+            if (attrs.modalInClass) {
+              if ($animateCss) {
+                animationPromise = $animateCss(element, {
+                  addClass: attrs.modalInClass
+                }).start();
+              } else {
+                animationPromise = $animate.addClass(element, attrs.modalInClass);
+              }
+
+              scope.$on($modalStack.NOW_CLOSING_EVENT, function(e, setIsAsync) {
+                var done = setIsAsync();
+                if ($animateCss) {
+                  $animateCss(element, {
+                    removeClass: attrs.modalInClass
+                  }).start().then(done);
+                } else {
+                  $animate.removeClass(element, attrs.modalInClass).then(done);
+                }
+              });
+            }
+
+
+            $q.when(animationPromise).then(function() {
+              var inputsWithAutofocus = element[0].querySelectorAll('[autofocus]');
+              /**
+               * Auto-focusing of a freshly-opened modal element causes any child elements
+               * with the autofocus attribute to lose focus. This is an issue on touch
+               * based devices which will show and then hide the onscreen keyboard.
+               * Attempts to refocus the autofocus element via JavaScript will not reopen
+               * the onscreen keyboard. Fixed by updated the focusing logic to only autofocus
+               * the modal element if the modal does not contain an autofocus element.
+               */
+              if (inputsWithAutofocus.length) {
+                inputsWithAutofocus[0].focus();
+              } else {
+                element[0].focus();
+              }
+            });
+
+            // Notify {@link $modalStack} that modal is rendered.
+            var modal = $modalStack.getTop();
+            if (modal) {
+              $modalStack.modalRendered(modal.key);
+            }
+          });
+        }
+      };
+    }])
+
+  .directive('modalAnimationClass', [
+    '$log', '$modalSuppressWarning',
+    function ($log, $modalSuppressWarning) {
+      return {
+        compile: function(tElement, tAttrs) {
+          if (!$modalSuppressWarning) {
+            $log.warn('modal-animation-class is now deprecated. Use uib-modal-animation-class instead.');
+          }
+          if (tAttrs.modalAnimation) {
+            tElement.addClass(tAttrs.modalAnimationClass);
+          }
+        }
+      };
+    }])
+
+  .directive('modalTransclude', [
+    '$log', '$modalSuppressWarning',
+    function ($log, $modalSuppressWarning) {
+    return {
+      link: function($scope, $element, $attrs, controller, $transclude) {
+        if (!$modalSuppressWarning) {
+          $log.warn('modal-transclude is now deprecated. Use uib-modal-transclude instead.');
+        }
+        $transclude($scope.$parent, function(clone) {
+          $element.empty();
+          $element.append(clone);
+        });
+      }
+    };
+  }])
+
+  .service('$modalStack', [
+    '$animate', '$timeout', '$document', '$compile', '$rootScope',
+    '$q',
+    '$injector',
+    '$$multiMap',
+    '$$stackedMap',
+    '$uibModalStack',
+    '$log',
+    '$modalSuppressWarning',
+    function($animate ,  $timeout ,  $document ,  $compile ,  $rootScope ,
+             $q,
+             $injector,
+             $$multiMap,
+             $$stackedMap,
+             $uibModalStack,
+             $log,
+             $modalSuppressWarning) {
+      if (!$modalSuppressWarning) {
+        $log.warn('$modalStack is now deprecated. Use $uibModalStack instead.');
+      }
+
+      angular.extend(this, $uibModalStack);
+    }])
+
+  .provider('$modal', ['$uibModalProvider', function($uibModalProvider) {
+    angular.extend(this, $uibModalProvider);
+
+    this.$get = ['$injector', '$log', '$modalSuppressWarning',
+      function ($injector, $log, $modalSuppressWarning) {
+        if (!$modalSuppressWarning) {
+          $log.warn('$modal is now deprecated. Use $uibModal instead.');
+        }
+
+        return $injector.invoke($uibModalProvider.$get);
+      }];
+  }]);
diff --git a/src/modal/test/modal.spec.js b/src/modal/test/modal.spec.js
index a57fe6d90a..7b9206133e 100644
--- a/src/modal/test/modal.spec.js
+++ b/src/modal/test/modal.spec.js
@@ -1,25 +1,17 @@
-describe('$modal', function () {
+describe('$uibModal', function () {
   var $animate, $controllerProvider, $rootScope, $document, $compile, $templateCache, $timeout, $q;
-  var $modal, $modalProvider;
-
-  var triggerKeyDown = function(element, keyCode, shiftKey) {
-    var e = $.Event('keydown');
-    e.srcElement = element[0];
-    e.which = keyCode;
-    e.shiftKey = shiftKey;
-    element.trigger(e);
-  };
+  var $uibModal, $uibModalStack, $uibModalProvider;
 
   beforeEach(module('ngAnimateMock'));
   beforeEach(module('ui.bootstrap.modal'));
   beforeEach(module('template/modal/backdrop.html'));
   beforeEach(module('template/modal/window.html'));
-  beforeEach(module(function(_$controllerProvider_, _$modalProvider_){
+  beforeEach(module(function(_$controllerProvider_, _$uibModalProvider_){
     $controllerProvider = _$controllerProvider_;
-    $modalProvider = _$modalProvider_;
+    $uibModalProvider = _$uibModalProvider_;
   }));
 
-  beforeEach(inject(function(_$animate_, _$rootScope_, _$document_, _$compile_, _$templateCache_, _$timeout_, _$q_, _$modal_) {
+  beforeEach(inject(function(_$animate_, _$rootScope_, _$document_, _$compile_, _$templateCache_, _$timeout_, _$q_, _$uibModal_, _$uibModalStack_) {
     $animate = _$animate_;
     $rootScope = _$rootScope_;
     $document = _$document_;
@@ -27,7 +19,8 @@ describe('$modal', function () {
     $templateCache = _$templateCache_;
     $timeout = _$timeout_;
     $q = _$q_;
-    $modal = _$modal_;
+    $uibModal = _$uibModal_;
+    $uibModalStack = _$uibModalStack_;
   }));
 
   beforeEach(function() {
@@ -143,8 +136,16 @@ describe('$modal', function () {
     body.removeClass('modal-open');
   });
 
+  function triggerKeyDown(element, keyCode, shiftKey) {
+    var e = $.Event('keydown');
+    e.srcElement = element[0];
+    e.which = keyCode;
+    e.shiftKey = shiftKey;
+    element.trigger(e);
+  }
+
   function open(modalOptions) {
-    var modal = $modal.open(modalOptions);
+    var modal = $uibModal.open(modalOptions);
     $rootScope.$digest();
     $timeout.flush(0);
     return modal;
@@ -154,7 +155,10 @@ describe('$modal', function () {
     var closed = modal.close(result);
     $rootScope.$digest();
     if (!noFlush) {
-      $animate.triggerCallbacks();
+      $animate.flush();
+      $rootScope.$digest();
+      $animate.flush();
+      $rootScope.$digest();
     }
     return closed;
   }
@@ -163,7 +167,10 @@ describe('$modal', function () {
     var closed = modal.dismiss(reason);
     $rootScope.$digest();
     if (!noFlush) {
-      $animate.triggerCallbacks();
+      $animate.flush();
+      $rootScope.$digest();
+      $animate.flush();
+      $rootScope.$digest();
     }
     return closed;
   }
@@ -231,7 +238,9 @@ describe('$modal', function () {
       expect($document).toHaveModalsOpen(1);
 
       triggerKeyDown($document, 27);
-      $animate.triggerCallbacks();
+      $animate.flush();
+      $rootScope.$digest();
+      $animate.flush();
       $rootScope.$digest();
 
       expect($document).toHaveModalsOpen(0);
@@ -251,7 +260,9 @@ describe('$modal', function () {
       button.off('keydown', preventKeyDown);
 
       triggerKeyDown(button, 27);
-      $animate.triggerCallbacks();
+      $animate.flush();
+      $rootScope.$digest();
+      $animate.flush();
       $rootScope.$digest();
 
       expect($document).toHaveModalsOpen(0);
@@ -266,7 +277,9 @@ describe('$modal', function () {
       expect($document).toHaveModalsOpen(1);
 
       $document.find('body > div.modal').click();
-      $animate.triggerCallbacks();
+      $animate.flush();
+      $rootScope.$digest();
+      $animate.flush();
       $rootScope.$digest();
 
       expect($document).toHaveModalsOpen(0);
@@ -280,11 +293,15 @@ describe('$modal', function () {
       expect(document.activeElement.tagName).toBe('A');
 
       var modal = open({template: '<div>Content<button>inside modal</button></div>'});
+      $animate.flush();
+      $rootScope.$digest();
       expect(document.activeElement.tagName).toBe('DIV');
       expect($document).toHaveModalsOpen(1);
 
       triggerKeyDown($document, 27);
-      $animate.triggerCallbacks();
+      $animate.flush();
+      $rootScope.$digest();
+      $animate.flush();
       $rootScope.$digest();
 
       expect(document.activeElement.tagName).toBe('A');
@@ -301,6 +318,8 @@ describe('$modal', function () {
       expect(document.activeElement.tagName).toBe('A');
 
       var modal = open({template: '<div>Content</div>'});
+      $animate.flush();
+      $rootScope.$digest();
       expect(document.activeElement.tagName).toBe('DIV');
       expect($document).toHaveModalsOpen(1);
 
@@ -308,7 +327,9 @@ describe('$modal', function () {
       // iframe conditions. See issue 3639
       element[0].focus = undefined;
       triggerKeyDown($document, 27);
-      $animate.triggerCallbacks();
+      $animate.flush();
+      $rootScope.$digest();
+      $animate.flush();
       $rootScope.$digest();
 
       expect(document.activeElement.tagName).toBe('BODY');
@@ -338,7 +359,10 @@ describe('$modal', function () {
 
       expect(modal.result).toBeRejectedWith('$uibUnscheduledDestruction');
 
-      $animate.triggerCallbacks();
+      $animate.flush();
+      $rootScope.$digest();
+      $animate.flush();
+      $rootScope.$digest();
       expect($document).toHaveModalsOpen(0);
     });
 
@@ -358,10 +382,11 @@ describe('$modal', function () {
       expect(modal.opened).toBeRejectedWith('ko');
     });
 
-    it('should focus on the element that has autofocus attribute when the modal is open/reopen', function() {
+    it('should focus on the element that has autofocus attribute when the modal is open/reopen and the animations have finished', function() {
       function openAndCloseModalWithAutofocusElement() {
         var modal = open({template: '<div><input type="text" id="auto-focus-element" autofocus></div>'});
-
+        $animate.flush();
+        $rootScope.$digest();
         expect(angular.element('#auto-focus-element')).toHaveFocus();
 
         close(modal, 'closed ok');
@@ -373,6 +398,45 @@ describe('$modal', function () {
       openAndCloseModalWithAutofocusElement();
     });
 
+    it('should wait until the in animation is finished before attempting to focus the modal or autofocus element', function() {
+      function openAndCloseModalWithAutofocusElement() {
+        var modal = open({template: '<div><input type="text" id="auto-focus-element" autofocus></div>'});
+        expect(angular.element('#auto-focus-element')).not.toHaveFocus();
+
+        $animate.flush();
+        $rootScope.$digest();
+
+        expect(angular.element('#auto-focus-element')).toHaveFocus();
+
+        close(modal, 'closed ok');
+
+        expect(modal.result).toBeResolvedWith('closed ok');
+      }
+
+      function openAndCloseModalWithOutAutofocusElement() {
+        var link = '<a href>Link</a>';
+        var element = angular.element(link);
+        angular.element(document.body).append(element);
+        element.focus();
+        expect(document.activeElement.tagName).toBe('A');
+
+        var modal = open({template: '<div><input type="text"></div>'});
+        expect(document.activeElement.tagName).toBe('A');
+
+        $animate.flush();
+        $rootScope.$digest();
+
+        expect(document.activeElement.tagName).toBe('DIV');
+
+        close(modal, 'closed ok');
+
+        expect(modal.result).toBeResolvedWith('closed ok');
+      }
+
+      openAndCloseModalWithAutofocusElement();
+      openAndCloseModalWithOutAutofocusElement();
+    });
+
     it('should change focus to first element when tab key was pressed', function() {
       var initialPage = angular.element('<a href="#" id="cannot-get-focus-from-modal">Outland link</a>');
       angular.element(document.body).append(initialPage);
@@ -388,6 +452,8 @@ describe('$modal', function () {
       lastElement.focus();
       triggerKeyDown(lastElement, 9);
       expect(document.activeElement.getAttribute('id')).toBe('tab-focus-link');
+
+      initialPage.remove();
     });
 
     it('should change focus to last element when shift+tab key is pressed', function() {
@@ -405,14 +471,14 @@ describe('$modal', function () {
       lastElement.focus();
       triggerKeyDown(lastElement, 9, true);
       expect(document.activeElement.getAttribute('id')).toBe('tab-focus-button');
+
+      initialPage.remove();
     });
   });
 
   describe('default options can be changed in a provider', function() {
-
     it('should allow overriding default options in a provider', function() {
-
-      $modalProvider.options.backdrop = false;
+      $uibModalProvider.options.backdrop = false;
       var modal = open({template: '<div>Content</div>'});
 
       expect($document).toHaveModalOpenWithContent('Content', 'div');
@@ -420,8 +486,7 @@ describe('$modal', function () {
     });
 
     it('should accept new objects with default options in a provider', function() {
-
-      $modalProvider.options = {
+      $uibModalProvider.options = {
         backdrop: false
       };
       var modal = open({template: '<div>Content</div>'});
@@ -432,9 +497,7 @@ describe('$modal', function () {
   });
 
   describe('option by option', function () {
-
     describe('template and templateUrl', function () {
-
       it('should throw an error if none of template and templateUrl are provided', function() {
         expect(function(){
           var modal = open({});
@@ -464,11 +527,9 @@ describe('$modal', function () {
         }});
         expect($document).toHaveModalOpenWithContent('Whitespaces', 'div');
       });
-
     });
 
     describe('controller', function() {
-
       it('should accept controllers and inject modal instances', function() {
         var TestCtrl = function($scope, $modalInstance) {
           $scope.fromCtrl = 'Content from ctrl';
@@ -543,10 +604,10 @@ describe('$modal', function () {
         open({
           controller: function($scope, $foo) {
             $scope.value = 'Content from resolve';
-            expect($foo).toBe($modal);
+            expect($foo).toBe($uibModal);
           },
           resolve: {
-            $foo: '$modal'
+            $foo: '$uibModal'
           },
           template: '<div>{{value}}</div>'
         });
@@ -554,6 +615,19 @@ describe('$modal', function () {
         expect($document).toHaveModalOpenWithContent('Content from resolve', 'div');
       });
 
+      it('should resolve promises as promises', function() {
+        open({
+          controller: function($scope, $foo) {
+            $scope.value = 'Content from resolve';
+            expect($foo).toBe('bar');
+          },
+          resolve: {
+            $foo: $q.when('bar')
+          },
+          template: '<div>{{value}}</div>'
+        });
+      });
+
       it('should delay showing modal if one of the resolves is a promise', function() {
         open(modalDefinition('<div>{{value}}</div>', {
           value: function() {
@@ -663,12 +737,14 @@ describe('$modal', function () {
 
       it('should contain backdrop in classes on each modal opening', function() {
         var modal = open({ template: '<div>With backdrop</div>' });
+        $animate.flush();
         var backdropEl = $document.find('body > div.modal-backdrop');
         expect(backdropEl).toHaveClass('in');
 
         dismiss(modal);
 
         modal = open({ template: '<div>With backdrop</div>' });
+        $animate.flush();
         backdropEl = $document.find('body > div.modal-backdrop');
         expect(backdropEl).toHaveClass('in');
 
@@ -697,6 +773,17 @@ describe('$modal', function () {
       });
     });
 
+    describe('top window class', function () {
+      it('should support top class option', function () {
+        open({
+          template: '<div>With custom window top class</div>',
+          windowTopClass: 'top-class'
+        });
+
+        expect($document.find('div.modal')).toHaveClass('top-class');
+      });
+    });
+
     describe('size', function() {
       it('should support creating small modal dialogs', function() {
         open({
@@ -729,7 +816,7 @@ describe('$modal', function () {
     describe('animation', function() {
       it('should have animation fade classes by default', function() {
         open({
-          template: '<div>Small modal dialog</div>',
+          template: '<div>Small modal dialog</div>'
         });
 
         expect($document.find('.modal')).toHaveClass('fade');
@@ -784,6 +871,52 @@ describe('$modal', function () {
 
         expect(body).not.toHaveClass('foo');
       });
+
+      it('should add multiple custom classes to the body element and remove appropriately', function() {
+        var modal1 = open({
+          template: '<div>dummy modal</div>',
+          openedClass: 'foo'
+        });
+
+        expect(body).toHaveClass('foo');
+        expect(body).not.toHaveClass('modal-open');
+
+        var modal2 = open({
+          template: '<div>dummy modal</div>',
+          openedClass: 'bar'
+        });
+
+        expect(body).toHaveClass('foo');
+        expect(body).toHaveClass('bar');
+        expect(body).not.toHaveClass('modal-open');
+
+        var modal3 = open({
+          template: '<div>dummy modal</div>',
+          openedClass: 'foo'
+        });
+
+        expect(body).toHaveClass('foo');
+        expect(body).toHaveClass('bar');
+        expect(body).not.toHaveClass('modal-open');
+
+        close(modal1);
+
+        expect(body).toHaveClass('foo');
+        expect(body).toHaveClass('bar');
+        expect(body).not.toHaveClass('modal-open');
+
+        close(modal2);
+
+        expect(body).toHaveClass('foo');
+        expect(body).not.toHaveClass('bar');
+        expect(body).not.toHaveClass('modal-open');
+
+        close(modal3);
+
+        expect(body).not.toHaveClass('foo');
+        expect(body).not.toHaveClass('bar');
+        expect(body).not.toHaveClass('modal-open');
+      });
     });
   });
 
@@ -854,11 +987,15 @@ describe('$modal', function () {
       expect(document.activeElement.tagName).toBe('A');
 
       var modal1 = open({template: '<div>Modal1<button id="focus">inside modal1</button></div>'});
+      $animate.flush();
+      $rootScope.$digest();
       document.getElementById('focus').focus();
       expect(document.activeElement.tagName).toBe('BUTTON');
       expect($document).toHaveModalsOpen(1);
 
       var modal2 = open({template: '<div>Modal2</div>'});
+      $animate.flush();
+      $rootScope.$digest();
       expect(document.activeElement.tagName).toBe('DIV');
       expect($document).toHaveModalsOpen(2);
 
@@ -872,6 +1009,113 @@ describe('$modal', function () {
 
       element.remove();
     });
+
+    it('should open modals and resolve the opened promises in order', function() {
+      // Opens a modal for each element in array order.
+      // Order is an array of non-repeating integers from 0..length-1 representing when to resolve that modal's promise.
+      // For example [1,2,0] would resolve the 3rd modal's promise first and the 2nd modal's promise last.
+      // Tests that the modals are added to $uibModalStack and that each resolves its "opened" promise sequentially.
+      // If an element is {reject:n} then n is still the order, but the corresponding promise is rejected.
+      // A rejection earlier in the open sequence should not affect modals opened later.
+      function test(order) {
+        var ds = []; // {index, deferred, reject}
+        var expected = ''; // 0..length-1
+        var actual = '';
+        angular.forEach(order, function(x, i) {
+          var reject = x.reject !== undefined;
+          if (reject) {
+            x = x.reject;
+          } else {
+            expected += i;
+          }
+          ds[x] = {index:i, deferred:$q.defer(), reject:reject};
+
+          var scope = $rootScope.$new();
+          scope.index = i;
+          open({
+            template: '<div>' + i + '</div>',
+            scope: scope,
+            resolve: {
+              x: function() { return ds[x].deferred.promise; }
+            }
+          }).opened.then(function() {
+            expect($uibModalStack.getTop().value.modalScope.index).toEqual(i);
+            actual += i;
+          });
+        });
+
+        angular.forEach(ds, function(d, i) {
+          if (d.reject) {
+            d.deferred.reject('rejected:' + d.index );
+          } else {
+            d.deferred.resolve('resolved:' + d.index );
+          }
+          $rootScope.$digest();
+        });
+
+        expect(actual).toEqual(expected);
+        expect($uibModal.getPromiseChain()).toEqual(null);
+      }
+
+      // Calls emit n! times on arrays of length n containing all non-repeating permutations of the integers 0..n-1.
+      function permute(n, emit) {
+        if (n < 1 || typeof emit !== 'function') {
+          return;
+        }
+        var a = [];
+        function _permute(depth) {
+          index: for (var i = 0; i < n; i++) {
+            for (var j = 0; j < depth; j++) {
+              if (a[j] === i) {
+                continue index; // already used
+              }
+            }
+
+            a[depth] = i;
+            if (depth + 1 === n) {
+              emit(angular.copy(a));
+            } else {
+              _permute(depth + 1);
+            }
+          }
+        }
+        _permute(0);
+      }
+
+      permute(2, function(a) { test(a); });
+      permute(2, function(a) { test(a.map(function(x, i) { return {reject:x}; })); });
+      permute(2, function(a) { test(a.map(function(x, i) { return i === 0 ? {reject:x} : x; })); });
+      permute(3, function(a) { test(a); });
+      permute(3, function(a) { test(a.map(function(x, i) { return {reject:x}; })); });
+      permute(3, function(a) { test(a.map(function(x, i) { return i === 0 ? {reject:x} : x; })); });
+      permute(3, function(a) { test(a.map(function(x, i) { return i === 1 ? {reject:x} : x; })); });
+    });
+
+    it('should have top class only on top window', function () {
+      var modal1 = open({template: '<div>Content1</div>', windowClass: 'modal1', windowTopClass: 'modal-top'});
+      expect($document.find('div.modal1')).toHaveClass('modal-top');
+      expect($document).toHaveModalsOpen(1);
+
+      var modal2 = open({template: '<div>Content1</div>', windowClass: 'modal2', windowTopClass: 'modal-top'});
+      expect($document.find('div.modal1')).not.toHaveClass('modal-top');
+      expect($document.find('div.modal2')).toHaveClass('modal-top');
+      expect($document).toHaveModalsOpen(2);
+
+      var modal3 = open({template: '<div>Content1</div>', windowClass: 'modal3', windowTopClass: 'modal-top'});
+      expect($document.find('div.modal1')).not.toHaveClass('modal-top');
+      expect($document.find('div.modal2')).not.toHaveClass('modal-top');
+      expect($document.find('div.modal3')).toHaveClass('modal-top');
+      expect($document).toHaveModalsOpen(3);
+
+      dismiss(modal2);
+      expect($document.find('div.modal1')).not.toHaveClass('modal-top');
+      expect($document.find('div.modal3')).toHaveClass('modal-top');
+      expect($document).toHaveModalsOpen(2);
+
+      close(modal3);
+      expect($document.find('div.modal1')).toHaveClass('modal-top');
+      expect($document).toHaveModalsOpen(1);
+    });
   });
 
   describe('modal.closing event', function() {
@@ -940,3 +1184,71 @@ describe('$modal', function () {
     });
   });
 });
+
+/* deprecation tests below */
+
+describe('$modal deprecation', function() {
+  beforeEach(module('ngAnimateMock'));
+  beforeEach(module('ui.bootstrap.modal'));
+  beforeEach(module('template/modal/backdrop.html'));
+  beforeEach(module('template/modal/window.html'));
+
+  it('should suppress warning', function() {
+    module(function($provide) {
+      $provide.value('$modalSuppressWarning', true);
+    });
+
+    inject(function($modal, $timeout, $log, $rootScope) {
+      spyOn($log, 'warn');
+
+      $modal.open({template: '<div>Foo</div>'});
+      $rootScope.$digest();
+      $timeout.flush(0);
+      expect($log.warn.calls.count()).toBe(0);
+    });
+  });
+
+  it('should give warning by default', inject(function($log) {
+    spyOn($log, 'warn');
+
+    inject(function($compile, $templateCache, $rootScope, $modal, $timeout) {
+      var backdropTemplate =
+        '<div class="modal-backdrop"' +
+        'modal-animation-class="fade"' +
+        'modal-in-class="in"' +
+        'ng-style="{\'z-index\': 1040 + (index && 1 || 0) + index*10}"' +
+        '></div>';
+      $templateCache.put('template/modal/backdrop.html', backdropTemplate);
+
+      var windowTemplate =
+        '<div modal-render="{{$isRendered}}" tabindex="-1" role="dialog" class="modal"' +
+        'modal-animation-class="fade"' +
+        'modal-in-class="in"' +
+        'ng-style="{\'z-index\': 1050 + index*10, display: \'block\'}">' +
+        '<div class="modal-dialog" ng-class="size ? \'modal-\' + size : \'\'"><div class="modal-content" modal-transclude></div></div>' +
+        '</div>';
+      $templateCache.put('template/modal/window.html', windowTemplate);
+
+      $modal.open({template: '<div>Foo</div>'});
+      $rootScope.$digest();
+      $timeout.flush(0);
+
+      expect($log.warn.calls.count()).toBe(5);
+      expect($log.warn.calls.argsFor(0)).toEqual(['$modal is now deprecated. Use $uibModal instead.']);
+      expect($log.warn.calls.argsFor(1)).toEqual(['$modalStack is now deprecated. Use $uibModalStack instead.']);
+      expect($log.warn.calls.argsFor(2)).toEqual(['modal-animation-class is now deprecated. Use uib-modal-animation-class instead.']);
+      expect($log.warn.calls.argsFor(3)).toEqual(['modal-animation-class is now deprecated. Use uib-modal-animation-class instead.']);
+      expect($log.warn.calls.argsFor(4)).toEqual(['modal-transclude is now deprecated. Use uib-modal-transclude instead.']);
+
+      $log.warn.calls.reset();
+      $compile('<div modal-backdrop></div>')($rootScope);
+      $rootScope.$digest();
+      expect($log.warn.calls.argsFor(1)).toEqual(['modal-backdrop is now deprecated. Use uib-modal-backdrop instead.']);
+
+      $log.warn.calls.reset();
+      $compile('<div modal-window></div>')($rootScope);
+      $rootScope.$digest();
+      expect($log.warn.calls.argsFor(2)).toEqual(['modal-window is now deprecated. Use uib-modal-window instead.']);
+    });
+  }));
+});
diff --git a/src/modal/test/modalWindow.spec.js b/src/modal/test/modalWindow.spec.js
index 312d607645..60c00aed81 100644
--- a/src/modal/test/modalWindow.spec.js
+++ b/src/modal/test/modalWindow.spec.js
@@ -10,7 +10,7 @@ describe('modal window', function() {
 
   it('should not use transclusion scope for modals content - issue 2110', function() {
     $rootScope.animate = false;
-    $compile('<div modal-window animate="animate"><span ng-init="foo=true"></span></div>')($rootScope);
+    $compile('<div uib-modal-window animate="animate"><span ng-init="foo=true"></span></div>')($rootScope);
     $rootScope.$digest();
 
     expect($rootScope.foo).toBeTruthy();
@@ -18,7 +18,16 @@ describe('modal window', function() {
 
   it('should support custom CSS classes as string', function() {
     $rootScope.animate = false;
-    var windowEl = $compile('<div modal-window animate="animate" window-class="test foo">content</div>')($rootScope);
+    var windowEl = $compile('<div uib-modal-window animate="animate" window-class="test foo">content</div>')($rootScope);
+    $rootScope.$digest();
+
+    expect(windowEl).toHaveClass('test');
+    expect(windowEl).toHaveClass('foo');
+  });
+
+  it('should support window top class', function () {
+    $rootScope.animate = false;
+    var windowEl = $compile('<div uib-modal-window animate="animate" window-top-class="test foo">content</div>')($rootScope);
     $rootScope.$digest();
 
     expect(windowEl).toHaveClass('test');
@@ -28,7 +37,7 @@ describe('modal window', function() {
   it('should support custom template url', inject(function($templateCache) {
     $templateCache.put('window.html', '<div class="mywindow" ng-transclude></div>');
 
-    var windowEl = $compile('<div modal-window template-url="window.html" window-class="test">content</div>')($rootScope);
+    var windowEl = $compile('<div uib-modal-window template-url="window.html" window-class="test">content</div>')($rootScope);
     $rootScope.$digest();
 
     expect(windowEl).toHaveClass('mywindow');
diff --git a/src/modal/test/multiMap.spec.js b/src/modal/test/multiMap.spec.js
new file mode 100644
index 0000000000..c89624e914
--- /dev/null
+++ b/src/modal/test/multiMap.spec.js
@@ -0,0 +1,58 @@
+describe('multi map', function() {
+  var multiMap;
+
+  beforeEach(module('ui.bootstrap.modal'));
+  beforeEach(inject(function($$multiMap) {
+    multiMap = $$multiMap.createNew();
+  }));
+
+  it('should add and remove objects by key', function() {
+    multiMap.put('foo', 'bar');
+
+    expect(multiMap.get('foo')).toEqual(['bar']);
+
+    multiMap.put('foo', 'baz');
+
+    expect(multiMap.get('foo')).toEqual(['bar', 'baz']);
+
+    multiMap.remove('foo', 'bar');
+
+    expect(multiMap.get('foo')).toEqual(['baz']);
+
+    multiMap.remove('foo', 'baz');
+
+    expect(multiMap.hasKey('foo')).toBe(false);
+  });
+
+  it('should support getting the keys', function() {
+    multiMap.put('foo', 'bar');
+    multiMap.put('baz', 'boo');
+
+    expect(multiMap.keys()).toEqual(['foo', 'baz']);
+  });
+
+  it('should return all entries', function() {
+    multiMap.put('foo', 'bar');
+    multiMap.put('foo', 'bar2');
+    multiMap.put('baz', 'boo');
+
+    expect(multiMap.entries()).toEqual([
+      {
+        key: 'foo',
+        value: ['bar', 'bar2']
+      },
+      {
+        key: 'baz',
+        value: ['boo']
+      }
+    ]);
+  });
+
+  it('should preserve semantic of an empty key', function() {
+    expect(multiMap.get('key')).toBeUndefined();
+  });
+
+  it('should respect removal of non-existing elements', function() {
+    expect(multiMap.remove('foo', 'bar')).toBeUndefined();
+  });
+});
diff --git a/src/pagination/docs/demo.html b/src/pagination/docs/demo.html
index c21d066822..16ec3ac447 100644
--- a/src/pagination/docs/demo.html
+++ b/src/pagination/docs/demo.html
@@ -1,19 +1,19 @@
 <div ng-controller="PaginationDemoCtrl">
     <h4>Default</h4>
-    <pagination total-items="totalItems" ng-model="currentPage" ng-change="pageChanged()"></pagination>
-    <pagination boundary-links="true" total-items="totalItems" ng-model="currentPage" class="pagination-sm" previous-text="&lsaquo;" next-text="&rsaquo;" first-text="&laquo;" last-text="&raquo;"></pagination>
-    <pagination direction-links="false" boundary-links="true" total-items="totalItems" ng-model="currentPage"></pagination>
-    <pagination direction-links="false" total-items="totalItems" ng-model="currentPage" num-pages="smallnumPages"></pagination>
+    <uib-pagination total-items="totalItems" ng-model="currentPage" ng-change="pageChanged()"></uib-pagination>
+    <uib-pagination boundary-links="true" total-items="totalItems" ng-model="currentPage" class="pagination-sm" previous-text="&lsaquo;" next-text="&rsaquo;" first-text="&laquo;" last-text="&raquo;"></uib-pagination>
+    <uib-pagination direction-links="false" boundary-links="true" total-items="totalItems" ng-model="currentPage"></uib-pagination>
+    <uib-pagination direction-links="false" total-items="totalItems" ng-model="currentPage" num-pages="smallnumPages"></uib-pagination>
     <pre>The selected page no: {{currentPage}}</pre>
     <button type="button" class="btn btn-info" ng-click="setPage(3)">Set current page to: 3</button>
 
     <hr />
     <h4>Pager</h4>
-    <pager total-items="totalItems" ng-model="currentPage"></pager>
+    <uib-pager total-items="totalItems" ng-model="currentPage"></uib-pager>
 
     <hr />
     <h4>Limit the maximum visible buttons</h4>
-    <pagination total-items="bigTotalItems" ng-model="bigCurrentPage" max-size="maxSize" class="pagination-sm" boundary-links="true"></pagination>
-    <pagination total-items="bigTotalItems" ng-model="bigCurrentPage" max-size="maxSize" class="pagination-sm" boundary-links="true" rotate="false" num-pages="numPages"></pagination>
+    <uib-pagination total-items="bigTotalItems" ng-model="bigCurrentPage" max-size="maxSize" class="pagination-sm" boundary-links="true"></uib-pagination>
+    <uib-pagination total-items="bigTotalItems" ng-model="bigCurrentPage" max-size="maxSize" class="pagination-sm" boundary-links="true" rotate="false" num-pages="numPages"></uib-pagination>
     <pre>Page: {{bigCurrentPage}} / {{numPages}}</pre>
 </div>
diff --git a/src/pagination/docs/readme.md b/src/pagination/docs/readme.md
index 8f8a50dea5..07c89d5ed3 100644
--- a/src/pagination/docs/readme.md
+++ b/src/pagination/docs/readme.md
@@ -3,7 +3,7 @@ A lightweight pagination directive that is focused on ... providing pagination &
 
 ### Pagination Settings ###
 
-Settings can be provided as attributes in the `<pagination>` or globally configured through the `paginationConfig`.
+Settings can be provided as attributes in the `<uib-pagination>` or globally configured through the `uibPaginationConfig`.
 
  * `ng-change`
  	:
@@ -62,12 +62,12 @@ Settings can be provided as attributes in the `<pagination>` or globally configu
  	Text for Last button.
 
  * `template-url`
-  _(Default: 'template/pagination/pagination.html') :
+  _(Default: 'template/pagination/pagination.html')_ :
   Override the template for the component with a custom provided template
 
 ### Pager Settings ###
 
-Settings can be provided as attributes in the `<pager>` or globally configured through the `pagerConfig`.  
+Settings can be provided as attributes in the `<uib-pager>` or globally configured through the `uibPagerConfig`.  
 For `ng-model`, `total-items`, `items-per-page` and `num-pages` see pagination settings. Other settings are:
 
  * `align`
@@ -85,3 +85,7 @@ For `ng-model`, `total-items`, `items-per-page` and `num-pages` see pagination s
  * `template-url`
   _(Default: 'template/pagination/pager.html') :
   Override the template for the component with a custom provided template
+
+ * `ng-disabled` <i class="glyphicon glyphicon-eye-open"></i>
+  :
+  Used to disable the pager component
diff --git a/src/pagination/pagination.js b/src/pagination/pagination.js
index 8b31ee46ec..1e75dcfd5e 100644
--- a/src/pagination/pagination.js
+++ b/src/pagination/pagination.js
@@ -1,5 +1,5 @@
 angular.module('ui.bootstrap.pagination', [])
-.controller('PaginationController', ['$scope', '$attrs', '$parse', function($scope, $attrs, $parse) {
+.controller('UibPaginationController', ['$scope', '$attrs', '$parse', function($scope, $attrs, $parse) {
   var self = this,
       ngModelCtrl = { $setViewValue: angular.noop }, // nullModelCtrl
       setNumPages = $attrs.numPages ? $parse($attrs.numPages).assign : angular.noop;
@@ -73,7 +73,7 @@ angular.module('ui.bootstrap.pagination', [])
   };
 }])
 
-.constant('paginationConfig', {
+.constant('uibPaginationConfig', {
   itemsPerPage: 10,
   boundaryLinks: false,
   directionLinks: true,
@@ -84,7 +84,7 @@ angular.module('ui.bootstrap.pagination', [])
   rotate: true
 })
 
-.directive('pagination', ['$parse', 'paginationConfig', function($parse, paginationConfig) {
+.directive('uibPagination', ['$parse', 'uibPaginationConfig', function($parse, paginationConfig) {
   return {
     restrict: 'EA',
     scope: {
@@ -95,8 +95,8 @@ angular.module('ui.bootstrap.pagination', [])
       lastText: '@',
       ngDisabled:'='
     },
-    require: ['pagination', '?ngModel'],
-    controller: 'PaginationController',
+    require: ['uibPagination', '?ngModel'],
+    controller: 'UibPaginationController',
     controllerAs: 'pagination',
     templateUrl: function(element, attrs) {
       return attrs.templateUrl || 'template/pagination/pagination.html';
@@ -194,20 +194,244 @@ angular.module('ui.bootstrap.pagination', [])
   };
 }])
 
-.constant('pagerConfig', {
+.constant('uibPagerConfig', {
   itemsPerPage: 10,
   previousText: '« Previous',
   nextText: 'Next »',
   align: true
 })
 
-.directive('pager', ['pagerConfig', function(pagerConfig) {
+.directive('uibPager', ['uibPagerConfig', function(pagerConfig) {
+  return {
+    restrict: 'EA',
+    scope: {
+      totalItems: '=',
+      previousText: '@',
+      nextText: '@',
+      ngDisabled: '='
+    },
+    require: ['uibPager', '?ngModel'],
+    controller: 'UibPaginationController',
+    controllerAs: 'pagination',
+    templateUrl: function(element, attrs) {
+      return attrs.templateUrl || 'template/pagination/pager.html';
+    },
+    replace: true,
+    link: function(scope, element, attrs, ctrls) {
+      var paginationCtrl = ctrls[0], ngModelCtrl = ctrls[1];
+
+      if (!ngModelCtrl) {
+         return; // do nothing if no ng-model
+      }
+
+      scope.align = angular.isDefined(attrs.align) ? scope.$parent.$eval(attrs.align) : pagerConfig.align;
+      paginationCtrl.init(ngModelCtrl, pagerConfig);
+    }
+  };
+}]);
+
+/* Deprecated Pagination Below */
+
+angular.module('ui.bootstrap.pagination')
+.value('$paginationSuppressWarning', false)
+.controller('PaginationController', ['$scope', '$attrs', '$parse', '$log', '$paginationSuppressWarning', function($scope, $attrs, $parse, $log, $paginationSuppressWarning) {
+  if (!$paginationSuppressWarning) {
+    $log.warn('PaginationController is now deprecated. Use UibPaginationController instead.');
+  }
+
+  var self = this,
+    ngModelCtrl = { $setViewValue: angular.noop }, // nullModelCtrl
+    setNumPages = $attrs.numPages ? $parse($attrs.numPages).assign : angular.noop;
+
+  this.init = function(ngModelCtrl_, config) {
+    ngModelCtrl = ngModelCtrl_;
+    this.config = config;
+
+    ngModelCtrl.$render = function() {
+      self.render();
+    };
+
+    if ($attrs.itemsPerPage) {
+      $scope.$parent.$watch($parse($attrs.itemsPerPage), function(value) {
+        self.itemsPerPage = parseInt(value, 10);
+        $scope.totalPages = self.calculateTotalPages();
+      });
+    } else {
+      this.itemsPerPage = config.itemsPerPage;
+    }
+
+    $scope.$watch('totalItems', function() {
+      $scope.totalPages = self.calculateTotalPages();
+    });
+
+    $scope.$watch('totalPages', function(value) {
+      setNumPages($scope.$parent, value); // Readonly variable
+
+      if ( $scope.page > value ) {
+        $scope.selectPage(value);
+      } else {
+        ngModelCtrl.$render();
+      }
+    });
+  };
+
+  this.calculateTotalPages = function() {
+    var totalPages = this.itemsPerPage < 1 ? 1 : Math.ceil($scope.totalItems / this.itemsPerPage);
+    return Math.max(totalPages || 0, 1);
+  };
+
+  this.render = function() {
+    $scope.page = parseInt(ngModelCtrl.$viewValue, 10) || 1;
+  };
+
+  $scope.selectPage = function(page, evt) {
+    if (evt) {
+      evt.preventDefault();
+    }
+
+    var clickAllowed = !$scope.ngDisabled || !evt;
+    if (clickAllowed && $scope.page !== page && page > 0 && page <= $scope.totalPages) {
+      if (evt && evt.target) {
+        evt.target.blur();
+      }
+      ngModelCtrl.$setViewValue(page);
+      ngModelCtrl.$render();
+    }
+  };
+
+  $scope.getText = function(key) {
+    return $scope[key + 'Text'] || self.config[key + 'Text'];
+  };
+
+  $scope.noPrevious = function() {
+    return $scope.page === 1;
+  };
+
+  $scope.noNext = function() {
+    return $scope.page === $scope.totalPages;
+  };
+}])
+.directive('pagination', ['$parse', 'uibPaginationConfig', '$log', '$paginationSuppressWarning', function($parse, paginationConfig, $log, $paginationSuppressWarning) {
   return {
     restrict: 'EA',
     scope: {
       totalItems: '=',
+      firstText: '@',
       previousText: '@',
-      nextText: '@'
+      nextText: '@',
+      lastText: '@',
+      ngDisabled:'='
+    },
+    require: ['pagination', '?ngModel'],
+    controller: 'PaginationController',
+    controllerAs: 'pagination',
+    templateUrl: function(element, attrs) {
+      return attrs.templateUrl || 'template/pagination/pagination.html';
+    },
+    replace: true,
+    link: function(scope, element, attrs, ctrls) {
+      if (!$paginationSuppressWarning) {
+        $log.warn('pagination is now deprecated. Use uib-pagination instead.');
+      }
+      var paginationCtrl = ctrls[0], ngModelCtrl = ctrls[1];
+
+      if (!ngModelCtrl) {
+         return; // do nothing if no ng-model
+      }
+
+      // Setup configuration parameters
+      var maxSize = angular.isDefined(attrs.maxSize) ? scope.$parent.$eval(attrs.maxSize) : paginationConfig.maxSize,
+          rotate = angular.isDefined(attrs.rotate) ? scope.$parent.$eval(attrs.rotate) : paginationConfig.rotate;
+      scope.boundaryLinks = angular.isDefined(attrs.boundaryLinks) ? scope.$parent.$eval(attrs.boundaryLinks) : paginationConfig.boundaryLinks;
+      scope.directionLinks = angular.isDefined(attrs.directionLinks) ? scope.$parent.$eval(attrs.directionLinks) : paginationConfig.directionLinks;
+
+      paginationCtrl.init(ngModelCtrl, paginationConfig);
+
+      if (attrs.maxSize) {
+        scope.$parent.$watch($parse(attrs.maxSize), function(value) {
+          maxSize = parseInt(value, 10);
+          paginationCtrl.render();
+        });
+      }
+
+      // Create page object used in template
+      function makePage(number, text, isActive) {
+        return {
+          number: number,
+          text: text,
+          active: isActive
+        };
+      }
+
+      function getPages(currentPage, totalPages) {
+        var pages = [];
+
+        // Default page limits
+        var startPage = 1, endPage = totalPages;
+        var isMaxSized = angular.isDefined(maxSize) && maxSize < totalPages;
+
+        // recompute if maxSize
+        if (isMaxSized) {
+          if (rotate) {
+            // Current page is displayed in the middle of the visible ones
+            startPage = Math.max(currentPage - Math.floor(maxSize/2), 1);
+            endPage   = startPage + maxSize - 1;
+
+            // Adjust if limit is exceeded
+            if (endPage > totalPages) {
+              endPage   = totalPages;
+              startPage = endPage - maxSize + 1;
+            }
+          } else {
+            // Visible pages are paginated with maxSize
+            startPage = ((Math.ceil(currentPage / maxSize) - 1) * maxSize) + 1;
+
+            // Adjust last page if limit is exceeded
+            endPage = Math.min(startPage + maxSize - 1, totalPages);
+          }
+        }
+
+        // Add page number links
+        for (var number = startPage; number <= endPage; number++) {
+          var page = makePage(number, number, number === currentPage);
+          pages.push(page);
+        }
+
+        // Add links to move between page sets
+        if (isMaxSized && ! rotate) {
+          if (startPage > 1) {
+            var previousPageSet = makePage(startPage - 1, '...', false);
+            pages.unshift(previousPageSet);
+          }
+
+          if (endPage < totalPages) {
+            var nextPageSet = makePage(endPage + 1, '...', false);
+            pages.push(nextPageSet);
+          }
+        }
+
+        return pages;
+      }
+
+      var originalRender = paginationCtrl.render;
+      paginationCtrl.render = function() {
+        originalRender();
+        if (scope.page > 0 && scope.page <= scope.totalPages) {
+          scope.pages = getPages(scope.page, scope.totalPages);
+        }
+      };
+    }
+  };
+}])
+
+.directive('pager', ['uibPagerConfig', '$log', '$paginationSuppressWarning', function(pagerConfig, $log, $paginationSuppressWarning) {
+  return {
+    restrict: 'EA',
+    scope: {
+      totalItems: '=',
+      previousText: '@',
+      nextText: '@',
+      ngDisabled: '='
     },
     require: ['pager', '?ngModel'],
     controller: 'PaginationController',
@@ -217,6 +441,9 @@ angular.module('ui.bootstrap.pagination', [])
     },
     replace: true,
     link: function(scope, element, attrs, ctrls) {
+      if (!$paginationSuppressWarning) {
+        $log.warn('pager is now deprecated. Use uib-pager instead.');
+      }
       var paginationCtrl = ctrls[0], ngModelCtrl = ctrls[1];
 
       if (!ngModelCtrl) {
diff --git a/src/pagination/test/pager.spec.js b/src/pagination/test/pager.spec.js
index ce6496be90..3756d7062a 100644
--- a/src/pagination/test/pager.spec.js
+++ b/src/pagination/test/pager.spec.js
@@ -10,7 +10,7 @@ describe('pager directive', function() {
     $document = _$document_;
     $templateCache = _$templateCache_;
     body = $document.find('body');
-    element = $compile('<pager total-items="total" ng-model="currentPage"></pager>')($rootScope);
+    element = $compile('<uib-pager total-items="total" ng-model="currentPage"></uib-pager>')($rootScope);
     $rootScope.$digest();
   }));
 
@@ -56,10 +56,10 @@ describe('pager directive', function() {
   it('exposes the controller on the template', function() {
     $templateCache.put('template/pagination/pager.html', '<div>{{pagination.text}}</div>');
 
-    element = $compile('<pager></pager>')($rootScope);
+    element = $compile('<uib-pager></uib-pager>')($rootScope);
     $rootScope.$digest();
 
-    var ctrl = element.controller('pager');
+    var ctrl = element.controller('uibPager');
     expect(ctrl).toBeDefined();
 
     ctrl.text = 'foo';
@@ -102,7 +102,7 @@ describe('pager directive', function() {
 
   it('executes the `ng-change` expression when an element is clicked', function() {
     $rootScope.selectPageHandler = jasmine.createSpy('selectPageHandler');
-    element = $compile('<pager total-items="total" ng-model="currentPage" ng-change="selectPageHandler()"></pager>')($rootScope);
+    element = $compile('<uib-pager total-items="total" ng-model="currentPage" ng-change="selectPageHandler()"></uib-pager>')($rootScope);
     $rootScope.$digest();
 
     clickPaginationEl(-1);
@@ -156,7 +156,7 @@ describe('pager directive', function() {
   describe('`items-per-page`', function() {
     beforeEach(function() {
       $rootScope.perpage = 5;
-      element = $compile('<pager total-items="total" items-per-page="perpage" ng-model="currentPage"></pager>')($rootScope);
+      element = $compile('<uib-pager total-items="total" items-per-page="perpage" ng-model="currentPage"></uib-pager>')($rootScope);
       $rootScope.$digest();
     });
 
@@ -190,7 +190,7 @@ describe('pager directive', function() {
   describe('`num-pages`', function() {
     beforeEach(function() {
       $rootScope.numpg = null;
-      element = $compile('<pager total-items="total" ng-model="currentPage" num-pages="numpg"></pager>')($rootScope);
+      element = $compile('<uib-pager total-items="total" ng-model="currentPage" num-pages="numpg"></uib-pager>')($rootScope);
       $rootScope.$digest();
     });
 
@@ -201,17 +201,17 @@ describe('pager directive', function() {
 
   describe('setting `pagerConfig`', function() {
     var originalConfig = {};
-    beforeEach(inject(function(pagerConfig) {
-      angular.extend(originalConfig, pagerConfig);
-      pagerConfig.previousText = 'PR';
-      pagerConfig.nextText = 'NE';
-      pagerConfig.align = false;
-      element = $compile('<pager total-items="total" ng-model="currentPage"></pager>')($rootScope);
+    beforeEach(inject(function(uibPagerConfig) {
+      angular.extend(originalConfig, uibPagerConfig);
+      uibPagerConfig.previousText = 'PR';
+      uibPagerConfig.nextText = 'NE';
+      uibPagerConfig.align = false;
+      element = $compile('<uib-pager total-items="total" ng-model="currentPage"></uib-pager>')($rootScope);
       $rootScope.$digest();
     }));
-    afterEach(inject(function(pagerConfig) {
+    afterEach(inject(function(uibPagerConfig) {
       // return it to the original state
-      angular.extend(pagerConfig, originalConfig);
+      angular.extend(uibPagerConfig, originalConfig);
     }));
 
     it('should change paging text', function() {
@@ -227,7 +227,7 @@ describe('pager directive', function() {
 
   describe('override configuration from attributes', function() {
     beforeEach(function() {
-      element = $compile('<pager align="false" previous-text="<" next-text=">" total-items="total" ng-model="currentPage"></pager>')($rootScope);
+      element = $compile('<uib-pager align="false" previous-text="<" next-text=">" total-items="total" ng-model="currentPage"></uib-pager>')($rootScope);
       $rootScope.$digest();
     });
 
@@ -248,7 +248,7 @@ describe('pager directive', function() {
     it('changes "previous" & "next" text from interpolated attributes', function() {
       $rootScope.previousText = '<<';
       $rootScope.nextText = '>>';
-      element = $compile('<pager align="false" previous-text="{{previousText}}" next-text="{{nextText}}" total-items="total" ng-model="currentPage"></pager>')($rootScope);
+      element = $compile('<uib-pager align="false" previous-text="{{previousText}}" next-text="{{nextText}}" total-items="total" ng-model="currentPage"></uib-pager>')($rootScope);
       $rootScope.$digest();
 
       expect(getPaginationEl(0).text()).toBe('<<');
@@ -256,4 +256,56 @@ describe('pager directive', function() {
     });
   });
 
+  it('disables the component when ng-disabled is true', function() {
+    $rootScope.disable = true;
+
+    element = $compile('<uib-pager total-items="total" ng-disabled="disable" ng-model="currentPage"></uib-pager>')($rootScope);
+    $rootScope.$digest();
+    updateCurrentPage(2);
+
+    expect(getPaginationEl(0)).toHaveClass('disabled');
+    expect(getPaginationEl(-1)).toHaveClass('disabled');
+
+    $rootScope.disable = false;
+    $rootScope.$digest();
+
+    expect(getPaginationEl(0)).not.toHaveClass('disabled');
+    expect(getPaginationEl(-1)).not.toHaveClass('disabled');
+
+    $rootScope.disable = true;
+    $rootScope.$digest();
+
+    expect(getPaginationEl(0)).toHaveClass('disabled');
+    expect(getPaginationEl(-1)).toHaveClass('disabled');
+  });
 });
+
+describe('pager deprecation', function() {
+  beforeEach(module('ui.bootstrap.pagination'));
+  beforeEach(module('template/pagination/pager.html'));
+
+  it('should suppress warning', function() {
+    module(function($provide) {
+      $provide.value('$paginationSuppressWarning', true);
+    });
+
+    inject(function($compile, $log, $rootScope) {
+      spyOn($log, 'warn');
+      
+      var element = $compile('<pager total-items="total" ng-model="currentPage"></pager>')($rootScope);
+      $rootScope.$digest();
+      expect($log.warn.calls.count()).toBe(0);
+    });
+  });
+
+  it('should give warning by default', inject(function($compile, $log, $rootScope) {
+    spyOn($log, 'warn');
+
+    var element = $compile('<pager total-items="total" ng-model="currentPage"></pager>')($rootScope);
+    $rootScope.$digest();
+
+    expect($log.warn.calls.count()).toBe(2);
+    expect($log.warn.calls.argsFor(0)).toEqual(['PaginationController is now deprecated. Use UibPaginationController instead.']);
+    expect($log.warn.calls.argsFor(1)).toEqual(['pager is now deprecated. Use uib-pager instead.']);
+  }));
+});
\ No newline at end of file
diff --git a/src/pagination/test/pagination.spec.js b/src/pagination/test/pagination.spec.js
index ee748e46bf..a3ef25097f 100644
--- a/src/pagination/test/pagination.spec.js
+++ b/src/pagination/test/pagination.spec.js
@@ -11,7 +11,7 @@ describe('pagination directive', function() {
     $document = _$document_;
     $templateCache = _$templateCache_;
     body = $document.find('body');
-    element = $compile('<pagination total-items="total" ng-model="currentPage"></pagination>')($rootScope);
+    element = $compile('<uib-pagination total-items="total" ng-model="currentPage"></uib-pagination>')($rootScope);
     $rootScope.$digest();
   }));
 
@@ -49,10 +49,10 @@ describe('pagination directive', function() {
     $templateCache.put('template/pagination/pagination.html', '<div>{{pagination.randomText}}</div>');
     var scope = $rootScope.$new();
 
-    element = $compile('<pagination></pagination>')(scope);
+    element = $compile('<uib-pagination></uib-pagination>')(scope);
     $rootScope.$digest();
 
-    var ctrl = element.controller('pagination');
+    var ctrl = element.controller('uibPagination');
 
     expect(ctrl).toBeDefined();
 
@@ -66,7 +66,7 @@ describe('pagination directive', function() {
     $templateCache.put('foo/bar.html', '<div>baz</div>');
     var scope = $rootScope.$new();
 
-    element = $compile('<pagination template-url="foo/bar.html"></pagination>')(scope);
+    element = $compile('<uib-pagination template-url="foo/bar.html"></uib-pagination>')(scope);
     $rootScope.$digest();
 
     expect(element.html()).toBe('baz');
@@ -204,7 +204,7 @@ describe('pagination directive', function() {
   describe('`items-per-page`', function() {
     beforeEach(function() {
       $rootScope.perpage = 5;
-      element = $compile('<pagination total-items="total" items-per-page="perpage" ng-model="currentPage"></pagination>')($rootScope);
+      element = $compile('<uib-pagination total-items="total" items-per-page="perpage" ng-model="currentPage"></uib-pagination>')($rootScope);
       $rootScope.$digest();
     });
 
@@ -247,7 +247,7 @@ describe('pagination directive', function() {
   describe('executes  `ng-change` expression', function() {
     beforeEach(function() {
       $rootScope.selectPageHandler = jasmine.createSpy('selectPageHandler');
-      element = $compile('<pagination total-items="total" ng-model="currentPage" ng-change="selectPageHandler()"></pagination>')($rootScope);
+      element = $compile('<uib-pagination total-items="total" ng-model="currentPage" ng-change="selectPageHandler()"></uib-pagination>')($rootScope);
       $rootScope.$digest();
     });
 
@@ -277,7 +277,7 @@ describe('pagination directive', function() {
       $rootScope.total = 98; // 10 pages
       $rootScope.currentPage = 3;
       $rootScope.maxSize = 5;
-      element = $compile('<pagination total-items="total" ng-model="currentPage" max-size="maxSize"></pagination>')($rootScope);
+      element = $compile('<uib-pagination total-items="total" ng-model="currentPage" max-size="maxSize"></uib-pagination>')($rootScope);
       $rootScope.$digest();
     });
 
@@ -359,7 +359,7 @@ describe('pagination directive', function() {
       $rootScope.currentPage = 7;
       $rootScope.maxSize = 5;
       $rootScope.rotate = false;
-      element = $compile('<pagination total-items="total" ng-model="currentPage" max-size="maxSize" rotate="rotate"></pagination>')($rootScope);
+      element = $compile('<uib-pagination total-items="total" ng-model="currentPage" max-size="maxSize" rotate="rotate"></uib-pagination>')($rootScope);
       $rootScope.$digest();
     });
 
@@ -418,7 +418,7 @@ describe('pagination directive', function() {
 
   describe('pagination directive with `boundary-links`', function() {
     beforeEach(function() {
-      element = $compile('<pagination boundary-links="true" total-items="total" ng-model="currentPage"></pagination>')($rootScope);
+      element = $compile('<uib-pagination boundary-links="true" total-items="total" ng-model="currentPage"></uib-pagination>')($rootScope);
       $rootScope.$digest();
     });
 
@@ -473,7 +473,7 @@ describe('pagination directive', function() {
     });
 
     it('changes "first" & "last" text from attributes', function() {
-      element = $compile('<pagination boundary-links="true" first-text="<<<" last-text=">>>" total-items="total" ng-model="currentPage"></pagination>')($rootScope);
+      element = $compile('<uib-pagination boundary-links="true" first-text="<<<" last-text=">>>" total-items="total" ng-model="currentPage"></uib-pagination>')($rootScope);
       $rootScope.$digest();
 
       expect(getPaginationEl(0).text()).toBe('<<<');
@@ -481,7 +481,7 @@ describe('pagination directive', function() {
     });
 
     it('changes "previous" & "next" text from attributes', function() {
-      element = $compile('<pagination boundary-links="true" previous-text="<<" next-text=">>" total-items="total" ng-model="currentPage"></pagination>')($rootScope);
+      element = $compile('<uib-pagination boundary-links="true" previous-text="<<" next-text=">>" total-items="total" ng-model="currentPage"></uib-pagination>')($rootScope);
       $rootScope.$digest();
 
       expect(getPaginationEl(1).text()).toBe('<<');
@@ -491,7 +491,7 @@ describe('pagination directive', function() {
     it('changes "first" & "last" text from interpolated attributes', function() {
       $rootScope.myfirstText = '<<<';
       $rootScope.mylastText = '>>>';
-      element = $compile('<pagination boundary-links="true" first-text="{{myfirstText}}" last-text="{{mylastText}}" total-items="total" ng-model="currentPage"></pagination>')($rootScope);
+      element = $compile('<uib-pagination boundary-links="true" first-text="{{myfirstText}}" last-text="{{mylastText}}" total-items="total" ng-model="currentPage"></uib-pagination>')($rootScope);
       $rootScope.$digest();
 
       expect(getPaginationEl(0).text()).toBe('<<<');
@@ -501,7 +501,7 @@ describe('pagination directive', function() {
     it('changes "previous" & "next" text from interpolated attributes', function() {
       $rootScope.previousText = '<<';
       $rootScope.nextText = '>>';
-      element = $compile('<pagination boundary-links="true" previous-text="{{previousText}}" next-text="{{nextText}}" total-items="total" ng-model="currentPage"></pagination>')($rootScope);
+      element = $compile('<uib-pagination boundary-links="true" previous-text="{{previousText}}" next-text="{{nextText}}" total-items="total" ng-model="currentPage"></uib-pagination>')($rootScope);
       $rootScope.$digest();
 
       expect(getPaginationEl(1).text()).toBe('<<');
@@ -537,7 +537,7 @@ describe('pagination directive', function() {
 
   describe('pagination directive with just number links', function() {
     beforeEach(function() {
-      element = $compile('<pagination direction-links="false" total-items="total" ng-model="currentPage"></pagination>')($rootScope);
+      element = $compile('<uib-pagination direction-links="false" total-items="total" ng-model="currentPage"></uib-pagination>')($rootScope);
       $rootScope.$digest();
     });
 
@@ -589,7 +589,7 @@ describe('pagination directive', function() {
   describe('with just boundary & number links', function() {
     beforeEach(function() {
       $rootScope.directions = false;
-      element = $compile('<pagination boundary-links="true" direction-links="directions" total-items="total" ng-model="currentPage"></pagination>')($rootScope);
+      element = $compile('<uib-pagination boundary-links="true" direction-links="directions" total-items="total" ng-model="currentPage"></uib-pagination>')($rootScope);
       $rootScope.$digest();
     });
 
@@ -621,7 +621,7 @@ describe('pagination directive', function() {
   describe('`num-pages`', function () {
     beforeEach(function() {
       $rootScope.numpg = null;
-      element = $compile('<pagination total-items="total" ng-model="currentPage" num-pages="numpg"></pagination>')($rootScope);
+      element = $compile('<uib-pagination total-items="total" ng-model="currentPage" num-pages="numpg"></uib-pagination>')($rootScope);
       $rootScope.$digest();
     });
 
@@ -648,13 +648,13 @@ describe('pagination directive', function() {
 
   describe('setting `paginationConfig`', function() {
     var originalConfig, paginationConfig;
-    beforeEach(inject(function(_paginationConfig_) {
-      originalConfig = angular.copy(_paginationConfig_);
-      paginationConfig = _paginationConfig_;
+    beforeEach(inject(function(_uibPaginationConfig_) {
+      originalConfig = angular.copy(_uibPaginationConfig_);
+      paginationConfig = _uibPaginationConfig_;
     }));
-    afterEach(inject(function(paginationConfig) {
+    afterEach(inject(function(_uibPaginationConfig_) {
       // return it to the original stat
-      angular.copy(originalConfig, paginationConfig);
+      angular.copy(originalConfig, _uibPaginationConfig_);
     }));
 
     it('should change paging text', function() {
@@ -664,7 +664,7 @@ describe('pagination directive', function() {
       paginationConfig.previousText = 'PR';
       paginationConfig.nextText = 'NE';
       paginationConfig.lastText = 'LA';
-      element = $compile('<pagination total-items="total" ng-model="currentPage"></pagination>')($rootScope);
+      element = $compile('<uib-pagination total-items="total" ng-model="currentPage"></uib-pagination>')($rootScope);
       $rootScope.$digest();
 
       expect(getPaginationEl(0).text()).toBe('FI');
@@ -675,7 +675,7 @@ describe('pagination directive', function() {
 
     it('contains number of pages + 2 li elements', function() {
       paginationConfig.itemsPerPage = 5;
-      element = $compile('<pagination total-items="total" ng-model="currentPage"></pagination>')($rootScope);
+      element = $compile('<uib-pagination total-items="total" ng-model="currentPage"></uib-pagination>')($rootScope);
       $rootScope.$digest();
 
       expect(getPaginationBarSize()).toBe(12);
@@ -683,7 +683,7 @@ describe('pagination directive', function() {
 
     it('should take maxSize defaults into account', function() {
       paginationConfig.maxSize = 2;
-      element = $compile('<pagination total-items="total" ng-model="currentPage"></pagination>')($rootScope);
+      element = $compile('<uib-pagination total-items="total" ng-model="currentPage"></uib-pagination>')($rootScope);
       $rootScope.$digest();
 
       expect(getPaginationBarSize()).toBe(4);
@@ -692,7 +692,7 @@ describe('pagination directive', function() {
 
   describe('override configuration from attributes', function() {
     beforeEach(function() {
-      element = $compile('<pagination boundary-links="true" first-text="<<" previous-text="<" next-text=">" last-text=">>" total-items="total" ng-model="currentPage"></pagination>')($rootScope);
+      element = $compile('<uib-pagination boundary-links="true" first-text="<<" previous-text="<" next-text=">" last-text=">>" total-items="total" ng-model="currentPage"></uib-pagination>')($rootScope);
       $rootScope.$digest();
     });
 
@@ -710,7 +710,7 @@ describe('pagination directive', function() {
 
   describe('disabled with ngDisable', function() {
     beforeEach(function() {
-      element = $compile('<pagination total-items="total" ng-model="currentPage" ng-disabled="disabled"></pagination>')($rootScope);
+      element = $compile('<uib-pagination total-items="total" ng-model="currentPage" ng-disabled="disabled"></uib-pagination>')($rootScope);
       $rootScope.currentPage = 3;
       $rootScope.$digest();
     });
@@ -734,3 +734,33 @@ describe('pagination directive', function() {
     });
   });
 });
+
+describe('pagination deprecation', function() {
+  beforeEach(module('ui.bootstrap.pagination'));
+  beforeEach(module('template/pagination/pagination.html'));
+
+  it('should suppress warning', function() {
+    module(function($provide) {
+      $provide.value('$paginationSuppressWarning', true);
+    });
+
+    inject(function($compile, $log, $rootScope) {
+      spyOn($log, 'warn');
+
+      var element = $compile('<pagination></pagination>')($rootScope);
+      $rootScope.$digest();
+      expect($log.warn.calls.count()).toBe(0);
+    });
+  });
+
+  it('should give warning by default', inject(function($compile, $log, $rootScope) {
+    spyOn($log, 'warn');
+
+    var element = $compile('<pagination></pagination>')($rootScope);
+    $rootScope.$digest();
+
+    expect($log.warn.calls.count()).toBe(2);
+    expect($log.warn.calls.argsFor(0)).toEqual(['PaginationController is now deprecated. Use UibPaginationController instead.']);
+    expect($log.warn.calls.argsFor(1)).toEqual(['pagination is now deprecated. Use uib-pagination instead.']);
+  }));
+});
diff --git a/src/popover/docs/demo.html b/src/popover/docs/demo.html
index 89a51dcd7c..bb9042989c 100644
--- a/src/popover/docs/demo.html
+++ b/src/popover/docs/demo.html
@@ -12,9 +12,9 @@ <h4>Dynamic</h4>
       <label>Popup Template:</label>
       <input type="text" ng-model="dynamicPopover.templateUrl" class="form-control">
     </div>
-    <button popover="{{dynamicPopover.content}}" popover-title="{{dynamicPopover.title}}" type="button" class="btn btn-default">Dynamic Popover</button>
+    <button uib-popover="{{dynamicPopover.content}}" popover-title="{{dynamicPopover.title}}" type="button" class="btn btn-default">Dynamic Popover</button>
 
-    <button popover-template="dynamicPopover.templateUrl" popover-title="{{dynamicPopover.title}}" type="button" class="btn btn-default">Popover With Template</button>
+    <button uib-popover-template="dynamicPopover.templateUrl" popover-title="{{dynamicPopover.title}}" type="button" class="btn btn-default">Popover With Template</button>
 
     <script type="text/ng-template" id="myPopoverTemplate.html">
         <div>{{dynamicPopover.content}}</div>
@@ -25,20 +25,20 @@ <h4>Dynamic</h4>
     </script>
     <hr />
     <h4>Positional</h4>
-    <button popover-placement="top" popover="On the Top!" type="button" class="btn btn-default">Top</button>
-    <button popover-placement="left" popover="On the Left!" type="button" class="btn btn-default">Left</button>
-    <button popover-placement="right" popover="On the Right!" type="button" class="btn btn-default">Right</button>
-    <button popover-placement="bottom" popover="On the Bottom!" type="button" class="btn btn-default">Bottom</button>
+    <button popover-placement="top" uib-popover="On the Top!" type="button" class="btn btn-default">Top</button>
+    <button popover-placement="left" uib-popover="On the Left!" type="button" class="btn btn-default">Left</button>
+    <button popover-placement="right" uib-popover="On the Right!" type="button" class="btn btn-default">Right</button>
+    <button popover-placement="bottom" uib-popover="On the Bottom!" type="button" class="btn btn-default">Bottom</button>
     
     <hr />
     <h4>Triggers</h4>
     <p>
-      <button popover="I appeared on mouse enter!" popover-trigger="mouseenter" type="button" class="btn btn-default">Mouseenter</button>
+      <button uib-popover="I appeared on mouse enter!" popover-trigger="mouseenter" type="button" class="btn btn-default">Mouseenter</button>
     </p>
-    <input type="text" value="Click me!" popover="I appeared on focus! Click away and I'll vanish..."  popover-trigger="focus" class="form-control">
+    <input type="text" value="Click me!" uib-popover="I appeared on focus! Click away and I'll vanish..."  popover-trigger="focus" class="form-control">
 
     <hr />
     <h4>Other</h4>
-    <button Popover-animation="true" popover="I fade in and out!" type="button" class="btn btn-default">fading</button>
-    <button popover="I have a title!" popover-title="The title." type="button" class="btn btn-default">title</button>
+    <button popover-animation="true" uib-popover="I fade in and out!" type="button" class="btn btn-default">fading</button>
+    <button uib-popover="I have a title!" popover-title="The title." type="button" class="btn btn-default">title</button>
 </div>
diff --git a/src/popover/docs/readme.md b/src/popover/docs/readme.md
index 03a52f6108..993eea0514 100644
--- a/src/popover/docs/readme.md
+++ b/src/popover/docs/readme.md
@@ -4,13 +4,13 @@ directive supports multiple placements, optional transition animation, and more.
 Like the Bootstrap jQuery plugin, the popover **requires** the tooltip
 module.
 
-There are two versions of the popover: `popover` and `popover-template`:
+There are two versions of the popover: `uib-popover` and `uib-popover-template`:
 
-- `popover` takes text only and will escape any HTML provided for the popover
+- `uib-popover` takes text only and will escape any HTML provided for the popover
   body.
-- `popover-html` takes an expression that evaluates to an html string. *The user is responsible for ensuring the
+- `uib-popover-html` takes an expression that evaluates to an html string. *The user is responsible for ensuring the
   content is safe to put into the DOM!*
-- `popover-template` takes text that specifies the location of a template to
+- `uib-popover-template` takes text that specifies the location of a template to
   use for the popover body. Note that this needs to be wrapped in a tag.
 
 The popover directives provides several optional attributes to control how it
@@ -22,6 +22,8 @@ will display:
 - `popover-animation`: Should it fade in and out? Defaults to "true".
 - `popover-popup-delay`: For how long should the user have to have the mouse
   over the element before the popover shows (in milliseconds)? Defaults to 0.
+- `popover-close-popup-delay`: For how long should the popover remain open
+  after the close trigger event? Defaults to 0.
 - `popover-trigger`: What should trigger the show of the popover? See the
   `tooltip` directive for supported values.
 - `popover-append-to-body`: Should the tooltip be appended to `$body` instead of
@@ -35,3 +37,12 @@ The popover directives require the `$position` service.
 The popover directive also supports various default configurations through the
 $tooltipProvider. See the [tooltip](#tooltip) section for more information.
 
+**Known issues**
+
+For Safari 7+ support, if you want to use **focus** `popover-trigger`, you need to use an anchor tag with a tab index. For example:
+
+```
+<a tabindex="0" uib-popover="Test" popover-trigger="focus" class="btn btn-default">
+  Click Me
+</a>
+```
diff --git a/src/popover/popover.js b/src/popover/popover.js
index 80f0264eb0..bc460864ca 100644
--- a/src/popover/popover.js
+++ b/src/popover/popover.js
@@ -3,48 +3,123 @@
  * function, placement as a function, inside, support for more triggers than
  * just mouse enter/leave, and selector delegatation.
  */
-angular.module( 'ui.bootstrap.popover', ['ui.bootstrap.tooltip'])
+angular.module('ui.bootstrap.popover', ['ui.bootstrap.tooltip'])
 
-.directive('popoverTemplatePopup', function() {
+.directive('uibPopoverTemplatePopup', function() {
   return {
-    restrict: 'EA',
     replace: true,
     scope: { title: '@', contentExp: '&', placement: '@', popupClass: '@', animation: '&', isOpen: '&',
       originScope: '&' },
-    templateUrl: 'template/popover/popover-template.html'
+    templateUrl: 'template/popover/popover-template.html',
+    link: function(scope, element) {
+      element.addClass('popover');
+    }
   };
 })
 
+.directive('uibPopoverTemplate', ['$uibTooltip', function($uibTooltip) {
+  return $uibTooltip('uibPopoverTemplate', 'popover', 'click', {
+    useContentExp: true
+  });
+}])
+
+.directive('uibPopoverHtmlPopup', function() {
+  return {
+    replace: true,
+    scope: { contentExp: '&', title: '@', placement: '@', popupClass: '@', animation: '&', isOpen: '&' },
+    templateUrl: 'template/popover/popover-html.html',
+    link: function(scope, element) {
+      element.addClass('popover');
+    }
+  };
+})
+
+.directive('uibPopoverHtml', ['$uibTooltip', function($uibTooltip) {
+  return $uibTooltip('uibPopoverHtml', 'popover', 'click', {
+    useContentExp: true
+  });
+}])
+
+.directive('uibPopoverPopup', function() {
+  return {
+    replace: true,
+    scope: { title: '@', content: '@', placement: '@', popupClass: '@', animation: '&', isOpen: '&' },
+    templateUrl: 'template/popover/popover.html',
+    link: function(scope, element) {
+      element.addClass('popover');
+    }
+  };
+})
+
+.directive('uibPopover', ['$uibTooltip', function($uibTooltip) {
+  return $uibTooltip('uibPopover', 'popover', 'click');
+}]);
+
+/* Deprecated popover below */
+
+angular.module('ui.bootstrap.popover')
+
+.value('$popoverSuppressWarning', false)
+
+.directive('popoverTemplatePopup', ['$log', '$popoverSuppressWarning', function($log, $popoverSuppressWarning) {
+  return {
+    replace: true,
+    scope: { title: '@', contentExp: '&', placement: '@', popupClass: '@', animation: '&', isOpen: '&',
+      originScope: '&' },
+    templateUrl: 'template/popover/popover-template.html',
+    link: function(scope, element) {
+      if (!$popoverSuppressWarning) {
+        $log.warn('popover-template-popup is now deprecated. Use uib-popover-template-popup instead.');
+      }
+
+      element.addClass('popover');
+    }
+  };
+}])
+
 .directive('popoverTemplate', ['$tooltip', function($tooltip) {
   return $tooltip('popoverTemplate', 'popover', 'click', {
     useContentExp: true
   });
 }])
 
-.directive('popoverHtmlPopup', function() {
+.directive('popoverHtmlPopup', ['$log', '$popoverSuppressWarning', function($log, $popoverSuppressWarning) {
   return {
-    restrict: 'EA',
     replace: true,
     scope: { contentExp: '&', title: '@', placement: '@', popupClass: '@', animation: '&', isOpen: '&' },
-    templateUrl: 'template/popover/popover-html.html'
+    templateUrl: 'template/popover/popover-html.html',
+    link: function(scope, element) {
+      if (!$popoverSuppressWarning) {
+        $log.warn('popover-html-popup is now deprecated. Use uib-popover-html-popup instead.');
+      }
+
+      element.addClass('popover');
+    }
   };
-})
+}])
 
 .directive('popoverHtml', ['$tooltip', function($tooltip) {
-  return $tooltip( 'popoverHtml', 'popover', 'click', {
+  return $tooltip('popoverHtml', 'popover', 'click', {
     useContentExp: true
   });
 }])
 
-.directive('popoverPopup', function() {
+.directive('popoverPopup', ['$log', '$popoverSuppressWarning', function($log, $popoverSuppressWarning) {
   return {
-    restrict: 'EA',
     replace: true,
     scope: { title: '@', content: '@', placement: '@', popupClass: '@', animation: '&', isOpen: '&' },
-    templateUrl: 'template/popover/popover.html'
+    templateUrl: 'template/popover/popover.html',
+    link: function(scope, element) {
+      if (!$popoverSuppressWarning) {
+        $log.warn('popover-popup is now deprecated. Use uib-popover-popup instead.');
+      }
+
+      element.addClass('popover');
+    }
   };
-})
+}])
 
 .directive('popover', ['$tooltip', function($tooltip) {
-  return $tooltip( 'popover', 'popover', 'click' );
+
+  return $tooltip('popover', 'popover', 'click');
 }]);
diff --git a/src/popover/test/popover-html.spec.js b/src/popover/test/popover-html.spec.js
index c719368173..9c59daabde 100644
--- a/src/popover/test/popover-html.spec.js
+++ b/src/popover/test/popover-html.spec.js
@@ -13,7 +13,7 @@ describe('popover', function() {
 
   beforeEach(inject(function($rootScope, $compile, $sce) {
     elmBody = angular.element(
-      '<div><span popover-html="template">Selector Text</span></div>'
+      '<div><span uib-popover-html="template">Selector Text</span></div>'
     );
 
     scope = $rootScope;
@@ -35,16 +35,20 @@ describe('popover', function() {
 
   it('should open on click', inject(function() {
     elm.trigger('click');
-    expect( tooltipScope.isOpen ).toBe(true);
+    tooltipScope.$digest();
+    expect(tooltipScope.isOpen).toBe(true);
 
     // We can only test *that* the popover-popup element was created as the
     // implementation is templated and replaced.
-    expect( elmBody.children().length ).toBe(2);
+    expect(elmBody.children().length).toBe(2);
   }));
 
   it('should close on second click', inject(function() {
     elm.trigger('click');
+    tooltipScope.$digest();
+    expect(tooltipScope.isOpen).toBe(true);
     elm.trigger('click');
+    tooltipScope.$digest();
     expect(tooltipScope.isOpen).toBe(false);
   }));
 
@@ -53,6 +57,7 @@ describe('popover', function() {
     scope.$digest();
 
     elm.trigger('click');
+    tooltipScope.$digest();
     expect(tooltipScope.isOpen).toBe(false);
 
     expect(elmBody.children().length).toBe(1);
@@ -63,6 +68,7 @@ describe('popover', function() {
     scope.$digest();
 
     elm.trigger('click');
+    tooltipScope.$digest();
     expect(tooltipScope.isOpen).toBe(true);
 
     expect(elmBody.children().eq(1).text().trim()).toBe('My template');
@@ -75,6 +81,7 @@ describe('popover', function() {
 
   it('should hide popover when template becomes empty', inject(function($timeout) {
     elm.trigger('click');
+    tooltipScope.$digest();
     expect(tooltipScope.isOpen).toBe(true);
 
     scope.template = '';
@@ -93,7 +100,7 @@ describe('popover', function() {
     };
 
     elmBody = angular.element(
-      '<div><input popover-html="template" ng-click="click()" popover-trigger="mouseenter"/></div>'
+      '<div><input uib-popover-html="template" ng-click="click()" popover-trigger="mouseenter"/></div>'
     );
     $compile(elmBody)(scope);
     scope.$digest();
@@ -101,7 +108,9 @@ describe('popover', function() {
     elm = elmBody.find('input');
 
     elm.trigger('mouseenter');
+    tooltipScope.$digest();
     elm.trigger('mouseleave');
+    tooltipScope.$digest();
     expect(scope.clicked).toBeFalsy();
 
     elm.click();
@@ -109,15 +118,16 @@ describe('popover', function() {
   }));
 
   it('should popup with animate class by default', inject(function() {
-    elm.trigger( 'click' );
-    expect( tooltipScope.isOpen ).toBe( true );
+    elm.trigger('click');
+    tooltipScope.$digest();
+    expect(tooltipScope.isOpen).toBe(true);
 
     expect(elmBody.children().eq(1)).toHaveClass('fade');
   }));
 
   it('should popup without animate class when animation disabled', inject(function($compile) {
     elmBody = angular.element(
-      '<div><span popover-html="template" popover-animation="false">Selector Text</span></div>'
+      '<div><span uib-popover-html="template" popover-animation="false">Selector Text</span></div>'
     );
 
     $compile(elmBody)(scope);
@@ -127,6 +137,7 @@ describe('popover', function() {
     tooltipScope = elmScope.$$childTail;
 
     elm.trigger('click');
+    tooltipScope.$digest();
     expect(tooltipScope.isOpen).toBe(true);
     expect(elmBody.children().eq(1)).not.toHaveClass('fade');
   }));
@@ -135,7 +146,7 @@ describe('popover', function() {
     describe('placement', function() {
       it('can specify an alternative, valid placement', inject(function($compile) {
         elmBody = angular.element(
-          '<div><span popover-html="template" popover-placement="left">Trigger here</span></div>'
+          '<div><span uib-popover-html="template" popover-placement="left">Trigger here</span></div>'
         );
         $compile(elmBody)(scope);
         scope.$digest();
@@ -144,6 +155,7 @@ describe('popover', function() {
         tooltipScope = elmScope.$$childTail;
 
         elm.trigger('click');
+        tooltipScope.$digest();
         expect(tooltipScope.isOpen).toBe(true);
 
         expect(elmBody.children().length).toBe(2);
@@ -156,7 +168,7 @@ describe('popover', function() {
     describe('class', function() {
       it('can specify a custom class', inject(function($compile) {
         elmBody = angular.element(
-          '<div><span popover-html="template" popover-class="custom">Trigger here</span></div>'
+          '<div><span uib-popover-html="template" popover-class="custom">Trigger here</span></div>'
         );
         $compile(elmBody)(scope);
         scope.$digest();
@@ -165,6 +177,7 @@ describe('popover', function() {
         tooltipScope = elmScope.$$childTail;
 
         elm.trigger('click');
+        tooltipScope.$digest();
         expect(tooltipScope.isOpen).toBe(true);
 
         expect(elmBody.children().length).toBe(2);
@@ -175,4 +188,63 @@ describe('popover', function() {
   });
 });
 
+/* Deprecation tests below */
+
+describe('popover deprecation', function() {
+  beforeEach(module('ui.bootstrap.popover'));
+  beforeEach(module('template/popover/popover-html.html'));
+
+  var elm, elmBody, elmScope, tooltipScope;
+
+  function trigger(element, evt) {
+    evt = new Event(evt);
+
+    element[0].dispatchEvent(evt);
+    element.scope().$$childTail.$digest();
+  }
+
+  it('should suppress warning', function() {
+    module(function($provide) {
+      $provide.value('$popoverSuppressWarning', true);
+      $provide.value('$tooltipSuppressWarning', true);
+    });
+
+    inject(function($compile, $log, $rootScope, $sce) {
+      spyOn($log, 'warn');
+
+      $rootScope.html = 'I say: <strong class="hello">Hello!</strong>';
+      $rootScope.safeHtml = $sce.trustAsHtml($rootScope.html);
+      elmBody = angular.element('<div><span popover-html="safeHtml">Selector Text</span></div>');
+      $compile(elmBody)($rootScope);
+      $rootScope.$digest();
+      elm = elmBody.find('span');
+      elmScope = elm.scope();
+      tooltipScope = elmScope.$$childTail;
 
+      trigger(elm, 'mouseenter');
+      tooltipScope.$digest();
+
+      expect($log.warn.calls.count()).toBe(0);
+    });
+  });
+
+  it('should give warning by default', inject(function($compile, $log, $rootScope, $sce) {
+    spyOn($log, 'warn');
+
+    $rootScope.html = 'I say: <strong class="hello">Hello!</strong>';
+    $rootScope.safeHtml = $sce.trustAsHtml($rootScope.html);
+    elmBody = angular.element('<div><span popover-html="safeHtml">Selector Text</span></div>');
+    $compile(elmBody)($rootScope);
+    $rootScope.$digest();
+    elm = elmBody.find('span');
+    elmScope = elm.scope();
+    tooltipScope = elmScope.$$childTail;
+
+    elm.trigger('click');
+    tooltipScope.$digest();
+
+    expect($log.warn.calls.count()).toBe(2);
+    expect($log.warn.calls.argsFor(0)).toEqual(['$tooltip is now deprecated. Use $uibTooltip instead.']);
+    expect($log.warn.calls.argsFor(1)).toEqual(['popover-html-popup is now deprecated. Use uib-popover-html-popup instead.']);
+  }));
+});
diff --git a/src/popover/test/popover-template.spec.js b/src/popover/test/popover-template.spec.js
index f986c5c164..347f869acf 100644
--- a/src/popover/test/popover-template.spec.js
+++ b/src/popover/test/popover-template.spec.js
@@ -18,7 +18,7 @@ describe('popover template', function() {
 
   beforeEach(inject(function($rootScope, $compile) {
     elmBody = angular.element(
-      '<div><span popover-template="templateUrl">Selector Text</span></div>'
+      '<div><span uib-popover-template="templateUrl">Selector Text</span></div>'
     );
 
     scope = $rootScope;
@@ -32,10 +32,11 @@ describe('popover template', function() {
   }));
 
   it('should open on click', inject(function() {
-    elm.trigger( 'click' );
-    expect( tooltipScope.isOpen ).toBe( true );
+    elm.trigger('click');
+    tooltipScope.$digest();
+    expect(tooltipScope.isOpen).toBe(true);
 
-    expect( elmBody.children().length ).toBe( 2 );
+    expect(elmBody.children().length ).toBe(2);
   }));
 
   it('should not open on click if templateUrl is empty', inject(function() {
@@ -43,6 +44,7 @@ describe('popover template', function() {
     scope.$digest();
 
     elm.trigger('click');
+    tooltipScope.$digest();
     expect(tooltipScope.isOpen).toBe(false);
 
     expect(elmBody.children().length).toBe(1);
@@ -50,11 +52,12 @@ describe('popover template', function() {
 
   it('should show updated text', inject(function() {
     scope.myTemplateText = 'some text';
-    scope.$digest();
 
     elm.trigger('click');
+    tooltipScope.$digest();
     expect(tooltipScope.isOpen).toBe(true);
 
+    scope.$digest();
     expect(elmBody.children().eq(1).text().trim()).toBe('some text');
 
     scope.myTemplateText = 'new text';
@@ -65,6 +68,7 @@ describe('popover template', function() {
 
   it('should hide popover when template becomes empty', inject(function($timeout) {
     elm.trigger('click');
+    tooltipScope.$digest();
     expect(tooltipScope.isOpen).toBe(true);
 
     scope.templateUrl = '';
@@ -80,7 +84,7 @@ describe('popover template', function() {
     describe('placement', function() {
       it('can specify an alternative, valid placement', inject(function($compile) {
         elmBody = angular.element(
-          '<div><span popover-template="templateUrl" popover-placement="left">Trigger</span></div>'
+          '<div><span uib-popover-template="templateUrl" popover-placement="left">Trigger</span></div>'
         );
         $compile(elmBody)(scope);
         scope.$digest();
@@ -89,6 +93,7 @@ describe('popover template', function() {
         tooltipScope = elmScope.$$childTail;
 
         elm.trigger('click');
+        tooltipScope.$digest();
         expect(tooltipScope.isOpen).toBe(true);
 
         expect(elmBody.children().length).toBe(2);
@@ -101,7 +106,7 @@ describe('popover template', function() {
     describe('class', function() {
       it('can specify a custom class', inject(function($compile) {
         elmBody = angular.element(
-          '<div><span popover-template="templateUrl" popover-class="custom">Trigger</span></div>'
+          '<div><span uib-popover-template="templateUrl" popover-class="custom">Trigger</span></div>'
         );
         $compile(elmBody)(scope);
         scope.$digest();
@@ -110,6 +115,7 @@ describe('popover template', function() {
         tooltipScope = elmScope.$$childTail;
 
         elm.trigger('click');
+        tooltipScope.$digest();
         expect(tooltipScope.isOpen).toBe(true);
 
         expect(elmBody.children().length).toBe(2);
@@ -119,3 +125,56 @@ describe('popover template', function() {
     });
   });
 });
+
+/* Deprecation tests below */
+
+describe('popover template deprecation', function() {
+  beforeEach(module('ui.bootstrap.popover'));
+  beforeEach(module('template/popover/popover.html'));
+  beforeEach(module('template/popover/popover-template.html'));
+
+  var elm, elmBody, elmScope, tooltipScope;
+
+  it('should suppress warning', function() {
+    module(function($provide) {
+      $provide.value('$popoverSuppressWarning', true);
+      $provide.value('$tooltipSuppressWarning', true);
+    });
+
+    inject(function($compile, $log, $rootScope, $templateCache) {
+      spyOn($log, 'warn');
+      $templateCache.put('myUrl', [200, '<span>{{ myTemplateText }}</span>', {}]);
+      $rootScope.templateUrl = 'myUrl';
+
+      elmBody = angular.element('<div><span popover-template="templateUrl">Selector Text</span></div>');
+      $compile(elmBody)($rootScope);
+      $rootScope.$digest();
+      elm = elmBody.find('span');
+      elmScope = elm.scope();
+      tooltipScope = elmScope.$$childTail;
+
+      elm.trigger('click');
+      tooltipScope.$digest();
+      expect($log.warn.calls.count()).toBe(0);
+    });
+  });
+
+  it('should give warning by default', inject(function($compile, $log, $rootScope, $templateCache) {
+    spyOn($log, 'warn');
+    $templateCache.put('myUrl', [200, '<span>{{ myTemplateText }}</span>', {}]);
+    $rootScope.templateUrl = 'myUrl';
+
+    elmBody = angular.element('<div><span popover-template="templateUrl">Selector Text</span></div>');
+    $compile(elmBody)($rootScope);
+    elm = elmBody.find('span');
+    elmScope = elm.scope();
+    tooltipScope = elmScope.$$childTail;
+
+    elm.trigger('click');
+    tooltipScope.$digest();
+
+    expect($log.warn.calls.count()).toBe(2);
+    expect($log.warn.calls.argsFor(0)).toEqual(['$tooltip is now deprecated. Use $uibTooltip instead.']);
+    expect($log.warn.calls.argsFor(1)).toEqual(['popover-template-popup is now deprecated. Use uib-popover-template-popup instead.']);
+  }));
+});
diff --git a/src/popover/test/popover.spec.js b/src/popover/test/popover.spec.js
index b733bb44ac..4ba06777cb 100644
--- a/src/popover/test/popover.spec.js
+++ b/src/popover/test/popover.spec.js
@@ -13,7 +13,7 @@ describe('popover', function() {
 
   beforeEach(inject(function($rootScope, $compile) {
     elmBody = angular.element(
-      '<div><span popover="popover text">Selector Text</span></div>'
+      '<div><span uib-popover="popover text">Selector Text</span></div>'
     );
 
     scope = $rootScope;
@@ -34,6 +34,7 @@ describe('popover', function() {
 
   it('should open on click', inject(function() {
     elm.trigger('click');
+    tooltipScope.$digest();
     expect(tooltipScope.isOpen).toBe(true);
 
     // We can only test *that* the popover-popup element was created as the
@@ -43,7 +44,10 @@ describe('popover', function() {
 
   it('should close on second click', inject(function() {
     elm.trigger('click');
+    tooltipScope.$digest();
+    expect(tooltipScope.isOpen).toBe(true);
     elm.trigger('click');
+    tooltipScope.$digest();
     expect(tooltipScope.isOpen).toBe(false);
   }));
 
@@ -53,7 +57,7 @@ describe('popover', function() {
     };
 
     elmBody = angular.element(
-      '<div><input popover="Hello!" ng-click="click()" popover-trigger="mouseenter"/></div>'
+      '<div><input uib-popover="Hello!" ng-click="click()" popover-trigger="mouseenter"/></div>'
     );
     $compile(elmBody)(scope);
     scope.$digest();
@@ -70,6 +74,7 @@ describe('popover', function() {
 
   it('should popup with animate class by default', inject(function() {
     elm.trigger('click');
+    tooltipScope.$digest();
     expect(tooltipScope.isOpen).toBe(true);
 
     expect(elmBody.children().eq(1)).toHaveClass('fade');
@@ -77,7 +82,7 @@ describe('popover', function() {
 
   it('should popup without animate class when animation disabled', inject(function($compile) {
     elmBody = angular.element(
-      '<div><span popover="popover text" popover-animation="false">Selector Text</span></div>'
+      '<div><span uib-popover="popover text" popover-animation="false">Selector Text</span></div>'
     );
 
     $compile(elmBody)(scope);
@@ -87,6 +92,7 @@ describe('popover', function() {
     tooltipScope = elmScope.$$childTail;
 
     elm.trigger('click');
+    tooltipScope.$digest();
     expect(tooltipScope.isOpen).toBe(true);
     expect(elmBody.children().eq(1)).not.toHaveClass('fade');
   }));
@@ -95,7 +101,7 @@ describe('popover', function() {
     describe('placement', function() {
       it('can specify an alternative, valid placement', inject(function($compile) {
         elmBody = angular.element(
-          '<div><span popover="popover text" popover-placement="left">Trigger here</span></div>'
+          '<div><span uib-popover="popover text" popover-placement="left">Trigger here</span></div>'
         );
         $compile(elmBody)(scope);
         scope.$digest();
@@ -104,6 +110,7 @@ describe('popover', function() {
         tooltipScope = elmScope.$$childTail;
 
         elm.trigger('click');
+        tooltipScope.$digest();
         expect(tooltipScope.isOpen).toBe(true);
 
         expect(elmBody.children().length).toBe(2);
@@ -115,7 +122,7 @@ describe('popover', function() {
     describe('class', function() {
       it('can specify a custom class', inject(function($compile) {
         elmBody = angular.element(
-          '<div><span popover="popover text" popover-class="custom">Trigger here</span></div>'
+          '<div><span uib-popover="popover text" popover-class="custom">Trigger here</span></div>'
         );
         $compile(elmBody)(scope);
         scope.$digest();
@@ -124,6 +131,7 @@ describe('popover', function() {
         tooltipScope = elmScope.$$childTail;
 
         elm.trigger('click');
+        tooltipScope.$digest();
         expect(tooltipScope.isOpen).toBe(true);
 
         expect(elmBody.children().length).toBe(2);
@@ -131,12 +139,12 @@ describe('popover', function() {
         expect(ttipElement).toHaveClass('custom');
       }));
     });
-    
-    describe( 'is-open', function() {
+
+    describe('is-open', function() {
       beforeEach(inject(function ($compile) {
         scope.isOpen = false;
         elmBody = angular.element(
-          '<div><span popover="popover text" popover-placement="left" popover-is-open="isOpen">Trigger here</span></div>'
+          '<div><span uib-popover="popover text" popover-placement="left" popover-is-open="isOpen">Trigger here</span></div>'
         );
         $compile(elmBody)(scope);
         scope.$digest();
@@ -144,8 +152,8 @@ describe('popover', function() {
         elmScope = elm.scope();
         tooltipScope = elmScope.$$childTail;
       }));
-      
-      it( 'should show and hide with the controller value', function() {
+
+      it('should show and hide with the controller value', function() {
         expect(tooltipScope.isOpen).toBe(false);
         elmScope.isOpen = true;
         elmScope.$digest();
@@ -154,13 +162,65 @@ describe('popover', function() {
         elmScope.$digest();
         expect(tooltipScope.isOpen).toBe(false);
       });
-      
-      it( 'should update the controller value', function() {
+
+      it('should update the controller value', function() {
         elm.trigger('click');
+        tooltipScope.$digest();
         expect(elmScope.isOpen).toBe(true);
         elm.trigger('click');
+        tooltipScope.$digest();
         expect(elmScope.isOpen).toBe(false);
       });
     });
   });
 });
+
+/* Deprecation tests below */
+
+describe('popover deprecation', function() {
+  beforeEach(module('ui.bootstrap.popover'));
+  beforeEach(module('template/popover/popover.html'));
+
+  var elm, elmBody, elmScope, tooltipScope;
+
+  it('should suppress warning', function() {
+    module(function($provide) {
+      $provide.value('$popoverSuppressWarning', true);
+      $provide.value('$tooltipSuppressWarning', true);
+    });
+
+    inject(function($compile, $log, $rootScope) {
+      spyOn($log, 'warn');
+
+      elmBody = angular.element('<div><span popover="popover text">Selector Text</span></div>');
+      $compile(elmBody)($rootScope);
+      $rootScope.$digest();
+      elm = elmBody.find('span');
+      elmScope = elm.scope();
+      tooltipScope = elmScope.$$childTail;
+
+      elm.trigger('click');
+      tooltipScope.$digest();
+
+      expect($log.warn.calls.count()).toBe(0);
+    });
+  });
+
+  it('should give warning by default', inject(function($compile, $log, $rootScope) {
+    spyOn($log, 'warn');
+
+    elmBody = angular.element('<div><span popover="popover text">Selector Text</span></div>');
+    $compile(elmBody)($rootScope);
+    $rootScope.$digest();
+    elm = elmBody.find('span');
+    elmScope = elm.scope();
+    tooltipScope = elmScope.$$childTail;
+
+    elm.trigger('click');
+    tooltipScope.$digest();
+
+    expect($log.warn.calls.count()).toBe(2);
+    expect($log.warn.calls.argsFor(0)).toEqual(['$tooltip is now deprecated. Use $uibTooltip instead.']);
+    expect($log.warn.calls.argsFor(1)).toEqual(['popover-popup is now deprecated. Use uib-popover-popup instead.']);
+  }));
+});
diff --git a/src/position/position.js b/src/position/position.js
index 70b3640c55..05020531e9 100644
--- a/src/position/position.js
+++ b/src/position/position.js
@@ -6,7 +6,7 @@ angular.module('ui.bootstrap.position', [])
  * relation to other, existing elements (this is the case for tooltips, popovers,
  * typeahead suggestions etc.).
  */
-  .factory('$position', ['$document', '$window', function($document, $window) {
+  .factory('$uibPosition', ['$document', '$window', function($document, $window) {
     function getStyle(el, cssprop) {
       if (el.currentStyle) { //IE
         return el.currentStyle[cssprop];
@@ -148,3 +148,17 @@ angular.module('ui.bootstrap.position', [])
       }
     };
   }]);
+
+/* Deprecated position below */
+
+angular.module('ui.bootstrap.position')
+
+.value('$positionSuppressWarning', false)
+
+.service('$position', ['$log', '$positionSuppressWarning', '$uibPosition', function($log, $positionSuppressWarning, $uibPosition) {
+  if (!$positionSuppressWarning) {
+    $log.warn('$position is now deprecated. Use $uibPosition instead.');
+  }
+
+  angular.extend(this, $uibPosition);
+}]);
diff --git a/src/position/test/position.spec.js b/src/position/test/position.spec.js
index d35b35363a..9b0f5a05ab 100644
--- a/src/position/test/position.spec.js
+++ b/src/position/test/position.spec.js
@@ -1,5 +1,4 @@
 describe('position elements', function () {
-
   var TargetElMock = function(width, height) {
     this.width = width;
     this.height = height;
@@ -12,8 +11,8 @@ describe('position elements', function () {
   var $position;
 
   beforeEach(module('ui.bootstrap.position'));
-  beforeEach(inject(function(_$position_) {
-    $position = _$position_;
+  beforeEach(inject(function($uibPosition) {
+    $position = $uibPosition;
   }));
   beforeEach(function () {
     jasmine.addMatchers({
@@ -39,7 +38,6 @@ describe('position elements', function () {
   });
 
   describe('append-to-body: false', function() {
-
     beforeEach(function() {
       //mock position info normally queried from the DOM
       $position.position = function() {
@@ -106,3 +104,61 @@ describe('position elements', function () {
     });
   });
 });
+
+/* Deprecation tests below */
+
+describe('position deprecation', function() {
+  var TargetElMock = function(width, height) {
+    this.width = width;
+    this.height = height;
+
+    this.prop = function(propName) {
+      return propName === 'offsetWidth' ? width : height;
+    };
+  };
+  beforeEach(module('ui.bootstrap.position'));
+
+  it('should suppress warning', function() {
+    module(function($provide) {
+      $provide.value('$positionSuppressWarning', true);
+    });
+
+    inject(function($log, $position) {
+      spyOn($log, 'warn');
+      //mock position info normally queried from the DOM
+      $position.position = function() {
+        return {
+          width: 20,
+          height: 20,
+          top: 100,
+          left: 100
+        };
+      };
+
+      $position.positionElements({}, new TargetElMock(10, 10), 'other');
+
+      expect($log.warn.calls.count()).toBe(0);
+    });
+  });
+
+  it('should give warning by default', inject(function($log) {
+    spyOn($log, 'warn');
+
+    inject(function($position) {
+      //mock position info normally queried from the DOM
+      $position.position = function() {
+        return {
+          width: 20,
+          height: 20,
+          top: 100,
+          left: 100
+        };
+      };
+
+      $position.positionElements({}, new TargetElMock(10, 10), 'other');
+
+      expect($log.warn.calls.count()).toBe(1);
+      expect($log.warn.calls.argsFor(0)).toEqual(['$position is now deprecated. Use $uibPosition instead.']);
+    });
+  }));
+});
diff --git a/src/progressbar/docs/demo.html b/src/progressbar/docs/demo.html
index dd5f4db47d..3073be7c1b 100644
--- a/src/progressbar/docs/demo.html
+++ b/src/progressbar/docs/demo.html
@@ -2,23 +2,23 @@
 
     <h3>Static</h3>
     <div class="row">
-        <div class="col-sm-4"><progressbar value="55"></progressbar></div>
-        <div class="col-sm-4"><progressbar class="progress-striped" value="22" type="warning">22%</progressbar></div>
-        <div class="col-sm-4"><progressbar class="progress-striped active" max="200" value="166" type="danger"><i>166 / 200</i></progressbar></div>
+        <div class="col-sm-4"><uib-progressbar value="55"></uib-progressbar></div>
+        <div class="col-sm-4"><uib-progressbar class="progress-striped" value="22" type="warning">22%</uib-progressbar></div>
+        <div class="col-sm-4"><uib-progressbar class="progress-striped active" max="200" value="166" type="danger"><i>166 / 200</i></uib-progressbar></div>
     </div>
 
     <hr />
     <h3>Dynamic <button type="button" class="btn btn-sm btn-primary" ng-click="random()">Randomize</button></h3>
-    <progressbar max="max" value="dynamic"><span style="color:white; white-space:nowrap;">{{dynamic}} / {{max}}</span></progressbar>
+    <uib-progressbar max="max" value="dynamic"><span style="color:white; white-space:nowrap;">{{dynamic}} / {{max}}</span></uib-progressbar>
     
     <small><em>No animation</em></small>
-    <progressbar animate="false" value="dynamic" type="success"><b>{{dynamic}}%</b></progressbar>
+    <uib-progressbar animate="false" value="dynamic" type="success"><b>{{dynamic}}%</b></uib-progressbar>
 
     <small><em>Object (changes type based on value)</em></small>
-    <progressbar class="progress-striped active" value="dynamic" type="{{type}}">{{type}} <i ng-show="showWarning">!!! Watch out !!!</i></progressbar>
+    <uib-progressbar class="progress-striped active" value="dynamic" type="{{type}}">{{type}} <i ng-show="showWarning">!!! Watch out !!!</i></uib-progressbar>
     
     <hr />
     <h3>Stacked <button type="button" class="btn btn-sm btn-primary" ng-click="randomStacked()">Randomize</button></h3>
-    <progress><bar ng-repeat="bar in stacked track by $index" value="bar.value" type="{{bar.type}}"><span ng-hide="bar.value < 5">{{bar.value}}%</span></bar></progress>
+    <uib-progress><uib-bar ng-repeat="bar in stacked track by $index" value="bar.value" type="{{bar.type}}"><span ng-hide="bar.value < 5">{{bar.value}}%</span></uib-bar></uib-progress>
 
 </div>
\ No newline at end of file
diff --git a/src/progressbar/docs/readme.md b/src/progressbar/docs/readme.md
index a50766d11b..45a4fe5c9a 100644
--- a/src/progressbar/docs/readme.md
+++ b/src/progressbar/docs/readme.md
@@ -1,10 +1,10 @@
 A progress bar directive that is focused on providing feedback on the progress of a workflow or action.
 
-It supports multiple (stacked) bars into the same `<progress>` element or a single `<progressbar>` elemtnt with optional `max` attribute and transition animations.
+It supports multiple (stacked) bars into the same `<uib-progress>` element or a single `<progressbar>` element with optional `max` attribute and transition animations.
 
 ### Settings ###
 
-#### `<progressbar>` ####
+#### `<uib-progressbar>` ####
 
  * `value` <i class="glyphicon glyphicon-eye-open"></i>
  	:
@@ -22,8 +22,11 @@ It supports multiple (stacked) bars into the same `<progress>` element or a sing
  	_(Default: true)_ :
  	Whether bars use transitions to achieve the width change.
 
+ * `title`
+  _(Default: progressbar)_ :
+  Title to use as label (for accessibility)
 
 ### Stacked ###
 
-Place multiple `<bars>` into the same `<progress>` element to stack them.
-`<progress>` supports `max` and `animate` &  `<bar>` supports  `value` and `type` attributes.
+Place multiple `<uib-bar>`s into the same `<uib-progress>` element to stack them.
+`<uib-progress>` supports `max`, `animate`, and `title` &  `<uib-bar>` supports  `value`, `title`, and `type` attributes.
diff --git a/src/progressbar/progressbar.js b/src/progressbar/progressbar.js
index cc5b88f2b6..366aadba95 100644
--- a/src/progressbar/progressbar.js
+++ b/src/progressbar/progressbar.js
@@ -1,18 +1,18 @@
 angular.module('ui.bootstrap.progressbar', [])
 
-.constant('progressConfig', {
+.constant('uibProgressConfig', {
   animate: true,
   max: 100
 })
 
-.controller('ProgressController', ['$scope', '$attrs', 'progressConfig', function($scope, $attrs, progressConfig) {
+.controller('UibProgressController', ['$scope', '$attrs', 'uibProgressConfig', function($scope, $attrs, progressConfig) {
   var self = this,
       animate = angular.isDefined($attrs.animate) ? $scope.$parent.$eval($attrs.animate) : progressConfig.animate;
 
   this.bars = [];
   $scope.max = angular.isDefined($scope.max) ? $scope.max : progressConfig.max;
 
-  this.addBar = function(bar, element) {
+  this.addBar = function(bar, element, attrs) {
     if (!animate) {
       element.css({'transition': 'none'});
     }
@@ -20,6 +20,116 @@ angular.module('ui.bootstrap.progressbar', [])
     this.bars.push(bar);
 
     bar.max = $scope.max;
+    bar.title = attrs && angular.isDefined(attrs.title) ? attrs.title : 'progressbar';
+
+    bar.$watch('value', function(value) {
+      bar.recalculatePercentage();
+    });
+
+    bar.recalculatePercentage = function() {
+      var totalPercentage = self.bars.reduce(function(total, bar) {
+        bar.percent = +(100 * bar.value / bar.max).toFixed(2);
+        return total + bar.percent;
+      }, 0);
+
+      if (totalPercentage > 100) {
+        bar.percent -= totalPercentage - 100;
+      }
+    };
+
+    bar.$on('$destroy', function() {
+      element = null;
+      self.removeBar(bar);
+    });
+  };
+
+  this.removeBar = function(bar) {
+    this.bars.splice(this.bars.indexOf(bar), 1);
+    this.bars.forEach(function (bar) {
+      bar.recalculatePercentage();
+    });
+  };
+
+  $scope.$watch('max', function(max) {
+    self.bars.forEach(function(bar) {
+      bar.max = $scope.max;
+      bar.recalculatePercentage();
+    });
+  });
+}])
+
+.directive('uibProgress', function() {
+  return {
+    replace: true,
+    transclude: true,
+    controller: 'UibProgressController',
+    require: 'uibProgress',
+    scope: {
+      max: '=?'
+    },
+    templateUrl: 'template/progressbar/progress.html'
+  };
+})
+
+.directive('uibBar', function() {
+  return {
+    replace: true,
+    transclude: true,
+    require: '^uibProgress',
+    scope: {
+      value: '=',
+      type: '@'
+    },
+    templateUrl: 'template/progressbar/bar.html',
+    link: function(scope, element, attrs, progressCtrl) {
+      progressCtrl.addBar(scope, element, attrs);
+    }
+  };
+})
+
+.directive('uibProgressbar', function() {
+  return {
+    replace: true,
+    transclude: true,
+    controller: 'UibProgressController',
+    scope: {
+      value: '=',
+      max: '=?',
+      type: '@'
+    },
+    templateUrl: 'template/progressbar/progressbar.html',
+    link: function(scope, element, attrs, progressCtrl) {
+      progressCtrl.addBar(scope, angular.element(element.children()[0]), {title: attrs.title});
+    }
+  };
+});
+
+/* Deprecated progressbar below */
+
+angular.module('ui.bootstrap.progressbar')
+
+.value('$progressSuppressWarning', false)
+
+.controller('ProgressController', ['$scope', '$attrs', 'uibProgressConfig', '$log', '$progressSuppressWarning', function($scope, $attrs, progressConfig, $log, $progressSuppressWarning) {
+  if (!$progressSuppressWarning) {
+    $log.warn('ProgressController is now deprecated. Use UibProgressController instead.');
+  }
+
+  var self = this,
+    animate = angular.isDefined($attrs.animate) ? $scope.$parent.$eval($attrs.animate) : progressConfig.animate;
+
+  this.bars = [];
+  $scope.max = angular.isDefined($scope.max) ? $scope.max : progressConfig.max;
+
+  this.addBar = function(bar, element, attrs) {
+    if (!animate) {
+      element.css({'transition': 'none'});
+    }
+
+    this.bars.push(bar);
+
+    bar.max = $scope.max;
+    bar.title = attrs && angular.isDefined(attrs.title) ? attrs.title : 'progressbar';
 
     bar.$watch('value', function(value) {
       bar.recalculatePercentage();
@@ -28,14 +138,13 @@ angular.module('ui.bootstrap.progressbar', [])
     bar.recalculatePercentage = function() {
       bar.percent = +(100 * bar.value / bar.max).toFixed(2);
 
-      var totalPercentage = 0;
-      self.bars.forEach(function(bar) {
-        totalPercentage += bar.percent;
-      });
+      var totalPercentage = self.bars.reduce(function(total, bar) {
+        return total + bar.percent;
+      }, 0);
 
       if (totalPercentage > 100) {
         bar.percent -= totalPercentage - 100;
-        }
+      }
     };
 
     bar.$on('$destroy', function() {
@@ -45,7 +154,7 @@ angular.module('ui.bootstrap.progressbar', [])
   };
 
   this.removeBar = function(bar) {
-      this.bars.splice(this.bars.indexOf(bar), 1);
+    this.bars.splice(this.bars.indexOf(bar), 1);
   };
 
   $scope.$watch('max', function(max) {
@@ -56,23 +165,27 @@ angular.module('ui.bootstrap.progressbar', [])
   });
 }])
 
-.directive('progress', function() {
+.directive('progress', ['$log', '$progressSuppressWarning', function($log, $progressSuppressWarning) {
   return {
-    restrict: 'EA',
     replace: true,
     transclude: true,
     controller: 'ProgressController',
     require: 'progress',
     scope: {
-      max: '=?'
+      max: '=?',
+      title: '@?'
     },
-    templateUrl: 'template/progressbar/progress.html'
+    templateUrl: 'template/progressbar/progress.html',
+    link: function() {
+      if (!$progressSuppressWarning) {
+        $log.warn('progress is now deprecated. Use uib-progress instead.');
+      }
+    }
   };
-})
+}])
 
-.directive('bar', function() {
+.directive('bar', ['$log', '$progressSuppressWarning', function($log, $progressSuppressWarning) {
   return {
-    restrict: 'EA',
     replace: true,
     transclude: true,
     require: '^progress',
@@ -82,14 +195,16 @@ angular.module('ui.bootstrap.progressbar', [])
     },
     templateUrl: 'template/progressbar/bar.html',
     link: function(scope, element, attrs, progressCtrl) {
+      if (!$progressSuppressWarning) {
+        $log.warn('bar is now deprecated. Use uib-bar instead.');
+      }
       progressCtrl.addBar(scope, element);
     }
   };
-})
+}])
 
-.directive('progressbar', function() {
+.directive('progressbar', ['$log', '$progressSuppressWarning', function($log, $progressSuppressWarning) {
   return {
-    restrict: 'EA',
     replace: true,
     transclude: true,
     controller: 'ProgressController',
@@ -100,7 +215,10 @@ angular.module('ui.bootstrap.progressbar', [])
     },
     templateUrl: 'template/progressbar/progressbar.html',
     link: function(scope, element, attrs, progressCtrl) {
-      progressCtrl.addBar(scope, angular.element(element.children()[0]));
+      if (!$progressSuppressWarning) {
+        $log.warn('progressbar is now deprecated. Use uib-progressbar instead.');
+      }
+      progressCtrl.addBar(scope, angular.element(element.children()[0]), {title: attrs.title});
     }
   };
-});
+}]);
diff --git a/src/progressbar/test/progressbar.spec.js b/src/progressbar/test/progressbar.spec.js
index d0a1620910..8c487b2703 100644
--- a/src/progressbar/test/progressbar.spec.js
+++ b/src/progressbar/test/progressbar.spec.js
@@ -6,7 +6,7 @@ describe('progressbar directive', function() {
     $compile = _$compile_;
     $rootScope = _$rootScope_;
     $rootScope.value = 22;
-    element = $compile('<progressbar animate="false" value="value">{{value}} %</progressbar>')($rootScope);
+    element = $compile('<uib-progressbar animate="false" value="value" title="foo">{{value}} %</uib-progressbar>')($rootScope);
     $rootScope.$digest();
   }));
 
@@ -36,6 +36,14 @@ describe('progressbar directive', function() {
     expect(bar.attr('aria-valuemax')).toBe('100');
     expect(bar.attr('aria-valuenow')).toBe('22');
     expect(bar.attr('aria-valuetext')).toBe('22%');
+    expect(bar.attr('aria-labelledby')).toBe('foo');
+  });
+
+  it('has the default aria-labelledby value of `progressbar`', function() {
+    element = $compile('<uib-progressbar animate="false" value="value">{{value}} %</uib-progressbar>')($rootScope);
+    $rootScope.$digest();
+    var bar = getBar(0);
+    expect(bar.attr('aria-labelledby')).toBe('progressbar');
   });
 
   it('transcludes "bar" text', function() {
@@ -87,7 +95,7 @@ describe('progressbar directive', function() {
   describe('"max" attribute', function() {
     beforeEach(inject(function() {
       $rootScope.max = 200;
-      element = $compile('<progressbar max="max" animate="false" value="value">{{value}}/{{max}}</progressbar>')($rootScope);
+      element = $compile('<uib-progressbar max="max" animate="false" value="value">{{value}}/{{max}}</uib-progressbar>')($rootScope);
       $rootScope.$digest();
     }));
 
@@ -128,7 +136,7 @@ describe('progressbar directive', function() {
   describe('"type" attribute', function() {
     beforeEach(inject(function() {
       $rootScope.type = 'success';
-      element = $compile('<progressbar value="value" type="{{type}}"></progressbar>')($rootScope);
+      element = $compile('<uib-progressbar value="value" type="{{type}}"></uib-progressbar>')($rootScope);
       $rootScope.$digest();
     }));
 
@@ -152,11 +160,11 @@ describe('progressbar directive', function() {
   describe('stacked', function() {
     beforeEach(inject(function() {
       $rootScope.objects = [
-        { value: 10, type: 'success' },
-        { value: 50, type: 'warning' },
-        { value: 20 }
+        { value: 10, title: 'foo', type: 'success' },
+        { value: 50, title: 'bar', type: 'warning' },
+        { value: 20, title: 'baz' }
       ];
-      element = $compile('<progress animate="false"><bar ng-repeat="o in objects" value="o.value" type="{{o.type}}">{{o.value}}</bar></progress>')($rootScope);
+      element = $compile('<uib-progress animate="false"><uib-bar ng-repeat="o in objects" value="o.value" type="{{o.type}}" title="{{o.title}}">{{o.value}}</uib-bar></uib-progress>')($rootScope);
       $rootScope.$digest();
     }));
 
@@ -216,10 +224,44 @@ describe('progressbar directive', function() {
       expect(getBar(0)).not.toHaveClass(BAR_CLASS + '-warning');
     });
 
+    it('should have the correct aria markup', function() {
+      expect(getBar(0).attr('aria-valuenow')).toBe('10');
+      expect(getBar(0).attr('aria-valuemin')).toBe('0');
+      expect(getBar(0).attr('aria-valuemax')).toBe('100');
+      expect(getBar(0).attr('aria-valuetext')).toBe('10%');
+      expect(getBar(0).attr('aria-labelledby')).toBe('foo');
+
+      expect(getBar(1).attr('aria-valuenow')).toBe('50');
+      expect(getBar(1).attr('aria-valuemin')).toBe('0');
+      expect(getBar(1).attr('aria-valuemax')).toBe('100');
+      expect(getBar(1).attr('aria-valuetext')).toBe('50%');
+      expect(getBar(1).attr('aria-labelledby')).toBe('bar');
+
+      expect(getBar(2).attr('aria-valuenow')).toBe('20');
+      expect(getBar(2).attr('aria-valuemin')).toBe('0');
+      expect(getBar(2).attr('aria-valuemax')).toBe('100');
+      expect(getBar(2).attr('aria-valuetext')).toBe('20%');
+      expect(getBar(2).attr('aria-labelledby')).toBe('baz');
+    });
+
+    it('should default to `progressbar`', function() {
+      $rootScope.objects = [
+        { value: 10, title: 'foo', type: 'success' },
+        { value: 50, title: 'bar', type: 'warning' },
+        { value: 20, title: 'baz' }
+      ];
+      element = $compile('<uib-progress animate="false"><uib-bar ng-repeat="o in objects" value="o.value" type="{{o.type}}">{{o.value}}</uib-bar></uib-progress>')($rootScope);
+      $rootScope.$digest();
+
+      expect(getBar(0).attr('aria-labelledby')).toBe('progressbar');
+      expect(getBar(1).attr('aria-labelledby')).toBe('progressbar');
+      expect(getBar(2).attr('aria-labelledby')).toBe('progressbar');
+    });
+
     describe('"max" attribute', function() {
       beforeEach(inject(function() {
         $rootScope.max = 200;
-        element = $compile('<progress max="max" animate="false"><bar ng-repeat="o in objects" value="o.value">{{o.value}}/{{max}}</bar></progress>')($rootScope);
+        element = $compile('<uib-progress max="max" animate="false"><uib-bar ng-repeat="o in objects" value="o.value">{{o.value}}/{{max}}</uib-bar></uib-progress>')($rootScope);
         $rootScope.$digest();
       }));
 
@@ -273,6 +315,107 @@ describe('progressbar directive', function() {
         }
         expect(totalWidth.toFixed(2)).toBe('100.00');
       });
+
+      it('should not have a total width over 37.65% when removing bar', function() {
+        $rootScope.objects = [
+          { value: 60, type: 'warning' },
+          { value: 103 },
+          { value: 270, type: 'info' }
+        ];
+        $rootScope.max = 433;
+        $rootScope.$digest();
+        var totalWidth = 0;
+        for (var i = 0; i < 3; i++) {
+          totalWidth += parseFloat(getBar(i).css('width'));
+        }
+        expect(totalWidth.toFixed(2)).toBe('100.00');
+
+        $rootScope.objects.splice(2, 1);
+        $rootScope.$digest();
+        totalWidth = 0;
+        for (i = 0; i < 2; i++) {
+          totalWidth += parseFloat(getBar(i).css('width'));
+        }
+        expect(totalWidth.toFixed(2)).toBe('37.65');
+      });
+    });
+  });
+});
+
+/* Deprecation tests below */
+
+describe('progressbar deprecation', function() {
+  beforeEach(module('ui.bootstrap.progressbar'));
+  beforeEach(module('template/progressbar/progress.html', 'template/progressbar/bar.html', 'template/progressbar/progressbar.html'));
+
+  describe('progress & bar directives', function() {
+    it('should suppress warning', function() {
+      module(function($provide) {
+        $provide.value('$progressSuppressWarning', true);
+      });
+
+      inject(function($compile, $log, $rootScope) {
+        spyOn($log, 'warn');
+
+        $rootScope.objects = [
+          { value: 10, type: 'success' },
+          { value: 50, type: 'warning' },
+          { value: 20 }
+        ];
+        var element = $compile('<progress animate="false"><bar ng-repeat="o in objects" value="o.value" type="{{o.type}}">{{o.value}}</bar></progress>')($rootScope);
+        $rootScope.$digest();
+
+        expect($log.warn.calls.count()).toBe(0);
+      });
+    });
+
+    it('should give warning by default', inject(function($compile, $log, $rootScope) {
+      spyOn($log, 'warn');
+
+      $rootScope.objects = [
+        { value: 10, type: 'success' },
+        { value: 50, type: 'warning' },
+        { value: 20 }
+      ];
+      var element = $compile('<progress animate="false"><bar ng-repeat="o in objects" value="o.value" type="{{o.type}}">{{o.value}}</bar></progress>')($rootScope);
+      $rootScope.$digest();
+
+      expect($log.warn.calls.count()).toBe(5);
+      expect($log.warn.calls.argsFor(0)).toEqual(['ProgressController is now deprecated. Use UibProgressController instead.']);
+      expect($log.warn.calls.argsFor(1)).toEqual(['progress is now deprecated. Use uib-progress instead.']);
+      expect($log.warn.calls.argsFor(2)).toEqual(['bar is now deprecated. Use uib-bar instead.']);
+      expect($log.warn.calls.argsFor(3)).toEqual(['bar is now deprecated. Use uib-bar instead.']);
+      expect($log.warn.calls.argsFor(4)).toEqual(['bar is now deprecated. Use uib-bar instead.']);
+    }));
+  });
+
+  describe('progressbar directive', function() {
+    it('should suppress warning', function() {
+      module(function($provide) {
+        $provide.value('$progressSuppressWarning', true);
+      });
+
+      inject(function($compile, $log, $rootScope) {
+        spyOn($log, 'warn');
+
+        $rootScope.value = 22;
+        var element = $compile('<progressbar animate="false" value="value" title="foo">{{value}} %</progressbar>')($rootScope);
+        $rootScope.$digest();
+
+        expect($log.warn.calls.count()).toBe(0);
+      });
     });
+
+    it('should give warning by default', inject(function($compile, $log, $rootScope) {
+      spyOn($log, 'warn');
+
+      $rootScope.value = 22;
+      var element = $compile('<progressbar animate="false" value="value" title="foo">{{value}} %</progressbar>')($rootScope);
+      $rootScope.$digest();
+
+      expect($log.warn.calls.count()).toBe(2);
+      expect($log.warn.calls.argsFor(0)).toEqual(['ProgressController is now deprecated. Use UibProgressController instead.']);
+      expect($log.warn.calls.argsFor(1)).toEqual(['progressbar is now deprecated. Use uib-progressbar instead.']);
+    }));
   });
 });
diff --git a/src/rating/docs/demo.html b/src/rating/docs/demo.html
index f3a94fef78..1ad69f7a2e 100644
--- a/src/rating/docs/demo.html
+++ b/src/rating/docs/demo.html
@@ -1,6 +1,6 @@
 <div ng-controller="RatingDemoCtrl">
     <h4>Default</h4>
-    <rating ng-model="rate" max="max" readonly="isReadonly" on-hover="hoveringOver(value)" on-leave="overStar = null" titles="['one','two','three']" ></rating>
+    <uib-rating ng-model="rate" max="max" readonly="isReadonly" on-hover="hoveringOver(value)" on-leave="overStar = null" titles="['one','two','three']" aria-labelledby="default-rating"></uib-rating>
     <span class="label" ng-class="{'label-warning': percent<30, 'label-info': percent>=30 && percent<70, 'label-success': percent>=70}" ng-show="overStar && !isReadonly">{{percent}}%</span>
 
     <pre style="margin:15px 0;">Rate: <b>{{rate}}</b> - Readonly is: <i>{{isReadonly}}</i> - Hovering over: <b>{{overStar || "none"}}</b></pre>
@@ -10,6 +10,6 @@ <h4>Default</h4>
     <hr />
 
     <h4>Custom icons</h4>
-    <div ng-init="x = 5"><rating ng-model="x" max="15" state-on="'glyphicon-ok-sign'" state-off="'glyphicon-ok-circle'"></rating> <b>(<i>Rate:</i> {{x}})</b></div>
-    <div ng-init="y = 2"><rating ng-model="y" rating-states="ratingStates"></rating> <b>(<i>Rate:</i> {{y}})</b></div>
+    <div ng-init="x = 5"><uib-rating ng-model="x" max="15" state-on="'glyphicon-ok-sign'" state-off="'glyphicon-ok-circle'" aria-labelledby="custom-icons-1"></uib-rating> <b>(<i>Rate:</i> {{x}})</b></div>
+    <div ng-init="y = 2"><uib-rating ng-model="y" rating-states="ratingStates" aria-labelledby="custom-icons-2"></uib-rating> <b>(<i>Rate:</i> {{y}})</b></div>
 </div>
diff --git a/src/rating/docs/readme.md b/src/rating/docs/readme.md
index 003e0b951b..45cbeb98fa 100644
--- a/src/rating/docs/readme.md
+++ b/src/rating/docs/readme.md
@@ -2,7 +2,7 @@ Rating directive that will take care of visualising a star rating bar.
 
 ### Settings ###
 
-#### `<rating>` ####
+#### `<uib-rating>` ####
 
  * `ng-model` <i class="glyphicon glyphicon-eye-open"></i>
  	:
diff --git a/src/rating/rating.js b/src/rating/rating.js
index f4edf2c912..b32a1a371f 100644
--- a/src/rating/rating.js
+++ b/src/rating/rating.js
@@ -1,13 +1,13 @@
 angular.module('ui.bootstrap.rating', [])
 
-.constant('ratingConfig', {
+.constant('uibRatingConfig', {
   max: 5,
   stateOn: null,
   stateOff: null,
   titles : ['one', 'two', 'three', 'four', 'five']
 })
 
-.controller('RatingController', ['$scope', '$attrs', 'ratingConfig', function($scope, $attrs, ratingConfig) {
+.controller('UibRatingController', ['$scope', '$attrs', 'uibRatingConfig', function($scope, $attrs, ratingConfig) {
   var ngModelCtrl  = { $setViewValue: angular.noop };
 
   this.init = function(ngModelCtrl_) {
@@ -23,10 +23,10 @@ angular.module('ui.bootstrap.rating', [])
 
     this.stateOn = angular.isDefined($attrs.stateOn) ? $scope.$parent.$eval($attrs.stateOn) : ratingConfig.stateOn;
     this.stateOff = angular.isDefined($attrs.stateOff) ? $scope.$parent.$eval($attrs.stateOff) : ratingConfig.stateOff;
-    var tmpTitles = angular.isDefined($attrs.titles)  ? $scope.$parent.$eval($attrs.titles) : ratingConfig.titles ;    
+    var tmpTitles = angular.isDefined($attrs.titles)  ? $scope.$parent.$eval($attrs.titles) : ratingConfig.titles ;
     this.titles = angular.isArray(tmpTitles) && tmpTitles.length > 0 ?
       tmpTitles : ratingConfig.titles;
-    
+
     var ratingStates = angular.isDefined($attrs.ratingStates) ?
       $scope.$parent.$eval($attrs.ratingStates) :
       new Array(angular.isDefined($attrs.max) ? $scope.$parent.$eval($attrs.max) : ratingConfig.max);
@@ -39,7 +39,7 @@ angular.module('ui.bootstrap.rating', [])
     }
     return states;
   };
-  
+
   this.getTitle = function(index) {
     if (index >= this.titles.length) {
       return index + 1;
@@ -47,7 +47,7 @@ angular.module('ui.bootstrap.rating', [])
       return this.titles[index];
     }
   };
-  
+
   $scope.rate = function(value) {
     if (!$scope.readonly && value >= 0 && value <= $scope.range.length) {
       ngModelCtrl.$setViewValue(ngModelCtrl.$viewValue === value ? 0 : value);
@@ -80,9 +80,43 @@ angular.module('ui.bootstrap.rating', [])
   };
 }])
 
-.directive('rating', function() {
+.directive('uibRating', function() {
+  return {
+    require: ['uibRating', 'ngModel'],
+    scope: {
+      readonly: '=?',
+      onHover: '&',
+      onLeave: '&'
+    },
+    controller: 'UibRatingController',
+    templateUrl: 'template/rating/rating.html',
+    replace: true,
+    link: function(scope, element, attrs, ctrls) {
+      var ratingCtrl = ctrls[0], ngModelCtrl = ctrls[1];
+      ratingCtrl.init(ngModelCtrl);
+    }
+  };
+});
+
+/* Deprecated rating below */
+
+angular.module('ui.bootstrap.rating')
+
+.value('$ratingSuppressWarning', false)
+
+.controller('RatingController', ['$scope', '$attrs', '$controller', '$log', '$ratingSuppressWarning', function($scope, $attrs, $controller, $log, $ratingSuppressWarning) {
+  if (!$ratingSuppressWarning) {
+    $log.warn('RatingController is now deprecated. Use UibRatingController instead.');
+  }
+
+  angular.extend(this, $controller('UibRatingController', {
+    $scope: $scope,
+    $attrs: $attrs
+  }));
+}])
+
+.directive('rating', ['$log', '$ratingSuppressWarning', function($log, $ratingSuppressWarning) {
   return {
-    restrict: 'EA',
     require: ['rating', 'ngModel'],
     scope: {
       readonly: '=?',
@@ -93,8 +127,11 @@ angular.module('ui.bootstrap.rating', [])
     templateUrl: 'template/rating/rating.html',
     replace: true,
     link: function(scope, element, attrs, ctrls) {
+      if (!$ratingSuppressWarning) {
+        $log.warn('rating is now deprecated. Use uib-rating instead.');
+      }
       var ratingCtrl = ctrls[0], ngModelCtrl = ctrls[1];
-      ratingCtrl.init( ngModelCtrl );
+      ratingCtrl.init(ngModelCtrl);
     }
   };
-});
+}]);
diff --git a/src/rating/test/rating.spec.js b/src/rating/test/rating.spec.js
index c5de00819f..e51bc69e47 100644
--- a/src/rating/test/rating.spec.js
+++ b/src/rating/test/rating.spec.js
@@ -6,7 +6,7 @@ describe('rating directive', function() {
     $compile = _$compile_;
     $rootScope = _$rootScope_;
     $rootScope.rate = 3;
-    element = $compile('<rating ng-model="rate"></rating>')($rootScope);
+    element = $compile('<uib-rating ng-model="rate"></uib-rating>')($rootScope);
     $rootScope.$digest();
   }));
 
@@ -15,14 +15,14 @@ describe('rating directive', function() {
   }
 
   function getStar(number) {
-    return getStars().eq( number - 1 );
+    return getStars().eq(number - 1);
   }
 
   function getState(classOn, classOff) {
     var stars = getStars();
     var state = [];
     for (var i = 0, n = stars.length; i < n; i++) {
-      state.push( (stars.eq(i).hasClass(classOn || 'glyphicon-star') && ! stars.eq(i).hasClass(classOff || 'glyphicon-star-empty')) );
+      state.push((stars.eq(i).hasClass(classOn || 'glyphicon-star') && ! stars.eq(i).hasClass(classOff || 'glyphicon-star-empty')));
     }
     return state;
   }
@@ -109,7 +109,7 @@ describe('rating directive', function() {
   });
 
   it('shows different number of icons when `max` attribute is set', function() {
-    element = $compile('<rating ng-model="rate" max="7"></rating>')($rootScope);
+    element = $compile('<uib-rating ng-model="rate" max="7"></uib-rating>')($rootScope);
     $rootScope.$digest();
 
     expect(getStars().length).toBe(7);
@@ -118,7 +118,7 @@ describe('rating directive', function() {
 
   it('shows different number of icons when `max` attribute is from scope variable', function() {
     $rootScope.max = 15;
-    element = $compile('<rating ng-model="rate" max="max"></rating>')($rootScope);
+    element = $compile('<uib-rating ng-model="rate" max="max"></uib-rating>')($rootScope);
     $rootScope.$digest();
     expect(getStars().length).toBe(15);
     expect(element.attr('aria-valuemax')).toBe('15');
@@ -126,7 +126,7 @@ describe('rating directive', function() {
 
   it('handles readonly attribute', function() {
     $rootScope.isReadonly = true;
-    element = $compile('<rating ng-model="rate" readonly="isReadonly"></rating>')($rootScope);
+    element = $compile('<uib-rating ng-model="rate" readonly="isReadonly"></uib-rating>')($rootScope);
     $rootScope.$digest();
 
     expect(getState()).toEqual([true, true, true, false, false]);
@@ -146,7 +146,7 @@ describe('rating directive', function() {
 
   it('should fire onHover', function() {
     $rootScope.hoveringOver = jasmine.createSpy('hoveringOver');
-    element = $compile('<rating ng-model="rate" on-hover="hoveringOver(value)"></rating>')($rootScope);
+    element = $compile('<uib-rating ng-model="rate" on-hover="hoveringOver(value)"></uib-rating>')($rootScope);
     $rootScope.$digest();
 
     getStar(3).trigger('mouseover');
@@ -156,7 +156,7 @@ describe('rating directive', function() {
 
   it('should fire onLeave', function() {
     $rootScope.leaving = jasmine.createSpy('leaving');
-    element = $compile('<rating ng-model="rate" on-leave="leaving()"></rating>')($rootScope);
+    element = $compile('<uib-rating ng-model="rate" on-leave="leaving()"></uib-rating>')($rootScope);
     $rootScope.$digest();
 
     element.trigger('mouseleave');
@@ -216,7 +216,7 @@ describe('rating directive', function() {
     beforeEach(inject(function() {
       $rootScope.classOn = 'icon-ok-sign';
       $rootScope.classOff = 'icon-ok-circle';
-      element = $compile('<rating ng-model="rate" state-on="classOn" state-off="classOff"></rating>')($rootScope);
+      element = $compile('<uib-rating ng-model="rate" state-on="classOn" state-off="classOff"></uib-rating>')($rootScope);
       $rootScope.$digest();
     }));
 
@@ -233,7 +233,7 @@ describe('rating directive', function() {
         {stateOn: 'heart'},
         {stateOff: 'off'}
       ];
-      element = $compile('<rating ng-model="rate" rating-states="states"></rating>')($rootScope);
+      element = $compile('<uib-rating ng-model="rate" rating-states="states"></uib-rating>')($rootScope);
       $rootScope.$digest();
     }));
 
@@ -256,20 +256,20 @@ describe('rating directive', function() {
     });
   });
 
-  describe('setting ratingConfig', function() {
+  describe('setting uibRatingConfig', function() {
     var originalConfig = {};
-    beforeEach(inject(function(ratingConfig) {
+    beforeEach(inject(function(uibRatingConfig) {
       $rootScope.rate = 5;
-      angular.extend(originalConfig, ratingConfig);
-      ratingConfig.max = 10;
-      ratingConfig.stateOn = 'on';
-      ratingConfig.stateOff = 'off';
-      element = $compile('<rating ng-model="rate"></rating>')($rootScope);
+      angular.extend(originalConfig, uibRatingConfig);
+      uibRatingConfig.max = 10;
+      uibRatingConfig.stateOn = 'on';
+      uibRatingConfig.stateOff = 'off';
+      element = $compile('<uib-rating ng-model="rate"></uib-rating>')($rootScope);
       $rootScope.$digest();
     }));
-    afterEach(inject(function(ratingConfig) {
+    afterEach(inject(function(uibRatingConfig) {
       // return it to the original state
-      angular.extend(ratingConfig, originalConfig);
+      angular.extend(uibRatingConfig, originalConfig);
     }));
 
     it('should change number of icon elements', function() {
@@ -289,16 +289,16 @@ describe('rating directive', function() {
   
   describe('shows different title when `max` attribute is greater than the titles array ', function() {
     var originalConfig = {};
-    beforeEach(inject(function(ratingConfig) {
+    beforeEach(inject(function(uibRatingConfig) {
       $rootScope.rate = 5;
-      angular.extend(originalConfig, ratingConfig);
-      ratingConfig.max = 10;
-      element = $compile('<rating ng-model="rate"></rating>')($rootScope);
+      angular.extend(originalConfig, uibRatingConfig);
+      uibRatingConfig.max = 10;
+      element = $compile('<uib-rating ng-model="rate"></uib-rating>')($rootScope);
       $rootScope.$digest();
     }));
-    afterEach(inject(function(ratingConfig) {
+    afterEach(inject(function(uibRatingConfig) {
       // return it to the original state
-      angular.extend(ratingConfig, originalConfig);
+      angular.extend(uibRatingConfig, originalConfig);
     }));
  
    it('should return the default title for each star', function() {
@@ -309,20 +309,53 @@ describe('rating directive', function() {
   describe('shows custom titles ', function() {
     it('should return the custom title for each star', function() {
       $rootScope.titles = [44,45,46];
-      element = $compile('<rating ng-model="rate" titles="titles"></rating>')($rootScope);
+      element = $compile('<uib-rating ng-model="rate" titles="titles"></uib-rating>')($rootScope);
       $rootScope.$digest();
       expect(getTitles()).toEqual(['44', '45', '46', '4', '5']);
     });
     it('should return the default title if the custom title is empty', function() {
       $rootScope.titles = [];
-      element = $compile('<rating ng-model="rate" titles="titles"></rating>')($rootScope);
+      element = $compile('<uib-rating ng-model="rate" titles="titles"></uib-rating>')($rootScope);
       $rootScope.$digest();
       expect(getTitles()).toEqual(['one', 'two', 'three', 'four', 'five']);
     });
    it('should return the default title if the custom title is not an array', function() {
-      element = $compile('<rating ng-model="rate" titles="test"></rating>')($rootScope);
+      element = $compile('<uib-rating ng-model="rate" titles="test"></uib-rating>')($rootScope);
       $rootScope.$digest();
       expect(getTitles()).toEqual(['one', 'two', 'three', 'four', 'five']);
     });
   });
 });
+
+/* Deprecation tests below */
+
+describe('rating deprecation', function() {
+  beforeEach(module('ui.bootstrap.rating'));
+  beforeEach(module('template/rating/rating.html'));
+
+  it('should suppress warning', function() {
+    module(function($provide) {
+      $provide.value('$ratingSuppressWarning', true);
+    });
+
+    inject(function($compile, $log, $rootScope) {
+      spyOn($log, 'warn');
+
+      var element = $compile('<rating ng-model="rate"></rating>')($rootScope);
+      $rootScope.$digest();
+
+      expect($log.warn.calls.count()).toBe(0);
+    });
+  });
+
+  it('should give warning by default', inject(function($compile, $log, $rootScope) {
+    spyOn($log, 'warn');
+
+    var element = $compile('<rating ng-model="rate"></rating>')($rootScope);
+    $rootScope.$digest();
+
+    expect($log.warn.calls.count()).toBe(2);
+    expect($log.warn.calls.argsFor(0)).toEqual(['RatingController is now deprecated. Use UibRatingController instead.']);
+    expect($log.warn.calls.argsFor(1)).toEqual(['rating is now deprecated. Use uib-rating instead.']);
+  }));
+});
diff --git a/src/stackedMap/stackedMap.js b/src/stackedMap/stackedMap.js
new file mode 100644
index 0000000000..bd97fb60db
--- /dev/null
+++ b/src/stackedMap/stackedMap.js
@@ -0,0 +1,54 @@
+angular.module('ui.bootstrap.stackedMap', [])
+/**
+ * A helper, internal data structure that acts as a map but also allows getting / removing
+ * elements in the LIFO order
+ */
+  .factory('$$stackedMap', function() {
+    return {
+      createNew: function() {
+        var stack = [];
+
+        return {
+          add: function(key, value) {
+            stack.push({
+              key: key,
+              value: value
+            });
+          },
+          get: function(key) {
+            for (var i = 0; i < stack.length; i++) {
+              if (key == stack[i].key) {
+                return stack[i];
+              }
+            }
+          },
+          keys: function() {
+            var keys = [];
+            for (var i = 0; i < stack.length; i++) {
+              keys.push(stack[i].key);
+            }
+            return keys;
+          },
+          top: function() {
+            return stack[stack.length - 1];
+          },
+          remove: function(key) {
+            var idx = -1;
+            for (var i = 0; i < stack.length; i++) {
+              if (key == stack[i].key) {
+                idx = i;
+                break;
+              }
+            }
+            return stack.splice(idx, 1)[0];
+          },
+          removeTop: function() {
+            return stack.splice(stack.length - 1, 1)[0];
+          },
+          length: function() {
+            return stack.length;
+          }
+        };
+      }
+    };
+  });
\ No newline at end of file
diff --git a/src/modal/test/stackedMap.spec.js b/src/stackedMap/test/stackedMap.spec.js
similarity index 99%
rename from src/modal/test/stackedMap.spec.js
rename to src/stackedMap/test/stackedMap.spec.js
index 1284cd63b8..62ad5d698e 100644
--- a/src/modal/test/stackedMap.spec.js
+++ b/src/stackedMap/test/stackedMap.spec.js
@@ -1,5 +1,4 @@
 describe('stacked map', function() {
-
   var stackedMap;
 
   beforeEach(module('ui.bootstrap.modal'));
@@ -50,4 +49,4 @@ describe('stacked map', function() {
   it('should ignore removal of non-existing elements', function() {
     expect(stackedMap.remove('non-existing')).toBeUndefined();
   });
-});
\ No newline at end of file
+});
diff --git a/src/tabs/docs/demo.html b/src/tabs/docs/demo.html
index 3730e4ebaa..8a848d398f 100644
--- a/src/tabs/docs/demo.html
+++ b/src/tabs/docs/demo.html
@@ -9,31 +9,31 @@
   </p>
   <hr />
 
-  <tabset>
-    <tab heading="Static title">Static content</tab>
-    <tab ng-repeat="tab in tabs" heading="{{tab.title}}" active="tab.active" disable="tab.disabled">
+  <uib-tabset>
+    <uib-tab heading="Static title">Static content</uib-tab>
+    <uib-tab ng-repeat="tab in tabs" heading="{{tab.title}}" active="tab.active" disable="tab.disabled">
       {{tab.content}}
-    </tab>
-    <tab select="alertMe()">
-      <tab-heading>
+    </uib-tab>
+    <uib-tab select="alertMe()">
+      <uib-tab-heading>
         <i class="glyphicon glyphicon-bell"></i> Alert!
-      </tab-heading>
+      </uib-tab-heading>
       I've got an HTML heading, and a select callback. Pretty cool!
-    </tab>
-  </tabset>
+    </uib-tab>
+  </uib-tabset>
 
   <hr />
 
-  <tabset vertical="true" type="pills">
-    <tab heading="Vertical 1">Vertical content 1</tab>
-    <tab heading="Vertical 2">Vertical content 2</tab>
-  </tabset>
+  <uib-tabset vertical="true" type="pills">
+    <uib-tab heading="Vertical 1">Vertical content 1</uib-tab>
+    <uib-tab heading="Vertical 2">Vertical content 2</uib-tab>
+  </uib-tabset>
 
   <hr />
 
-  <tabset justified="true">
-    <tab heading="Justified">Justified content</tab>
-    <tab heading="SJ">Short Labeled Justified content</tab>
-    <tab heading="Long Justified">Long Labeled Justified content</tab>
-  </tabset>
+  <uib-tabset justified="true">
+    <uib-tab heading="Justified">Justified content</uib-tab>
+    <uib-tab heading="SJ">Short Labeled Justified content</uib-tab>
+    <uib-tab heading="Long Justified">Long Labeled Justified content</uib-tab>
+  </uib-tabset>
 </div>
diff --git a/src/tabs/docs/readme.md b/src/tabs/docs/readme.md
index e43fe2c5c8..d00461c479 100644
--- a/src/tabs/docs/readme.md
+++ b/src/tabs/docs/readme.md
@@ -2,7 +2,7 @@ AngularJS version of the tabs directive.
 
 ### Settings ###
 
-#### `<tabset>` ####
+#### `<uib-tabset>` ####
 
  * `vertical`
  	_(Defaults: false)_ :
@@ -16,9 +16,9 @@ AngularJS version of the tabs directive.
  	_(Defaults: 'tabs')_ :
  	Navigation type. Possible values are 'tabs' and 'pills'.
 
-#### `<tab>` ####
+#### `<uib-tab>` ####
 
- * `heading` or `<tab-heading>`
+ * `heading` or `<uib-tab-heading>`
  	:
  	Heading text or HTML markup.
 
diff --git a/src/tabs/tabs.js b/src/tabs/tabs.js
index 91f6a0ad07..cb68c8df39 100644
--- a/src/tabs/tabs.js
+++ b/src/tabs/tabs.js
@@ -9,7 +9,7 @@
 
 angular.module('ui.bootstrap.tabs', [])
 
-.controller('TabsetController', ['$scope', function TabsetCtrl($scope) {
+.controller('UibTabsetController', ['$scope', function ($scope) {
   var ctrl = this,
       tabs = ctrl.tabs = $scope.tabs = [];
 
@@ -18,10 +18,15 @@ angular.module('ui.bootstrap.tabs', [])
       if (tab.active && tab !== selectedTab) {
         tab.active = false;
         tab.onDeselect();
+        selectedTab.selectCalled = false;
       }
     });
     selectedTab.active = true;
-    selectedTab.onSelect();
+    // only call select if it has not already been called
+    if (!selectedTab.selectCalled) {
+      selectedTab.onSelect();
+      selectedTab.selectCalled = true;
+    }
   };
 
   ctrl.addTab = function addTab(tab) {
@@ -32,8 +37,7 @@ angular.module('ui.bootstrap.tabs', [])
       tab.active = true;
     } else if (tab.active) {
       ctrl.select(tab);
-    }
-    else {
+    } else {
       tab.active = false;
     }
   };
@@ -69,23 +73,23 @@ angular.module('ui.bootstrap.tabs', [])
  * @example
 <example module="ui.bootstrap">
   <file name="index.html">
-    <tabset>
-      <tab heading="Tab 1"><b>First</b> Content!</tab>
-      <tab heading="Tab 2"><i>Second</i> Content!</tab>
-    </tabset>
+    <uib-tabset>
+      <uib-tab heading="Tab 1"><b>First</b> Content!</uib-tab>
+      <uib-tab heading="Tab 2"><i>Second</i> Content!</uib-tab>
+    </uib-tabset>
     <hr />
-    <tabset vertical="true">
-      <tab heading="Vertical Tab 1"><b>First</b> Vertical Content!</tab>
-      <tab heading="Vertical Tab 2"><i>Second</i> Vertical Content!</tab>
-    </tabset>
-    <tabset justified="true">
-      <tab heading="Justified Tab 1"><b>First</b> Justified Content!</tab>
-      <tab heading="Justified Tab 2"><i>Second</i> Justified Content!</tab>
-    </tabset>
+    <uib-tabset vertical="true">
+      <uib-tab heading="Vertical Tab 1"><b>First</b> Vertical Content!</uib-tab>
+      <uib-tab heading="Vertical Tab 2"><i>Second</i> Vertical Content!</uib-tab>
+    </uib-tabset>
+    <uib-tabset justified="true">
+      <uib-tab heading="Justified Tab 1"><b>First</b> Justified Content!</uib-tab>
+      <uib-tab heading="Justified Tab 2"><i>Second</i> Justified Content!</uib-tab>
+    </uib-tabset>
   </file>
 </example>
  */
-.directive('tabset', function() {
+.directive('uibTabset', function() {
   return {
     restrict: 'EA',
     transclude: true,
@@ -93,7 +97,7 @@ angular.module('ui.bootstrap.tabs', [])
     scope: {
       type: '@'
     },
-    controller: 'TabsetController',
+    controller: 'UibTabsetController',
     templateUrl: 'template/tabs/tabset.html',
     link: function(scope, element, attrs) {
       scope.vertical = angular.isDefined(attrs.vertical) ? scope.$parent.$eval(attrs.vertical) : false;
@@ -126,19 +130,19 @@ angular.module('ui.bootstrap.tabs', [])
         Enable/disable item 2, using disabled binding
       </button>
       <br />
-      <tabset>
-        <tab heading="Tab 1">First Tab</tab>
-        <tab select="alertMe()">
-          <tab-heading><i class="icon-bell"></i> Alert me!</tab-heading>
+      <uib-tabset>
+        <uib-tab heading="Tab 1">First Tab</uib-tab>
+        <uib-tab select="alertMe()">
+          <uib-tab-heading><i class="icon-bell"></i> Alert me!</tab-heading>
           Second Tab, with alert callback and html heading!
-        </tab>
-        <tab ng-repeat="item in items"
+        </uib-tab>
+        <uib-tab ng-repeat="item in items"
           heading="{{item.title}}"
           disabled="item.disabled"
           active="item.active">
           {{item.content}}
-        </tab>
-      </tabset>
+        </uib-tab>
+      </uib-tabset>
     </div>
   </file>
   <file name="script.js">
@@ -169,22 +173,22 @@ angular.module('ui.bootstrap.tabs', [])
  * @example
 <example module="ui.bootstrap">
   <file name="index.html">
-    <tabset>
-      <tab>
-        <tab-heading><b>HTML</b> in my titles?!</tab-heading>
+    <uib-tabset>
+      <uib-tab>
+        <uib-tab-heading><b>HTML</b> in my titles?!</tab-heading>
         And some content, too!
-      </tab>
-      <tab>
-        <tab-heading><i class="icon-heart"></i> Icon heading?!?</tab-heading>
+      </uib-tab>
+      <uib-tab>
+        <uib-tab-heading><i class="icon-heart"></i> Icon heading?!?</tab-heading>
         That's right.
-      </tab>
-    </tabset>
+      </uib-tab>
+    </uib-tabset>
   </file>
 </example>
  */
-.directive('tab', ['$parse', '$log', function($parse, $log) {
+.directive('uibTab', ['$parse', function($parse) {
   return {
-    require: '^tabset',
+    require: '^uibTabset',
     restrict: 'EA',
     replace: true,
     templateUrl: 'template/tabs/tab.html',
@@ -213,17 +217,6 @@ angular.module('ui.bootstrap.tabs', [])
         });
       }
 
-      // Deprecation support of "disabled" parameter
-      // fix(tab): IE9 disabled attr renders grey text on enabled tab #2677
-      // This code is duplicated from the lines above to make it easy to remove once
-      // the feature has been completely deprecated
-      if (attrs.disabled) {
-        $log.warn('Use of "disabled" attribute has been deprecated, please use "disable"');
-        scope.$parent.$watch($parse(attrs.disabled), function(value) {
-          scope.disabled = !! value;
-        });
-      }
-
       scope.select = function() {
         if (!scope.disabled) {
           scope.active = true;
@@ -242,11 +235,11 @@ angular.module('ui.bootstrap.tabs', [])
   };
 }])
 
-.directive('tabHeadingTransclude', function() {
+.directive('uibTabHeadingTransclude', function() {
   return {
     restrict: 'A',
-    require: '^tab',
-    link: function(scope, elm, attrs, tabCtrl) {
+    require: ['?^uibTab', '?^tab'], // TODO: change to '^uibTab' after deprecation removal
+    link: function(scope, elm) {
       scope.$watch('headingElement', function updateHeadingElement(heading) {
         if (heading) {
           elm.html('');
@@ -257,12 +250,12 @@ angular.module('ui.bootstrap.tabs', [])
   };
 })
 
-.directive('tabContentTransclude', function() {
+.directive('uibTabContentTransclude', function() {
   return {
     restrict: 'A',
-    require: '^tabset',
+    require: ['?^uibTabset', '?^tabset'], // TODO: change to '^uibTabset' after deprecation removal
     link: function(scope, elm, attrs) {
-      var tab = scope.$eval(attrs.tabContentTransclude);
+      var tab = scope.$eval(attrs.uibTabContentTransclude);
 
       //Now our tab is ready to be transcluded: both the tab heading area
       //and the tab content area are loaded.  Transclude 'em both.
@@ -281,12 +274,166 @@ angular.module('ui.bootstrap.tabs', [])
 
   function isTabHeading(node) {
     return node.tagName && (
-      node.hasAttribute('tab-heading') ||
-      node.hasAttribute('data-tab-heading') ||
-      node.hasAttribute('x-tab-heading') ||
-      node.tagName.toLowerCase() === 'tab-heading' ||
-      node.tagName.toLowerCase() === 'data-tab-heading' ||
-      node.tagName.toLowerCase() === 'x-tab-heading'
+      node.hasAttribute('tab-heading') || // TODO: remove after deprecation removal
+      node.hasAttribute('data-tab-heading') || // TODO: remove after deprecation removal
+      node.hasAttribute('x-tab-heading') || // TODO: remove after deprecation removal
+      node.hasAttribute('uib-tab-heading') ||
+      node.hasAttribute('data-uib-tab-heading') ||
+      node.hasAttribute('x-uib-tab-heading') ||
+      node.tagName.toLowerCase() === 'tab-heading' || // TODO: remove after deprecation removal
+      node.tagName.toLowerCase() === 'data-tab-heading' || // TODO: remove after deprecation removal
+      node.tagName.toLowerCase() === 'x-tab-heading' || // TODO: remove after deprecation removal
+      node.tagName.toLowerCase() === 'uib-tab-heading' ||
+      node.tagName.toLowerCase() === 'data-uib-tab-heading' ||
+      node.tagName.toLowerCase() === 'x-uib-tab-heading'
     );
   }
 });
+
+/* deprecated tabs below */
+
+angular.module('ui.bootstrap.tabs')
+
+  .value('$tabsSuppressWarning', false)
+
+  .controller('TabsetController', ['$scope', '$controller', '$log', '$tabsSuppressWarning', function($scope, $controller, $log, $tabsSuppressWarning) {
+    if (!$tabsSuppressWarning) {
+      $log.warn('TabsetController is now deprecated. Use UibTabsetController instead.');
+    }
+
+    angular.extend(this, $controller('UibTabsetController', {
+      $scope: $scope
+    }));
+  }])
+
+  .directive('tabset', ['$log', '$tabsSuppressWarning', function($log, $tabsSuppressWarning) {
+    return {
+      restrict: 'EA',
+      transclude: true,
+      replace: true,
+      scope: {
+        type: '@'
+      },
+      controller: 'TabsetController',
+      templateUrl: 'template/tabs/tabset.html',
+      link: function(scope, element, attrs) {
+
+        if (!$tabsSuppressWarning) {
+          $log.warn('tabset is now deprecated. Use uib-tabset instead.');
+        }
+        scope.vertical = angular.isDefined(attrs.vertical) ? scope.$parent.$eval(attrs.vertical) : false;
+        scope.justified = angular.isDefined(attrs.justified) ? scope.$parent.$eval(attrs.justified) : false;
+      }
+    };
+  }])
+
+  .directive('tab', ['$parse', '$log', '$tabsSuppressWarning', function($parse, $log, $tabsSuppressWarning) {
+    return {
+      require: '^tabset',
+      restrict: 'EA',
+      replace: true,
+      templateUrl: 'template/tabs/tab.html',
+      transclude: true,
+      scope: {
+        active: '=?',
+        heading: '@',
+        onSelect: '&select', //This callback is called in contentHeadingTransclude
+        //once it inserts the tab's content into the dom
+        onDeselect: '&deselect'
+      },
+      controller: function() {
+        //Empty controller so other directives can require being 'under' a tab
+      },
+      link: function(scope, elm, attrs, tabsetCtrl, transclude) {
+        if (!$tabsSuppressWarning) {
+          $log.warn('tab is now deprecated. Use uib-tab instead.');
+        }
+
+        scope.$watch('active', function(active) {
+          if (active) {
+            tabsetCtrl.select(scope);
+          }
+        });
+
+        scope.disabled = false;
+        if (attrs.disable) {
+          scope.$parent.$watch($parse(attrs.disable), function(value) {
+            scope.disabled = !!value;
+          });
+        }
+
+        scope.select = function() {
+          if (!scope.disabled) {
+            scope.active = true;
+          }
+        };
+
+        tabsetCtrl.addTab(scope);
+        scope.$on('$destroy', function() {
+          tabsetCtrl.removeTab(scope);
+        });
+
+        //We need to transclude later, once the content container is ready.
+        //when this link happens, we're inside a tab heading.
+        scope.$transcludeFn = transclude;
+      }
+    };
+  }])
+
+  .directive('tabHeadingTransclude', ['$log', '$tabsSuppressWarning', function($log, $tabsSuppressWarning) {
+    return {
+      restrict: 'A',
+      require: '^tab',
+      link: function(scope, elm) {
+        if (!$tabsSuppressWarning) {
+          $log.warn('tab-heading-transclude is now deprecated. Use uib-tab-heading-transclude instead.');
+        }
+
+        scope.$watch('headingElement', function updateHeadingElement(heading) {
+          if (heading) {
+            elm.html('');
+            elm.append(heading);
+          }
+        });
+      }
+    };
+  }])
+
+  .directive('tabContentTransclude', ['$log', '$tabsSuppressWarning', function($log, $tabsSuppressWarning) {
+    return {
+      restrict: 'A',
+      require: '^tabset',
+      link: function(scope, elm, attrs) {
+        if (!$tabsSuppressWarning) {
+          $log.warn('tab-content-transclude is now deprecated. Use uib-tab-content-transclude instead.');
+        }
+
+        var tab = scope.$eval(attrs.tabContentTransclude);
+
+        //Now our tab is ready to be transcluded: both the tab heading area
+        //and the tab content area are loaded.  Transclude 'em both.
+        tab.$transcludeFn(tab.$parent, function(contents) {
+          angular.forEach(contents, function(node) {
+            if (isTabHeading(node)) {
+              //Let tabHeadingTransclude know.
+              tab.headingElement = node;
+            }
+            else {
+              elm.append(node);
+            }
+          });
+        });
+      }
+    };
+
+    function isTabHeading(node) {
+      return node.tagName && (
+          node.hasAttribute('tab-heading') ||
+          node.hasAttribute('data-tab-heading') ||
+          node.hasAttribute('x-tab-heading') ||
+          node.tagName.toLowerCase() === 'tab-heading' ||
+          node.tagName.toLowerCase() === 'data-tab-heading' ||
+          node.tagName.toLowerCase() === 'x-tab-heading'
+        );
+    }
+  }]);
diff --git a/src/tabs/test/tabs.spec.js b/src/tabs/test/tabs.spec.js
index ccf6023212..1de3c25e33 100644
--- a/src/tabs/test/tabs.spec.js
+++ b/src/tabs/test/tabs.spec.js
@@ -1,7 +1,10 @@
 describe('tabs', function() {
-  beforeEach(module('ui.bootstrap.tabs', 'template/tabs/tabset.html', 'template/tabs/tab.html'));
-
   var elm, scope;
+
+  beforeEach(module('ui.bootstrap.tabs'));
+  beforeEach(module('template/tabs/tabset.html'));
+  beforeEach(module('template/tabs/tab.html'));
+
   function titles() {
     return elm.find('ul.nav-tabs li');
   }
@@ -25,7 +28,6 @@ describe('tabs', function() {
     }
   }
 
-
   describe('basics', function() {
     beforeEach(inject(function($compile, $rootScope) {
       scope = $rootScope.$new();
@@ -37,15 +39,15 @@ describe('tabs', function() {
       scope.deselectFirst = jasmine.createSpy();
       scope.deselectSecond = jasmine.createSpy();
       elm = $compile([
-        '<tabset class="hello" data-pizza="pepperoni">',
-        '  <tab heading="First Tab {{first}}" active="actives.one" select="selectFirst()" deselect="deselectFirst()">',
+        '<uib-tabset class="hello" data-pizza="pepperoni">',
+        '  <uib-tab heading="First Tab {{first}}" active="actives.one" select="selectFirst()" deselect="deselectFirst()">',
         '    first content is {{first}}',
-        '  </tab>',
-        '  <tab active="actives.two" select="selectSecond()" deselect="deselectSecond()">',
-        '    <tab-heading><b>Second</b> Tab {{second}}</tab-heading>',
+        '  </uib-tab>',
+        '  <uib-tab active="actives.two" select="selectSecond()" deselect="deselectSecond()">',
+        '    <uib-tab-heading><b>Second</b> Tab {{second}}</uib-tab-heading>',
         '    second content is {{second}}',
-        '  </tab>',
-        '</tabset>'
+        '  </uib-tab>',
+        '</uib-tabset>'
       ].join('\n'))(scope);
       scope.$apply();
       return elm;
@@ -60,8 +62,8 @@ describe('tabs', function() {
       var t = titles();
       expect(t.length).toBe(2);
       expect(t.find('a').eq(0).text()).toBe('First Tab 1');
-      //It should put the tab-heading element into the 'a' title
-      expect(t.find('a').eq(1).children().is('tab-heading')).toBe(true);
+      //It should put the uib-tab-heading element into the 'a' title
+      expect(t.find('a').eq(1).children().is('uib-tab-heading')).toBe(true);
       expect(t.find('a').eq(1).children().html()).toBe('<b>Second</b> Tab 2');
     });
 
@@ -112,16 +114,16 @@ describe('tabs', function() {
         makeTab(), makeTab(), makeTab(true), makeTab()
       ];
       elm = $compile([
-        '<tabset>',
-        '  <tab active="tabs[0].active" select="tabs[0].select()">',
-        '  </tab>',
-        '  <tab active="tabs[1].active" select="tabs[1].select()">',
-        '  </tab>',
-        '  <tab active="tabs[2].active" select="tabs[2].select()">',
-        '  </tab>',
-        '  <tab active="tabs[3].active" select="tabs[3].select()">',
-        '  </tab>',
-        '</tabset>'
+        '<uib-tabset>',
+        '  <uib-tab active="tabs[0].active" select="tabs[0].select()">',
+        '  </uib-tab>',
+        '  <uib-tab active="tabs[1].active" select="tabs[1].select()">',
+        '  </uib-tab>',
+        '  <uib-tab active="tabs[2].active" select="tabs[2].select()">',
+        '  </uib-tab>',
+        '  <uib-tab active="tabs[3].active" select="tabs[3].select()">',
+        '  </uib-tab>',
+        '</uib-tabset>'
       ].join('\n'))(scope);
       scope.$apply();
     }));
@@ -161,10 +163,10 @@ describe('tabs', function() {
 
       elm = $compile([
         '<div>',
-        '  <tabset class="hello" data-pizza="pepperoni">',
-        '    <tab heading="First Tab" active="actives.one" select="execute(\'select1\')" deselect="execute(\'deselect1\')"></tab>',
-        '    <tab select="execute(\'select2\')" deselect="execute(\'deselect2\')"></tab>',
-        '  </tabset>',
+        '  <uib-tabset class="hello" data-pizza="pepperoni">',
+        '    <uib-tab heading="First Tab" active="actives.one" select="execute(\'select1\')" deselect="execute(\'deselect1\')"></uib-tab>',
+        '    <uib-tab select="execute(\'select2\')" deselect="execute(\'deselect2\')"></uib-tab>',
+        '  </uib-tabset>',
         '</div>'
       ].join('\n'))(scope);
       scope.$apply();
@@ -191,29 +193,33 @@ describe('tabs', function() {
   });
 
   describe('ng-repeat', function() {
-    beforeEach(inject(function($compile, $rootScope) {
+    var $compile, $rootScope;
+    beforeEach(inject(function(_$compile_, _$rootScope_) {
+      $compile = _$compile_;
+      $rootScope = _$rootScope_;
       scope = $rootScope.$new();
 
-      function makeTab(active) {
-        return {
-          active: !!active,
-          select: jasmine.createSpy()
-        };
-      }
       scope.tabs = [
         makeTab(), makeTab(), makeTab(true), makeTab()
       ];
       elm = $compile([
-        '<tabset>',
-        '  <tab ng-repeat="t in tabs" active="t.active" select="t.select()">',
-        '    <tab-heading><b>heading</b> {{index}}</tab-heading>',
+        '<uib-tabset>',
+        '  <uib-tab ng-repeat="t in tabs" active="t.active" select="t.select()">',
+        '    <uib-tab-heading><b>heading</b> {{index}}</uib-tab-heading>',
         '    content {{$index}}',
-        '  </tab>',
-        '</tabset>'
+        '  </uib-tab>',
+        '</uib-tabset>'
       ].join('\n'))(scope);
       scope.$apply();
     }));
 
+    function makeTab(active) {
+      return {
+        active: !!active,
+        select: jasmine.createSpy()
+      };
+    }
+
     function titles() {
       return elm.find('ul.nav-tabs li');
     }
@@ -263,23 +269,49 @@ describe('tabs', function() {
       scope.$apply();
       expectTabActive(scope.tabs[2]);
     });
+
+    it('should not select twice', function() {
+      elm.remove();
+      elm = null;
+      scope = $rootScope.$new();
+
+      scope.tabs = [
+        makeTab(), makeTab(), makeTab(true), makeTab()
+      ];
+      scope.foo = {active: true};
+      scope.select = jasmine.createSpy();
+      elm = $compile([
+        '<uib-tabset>',
+        '  <uib-tab ng-repeat="t in tabs" active="t.active" select="select()">',
+        '    <uib-tab-heading><b>heading</b> {{index}}</uib-tab-heading>',
+        '    content {{$index}}',
+        '  </uib-tab>',
+        '  <uib-tab active="foo.active" select="select()">',
+        '    <uib-tab-heading><b>heading</b> foo</uib-tab-heading>',
+        '    content foo',
+        '  </uib-tab>',
+        '</uib-tabset>'
+      ].join('\n'))(scope);
+      scope.$apply();
+
+      expect(scope.select.calls.count()).toBe(1);
+    });
   });
 
-  describe('advanced tab-heading element', function() {
+  describe('advanced uib-tab-heading element', function() {
     beforeEach(inject(function($compile, $rootScope, $sce) {
       scope = $rootScope.$new();
       scope.myHtml = $sce.trustAsHtml('<b>hello</b>, there!');
       scope.value = true;
       elm = $compile([
-        '<tabset>',
-        '  <tab>',
-        '    <tab-heading ng-bind-html="myHtml" ng-show="value">',
-        '    </tab-heading>',
-        '  </tab>',
-        '  <tab><data-tab-heading>1</data-tab-heading></tab>',
-        '  <tab><div data-tab-heading>2</div></tab>',
-        '  <tab><div tab-heading>3</div></tab>',
-        '</tabset>'
+        '<uib-tabset>',
+        '  <uib-tab>',
+        '    <uib-tab-heading ng-bind-html="myHtml" ng-show="value"></uib-tab-heading>',
+        '  </uib-tab>',
+        '  <uib-tab><data-uib-tab-heading>1</data-uib-tab-heading></uib-tab>',
+        '  <uib-tab><div data-uib-tab-heading>2</div></uib-tab>',
+        '  <uib-tab><div uib-tab-heading>3</div></uib-tab>',
+        '</uib-tabset>'
       ].join('\n'))(scope);
       scope.$apply();
     }));
@@ -300,7 +332,7 @@ describe('tabs', function() {
       expect(heading().eq(0)).not.toBeHidden();
     });
 
-    it('should have a tab-heading no matter what syntax was used', function() {
+    it('should have a uib-tab-heading no matter what syntax was used', function() {
       expect(heading().eq(1).text()).toBe('1');
       expect(heading().eq(2).text()).toBe('2');
       expect(heading().eq(3).text()).toBe('3');
@@ -318,26 +350,26 @@ describe('tabs', function() {
         { title:'Title 3', available:true }
       ];
       elm = $compile([
-        '<tabset>',
+        '<uib-tabset>',
         '  <!-- a comment -->',
         '  <div>div that makes troubles</div>',
-        '  <tab heading="first">First Static</tab>',
+        '  <uib-tab heading="first">First Static</uib-tab>',
         '  <div>another div that may do evil</div>',
-        '  <tab ng-repeat="tab in tabs | filter:tabIsAvailable" active="tab.active" heading="{{tab.title}}">some content</tab>',
+        '  <uib-tab ng-repeat="tab in tabs | filter:tabIsAvailable" active="tab.active" heading="{{tab.title}}">some content</uib-tab>',
         '  <!-- another comment -->',
-        '  <tab heading="mid">Mid Static</tab>',
+        '  <uib-tab heading="mid">Mid Static</uib-tab>',
         '  a text node',
         '  <!-- another comment -->',
         '  <span>yet another span that may do evil</span>',
-        '  <tab ng-repeat="tab in tabs | filter:tabIsAvailable" active="tab.active" heading="Second {{tab.title}}">some content</tab>',
+        '  <uib-tab ng-repeat="tab in tabs | filter:tabIsAvailable" active="tab.active" heading="Second {{tab.title}}">some content</uib-tab>',
         '  a text node',
         '  <span>yet another span that may do evil</span>',
         '  <!-- another comment -->',
-        '  <tab heading="last">Last Static</tab>',
+        '  <uib-tab heading="last">Last Static</uib-tab>',
         '  a text node',
         '  <span>yet another span that may do evil</span>',
         '  <!-- another comment -->',
-        '</tabset>'
+        '</uib-tabset>'
       ].join('\n'))(scope);
 
       scope.tabIsAvailable = function(tab) {
@@ -379,7 +411,7 @@ describe('tabs', function() {
     });
   });
 
-  describe('tabset controller', function() {
+  describe('uib-tabset controller', function() {
     function mockTab(isActive) {
       var _isActive;
       if (isActive || isActive === false) {
@@ -397,7 +429,7 @@ describe('tabs', function() {
     beforeEach(inject(function($controller, $rootScope) {
       scope = $rootScope;
       //instantiate the controller stand-alone, without the directive
-      ctrl = $controller('TabsetController', {$scope: scope});
+      ctrl = $controller('UibTabsetController', {$scope: scope});
     }));
 
     describe('select', function() {
@@ -479,7 +511,7 @@ describe('tabs', function() {
   describe('remove', function() {
     it('should remove title tabs when elements are destroyed and change selection', inject(function($controller, $compile, $rootScope) {
       scope = $rootScope.$new();
-      elm = $compile('<tabset><tab heading="1">Hello</tab><tab ng-repeat="i in list" heading="tab {{i}}">content {{i}}</tab></tabset>')(scope);
+      elm = $compile('<uib-tabset><uib-tab heading="1">Hello</uib-tab><uib-tab ng-repeat="i in list" heading="tab {{i}}">content {{i}}</uib-tab></uib-tabset>')(scope);
       scope.$apply();
 
       expectTitles(['1']);
@@ -539,12 +571,12 @@ describe('tabs', function() {
         getTab(false)
       ];
       elm = $compile([
-        '<tabset>',
-        '  <tab ng-repeat="t in tabs" active="t.active" select="t.select()" deselect="t.deselect()">',
-        '    <tab-heading><b>heading</b> {{index}}</tab-heading>',
+        '<uib-tabset>',
+        '  <uib-tab ng-repeat="t in tabs" active="t.active" select="t.select()" deselect="t.deselect()">',
+        '    <uib-tab-heading><b>heading</b> {{index}}</uib-tab-heading>',
         '    content {{$index}}',
-        '  </tab>',
-        '</tabset>'
+        '  </uib-tab>',
+        '</uib-tabset>'
       ].join('\n'))(scope);
       scope.$apply();
 
@@ -573,12 +605,12 @@ describe('tabs', function() {
         makeTab(false), makeTab(true), makeTab(false), makeTab(true)
       ];
       elm = $compile([
-        '<tabset>',
-        '  <tab ng-repeat="t in tabs" active="t.active" select="t.select()" disable="t.disable">',
-        '    <tab-heading><b>heading</b> {{index}}</tab-heading>',
+        '<uib-tabset>',
+        '  <uib-tab ng-repeat="t in tabs" active="t.active" select="t.select()" disable="t.disable">',
+        '    <uib-tab-heading><b>heading</b> {{index}}</uib-tab-heading>',
         '    content {{$index}}',
-        '  </tab>',
-        '</tabset>'
+        '  </uib-tab>',
+        '</uib-tabset>'
       ].join('\n'))(scope);
       scope.$apply();
     }));
@@ -622,7 +654,7 @@ describe('tabs', function() {
     beforeEach(inject(function($compile, $rootScope) {
       scope = $rootScope.$new();
       scope.vertical = true;
-      elm = $compile('<tabset vertical="vertical"></tabset>')(scope);
+      elm = $compile('<uib-tabset vertical="vertical"></uib-tabset>')(scope);
       scope.$apply();
     }));
 
@@ -635,7 +667,7 @@ describe('tabs', function() {
       beforeEach(inject(function($compile, $rootScope) {
           scope = $rootScope.$new();
           scope.justified = true;
-          elm = $compile('<tabset justified="justified"></tabset>')(scope);
+          elm = $compile('<uib-tabset justified="justified"></uib-tabset>')(scope);
           scope.$apply();
       }));
 
@@ -649,7 +681,7 @@ describe('tabs', function() {
       scope = $rootScope.$new();
       scope.navType = 'pills';
 
-      elm = $compile('<tabset type="{{navType}}"></tabset>')(scope);
+      elm = $compile('<uib-tabset type="{{navType}}"></uib-tabset>')(scope);
       scope.$apply();
     }));
 
@@ -663,13 +695,13 @@ describe('tabs', function() {
   describe('child compilation', function() {
     var elm;
     beforeEach(inject(function($compile, $rootScope) {
-      elm = $compile('<tabset><tab><div></div></tab></tabset></div>')($rootScope.$new());
+      elm = $compile('<uib-tabset><uib-tab><div></div></uib-tab></uib-tabset></div>')($rootScope.$new());
       $rootScope.$apply();
     }));
 
     it('should hookup the tab\'s children to the tab with $compile', function() {
       var tabChild = $('.tab-pane', elm).children().first();
-      expect(tabChild.inheritedData('$tabsetController')).toBeTruthy();
+      expect(tabChild.inheritedData('$uibTabsetController')).toBeTruthy();
     });
   });
 
@@ -678,7 +710,7 @@ describe('tabs', function() {
     var elm;
     it('should render correct amount of options', inject(function($compile, $rootScope) {
       var scope = $rootScope.$new();
-      elm = $compile('<tabset><tab><select ng-model="foo" ng-options="i for i in [1,2,3]"></tab>')(scope);
+      elm = $compile('<uib-tabset><uib-tab><select ng-model="foo" ng-options="i for i in [1,2,3]"></uib-tab></uib-tabset>')(scope);
       scope.$apply();
 
       var select = elm.find('select');
@@ -697,12 +729,12 @@ describe('tabs', function() {
         {title:'b', array:[2,3,4]},
         {title:'c', array:[3,4,5]}
       ];
-      elm = $compile('<div><tabset>' +
-        '<tab ng-repeat="tab in tabs" heading="{{tab.title}}">' +
-          '<tab-heading>{{$index}}</tab-heading>' +
+      elm = $compile('<div><uib-tabset>' +
+        '<uib-tab ng-repeat="tab in tabs" heading="{{tab.title}}">' +
+          '<uib-tab-heading>{{$index}}</uib-tab-heading>' +
           '<span ng-repeat="a in tab.array">{{a}},</span>' +
-        '</tab>' +
-      '</tabset></div>')(scope);
+        '</uib-tab>' +
+      '</uib-tabset></div>')(scope);
       scope.$apply();
 
       var contents = elm.find('.tab-pane');
@@ -719,20 +751,20 @@ describe('tabs', function() {
       var scope = $rootScope.$new();
       elm = $compile([
         '<div>',
-        '  <tabset class="tabbable">',
-        '    <tab heading="Tab 1">',
-        '      <tabset class="tabbable">',
-        '        <tab heading="Tab 1A">',
-        '        </tab>',
-        '      </tabset>',
-        '    </tab>',
-        '    <tab heading="Tab 2">',
-        '      <tabset class="tabbable">',
-        '        <tab heading="Tab 2A">',
-        '        </tab>',
-        '      </tabset>',
-        '    </tab>',
-        '  </tabset>',
+        '  <uib-tabset class="tabbable">',
+        '    <uib-tab heading="Tab 1">',
+        '      <uib-tabset class="tabbable">',
+        '        <uib-tab heading="Tab 1A">',
+        '        </uib-tab>',
+        '      </uib-tabset>',
+        '    </uib-tab>',
+        '    <uib-tab heading="Tab 2">',
+        '      <uib-tabset class="tabbable">',
+        '        <uib-tab heading="Tab 2A">',
+        '        </uib-tab>',
+        '      </uib-tabset>',
+        '    </uib-tab>',
+        '  </uib-tabset>',
         '</div>'
       ].join('\n'))(scope);
       scope.$apply();
@@ -749,27 +781,27 @@ describe('tabs', function() {
       scope.tab2aaText = '456';
       elm = $compile([
         '<div>',
-        '  <tabset class="tabbable">',
-        '    <tab heading="Tab 1">',
-        '      <tabset class="tabbable">',
-        '        <tab heading="{{ tab1aHead }}">',
+        '  <uib-tabset class="tabbable">',
+        '    <uib-tab heading="Tab 1">',
+        '      <uib-tabset class="tabbable">',
+        '        <uib-tab heading="{{ tab1aHead }}">',
         '          {{ tab1aText }}',
-        '        </tab>',
-        '      </tabset>',
+        '        </uib-tab>',
+        '      </uib-tabset>',
         '      <span class="tab-1">{{ tab1Text }}</span>',
-        '    </tab>',
-        '    <tab heading="Tab 2">',
-        '      <tabset class="tabbable">',
-        '        <tab heading="Tab 2A">',
-        '          <tabset class="tabbable">',
-        '            <tab heading="Tab 2AA">',
+        '    </uib-tab>',
+        '    <uib-tab heading="Tab 2">',
+        '      <uib-tabset class="tabbable">',
+        '        <uib-tab heading="Tab 2A">',
+        '          <uib-tabset class="tabbable">',
+        '            <uib-tab heading="Tab 2AA">',
         '              <span class="tab-2aa">{{ tab2aaText }}</span>',
-        '            </tab>',
-        '          </tabset>',
-        '        </tab>',
-        '      </tabset>',
-        '    </tab>',
-        '  </tabset>',
+        '            </uib-tab>',
+        '          </uib-tabset>',
+        '        </uib-tab>',
+        '      </uib-tabset>',
+        '    </uib-tab>',
+        '  </uib-tabset>',
         '</div>'
       ].join('\n'))(scope);
       scope.$apply();
@@ -801,16 +833,16 @@ describe('tabs', function() {
       ];
       elm = $compile([
         '<div>',
-        '  <tabset>',
-        '    <tab ng-repeat="tab in tabs">',
-        '      <tabset>',
-        '        <tab ng-repeat="innerTab in tab.tabs">',
+        '  <uib-tabset>',
+        '    <uib-tab ng-repeat="tab in tabs">',
+        '      <uib-tabset>',
+        '        <uib-tab ng-repeat="innerTab in tab.tabs">',
         '          <span class="inner-tab-content">{{ innerTab.content }}</span>',
-        '        </tab>',
-        '      </tabset>',
+        '        </uib-tab>',
+        '      </uib-tabset>',
         '      <span class="outer-tab-content">{{ tab.content }}</span>',
-        '    </tab>',
-        '  </tabset>',
+        '    </uib-tab>',
+        '  </uib-tabset>',
         '</div>'
       ].join('\n'))(scope);
       scope.$apply();
@@ -821,3 +853,71 @@ describe('tabs', function() {
     }));
   });
 });
+
+/* deprecation tests below */
+
+describe('tab deprecation', function() {
+  beforeEach(module('ui.bootstrap.tabs'));
+  beforeEach(module('template/tabs/tabset.html'));
+  beforeEach(module('template/tabs/tab.html'));
+
+  it('should suppress warning', function() {
+    module(function($provide) {
+      $provide.value('$tabsSuppressWarning', true);
+    });
+
+    inject(function($compile, $log, $rootScope) {
+      spyOn($log, 'warn');
+
+      var element =
+        '<tabset>' +
+          '<tab>' +
+            '<tab-heading>Tab Heading One</tab-heading>' +
+            '<div>Tab One Contents</div>' +
+          '</tab>' +
+          '<tab heading="Tab Heading Two">' +
+            '<div>Tab Two Contents</div>' +
+          '</tab>' +
+        '</tabset>';
+      $compile(element)($rootScope);
+      $rootScope.$digest();
+      expect($log.warn.calls.count()).toBe(0);
+    });
+  });
+
+  it('should give warning by default', inject(function($templateCache, $compile, $log, $rootScope) {
+    spyOn($log, 'warn');
+
+    var tabSetTemplate =
+     '<div>' +
+       '<ul class="nav nav-{{type || \'tabs\'}}" ng-class="{\'nav-stacked\': vertical, \'nav-justified\': justified}" ng-transclude></ul>' +
+       '<div class="tab-content">' +
+         '<div class="tab-pane" ng-repeat="tab in tabs" ng-class="{active: tab.active}" tab-content-transclude="tab"></div>' +
+       '</div>' +
+     '</div>';
+    $templateCache.put('template/tabs/tabset.html', tabSetTemplate);
+
+    var tabTemplate =
+      '<li ng-class="{active: active, disabled: disabled}">' +
+      '<a href ng-click="select()" tab-heading-transclude>{{heading}}</a>' +
+      '</li>';
+    $templateCache.put('template/tabs/tab.html', tabTemplate);
+
+    var element =
+      '<tabset>' +
+        '<tab>' +
+          '<tab-heading>Tab Heading One</tab-heading>' +
+          '<div>Tab One Contents</div>' +
+        '</tab>' +
+      '</tabset>';
+    $compile(element)($rootScope);
+    $rootScope.$digest();
+
+    expect($log.warn.calls.count()).toBe(5);
+    expect($log.warn.calls.argsFor(0)).toEqual(['TabsetController is now deprecated. Use UibTabsetController instead.']);
+    expect($log.warn.calls.argsFor(1)).toEqual(['tab-heading-transclude is now deprecated. Use uib-tab-heading-transclude instead.']);
+    expect($log.warn.calls.argsFor(2)).toEqual(['tab is now deprecated. Use uib-tab instead.']);
+    expect($log.warn.calls.argsFor(3)).toEqual(['tabset is now deprecated. Use uib-tabset instead.']);
+    expect($log.warn.calls.argsFor(4)).toEqual(['tab-content-transclude is now deprecated. Use uib-tab-content-transclude instead.']);
+  }));
+});
diff --git a/src/timepicker/docs/demo.html b/src/timepicker/docs/demo.html
index 5b8685cbe7..8bf9e9f64c 100644
--- a/src/timepicker/docs/demo.html
+++ b/src/timepicker/docs/demo.html
@@ -1,6 +1,6 @@
 <div ng-controller="TimepickerDemoCtrl">
 
-  <timepicker ng-model="mytime" ng-change="changed()" hour-step="hstep" minute-step="mstep" show-meridian="ismeridian"></timepicker>
+  <uib-timepicker ng-model="mytime" ng-change="changed()" hour-step="hstep" minute-step="mstep" show-meridian="ismeridian"></uib-timepicker>
 
   <pre class="alert alert-info">Time is: {{mytime | date:'shortTime' }}</pre>
 
diff --git a/src/timepicker/docs/readme.md b/src/timepicker/docs/readme.md
index 41358a0538..4e2a231b7c 100644
--- a/src/timepicker/docs/readme.md
+++ b/src/timepicker/docs/readme.md
@@ -2,12 +2,15 @@ A lightweight & configurable timepicker directive.
 
 ### Settings ###
 
-All settings can be provided as attributes in the `<timepicker>` or globally configured through the `timepickerConfig`.
+All settings can be provided as attributes in the `<uib-timepicker>` or globally configured through the `uibTimepickerConfig`.
 
  * `ng-model` <i class="glyphicon glyphicon-eye-open"></i>
  	:
  	The Date object that provides the time state.
 
+  * `template-url` (Defaults: `template/timepicker/timepicker.html`) :
+    Add the ability to override the template used on the component.
+
  * `hour-step` <i class="glyphicon glyphicon-eye-open"></i>
  	_(Defaults: 1)_ :
  	 Number of hours to increase or decrease when using a button.
@@ -47,3 +50,7 @@ All settings can be provided as attributes in the `<timepicker>` or globally con
  * `max`
     _(Defaults: undefined)_ :
      Maximum time a user can select
+
+ * `tabindex`
+    _(Defaults: 0)_ :
+     Sets tabindex for each control in timepicker
\ No newline at end of file
diff --git a/src/timepicker/test/timepicker.spec.js b/src/timepicker/test/timepicker.spec.js
index b8033d2f18..8e13ceaae2 100644
--- a/src/timepicker/test/timepicker.spec.js
+++ b/src/timepicker/test/timepicker.spec.js
@@ -1,14 +1,15 @@
 describe('timepicker directive', function() {
-  var $rootScope, $compile, element;
+  var $rootScope, $compile, $templateCache, element;
 
   beforeEach(module('ui.bootstrap.timepicker'));
   beforeEach(module('template/timepicker/timepicker.html'));
-  beforeEach(inject(function(_$compile_, _$rootScope_) {
+  beforeEach(inject(function(_$compile_, _$rootScope_, _$templateCache_) {
     $compile = _$compile_;
     $rootScope = _$rootScope_;
     $rootScope.time = newTime(14, 40);
+    $templateCache = _$templateCache_;
 
-    element = $compile('<timepicker ng-model="time"></timepicker>')($rootScope);
+    element = $compile('<uib-timepicker ng-model="time"></uib-timepicker>')($rootScope);
     $rootScope.$digest();
   }));
 
@@ -106,7 +107,7 @@ describe('timepicker directive', function() {
 
   it('has `selected` current time when model is initially cleared', function() {
     $rootScope.time = null;
-    element = $compile('<timepicker ng-model="time"></timepicker>')($rootScope);
+    element = $compile('<uib-timepicker ng-model="time"></uib-timepicker>')($rootScope);
     $rootScope.$digest();
 
     expect($rootScope.time).toBe(null);
@@ -271,7 +272,7 @@ describe('timepicker directive', function() {
   });
 
   it('changes only the time part when minutes change', function() {
-    element = $compile('<timepicker ng-model="time" minute-step="15"></timepicker>')($rootScope);
+    element = $compile('<uib-timepicker ng-model="time" minute-step="15"></uib-timepicker>')($rootScope);
     $rootScope.time = newTime(0, 0);
     $rootScope.$digest();
 
@@ -467,7 +468,7 @@ describe('timepicker directive', function() {
       $rootScope.hstep = 2;
       $rootScope.mstep = 30;
       $rootScope.time = newTime(14, 0);
-      element = $compile('<timepicker ng-model="time" hour-step="hstep" minute-step="mstep"></timepicker>')($rootScope);
+      element = $compile('<uib-timepicker ng-model="time" hour-step="hstep" minute-step="mstep"></uib-timepicker>')($rootScope);
       $rootScope.$digest();
     });
 
@@ -630,7 +631,7 @@ describe('timepicker directive', function() {
     beforeEach(function() {
       $rootScope.meridian = false;
       $rootScope.time = newTime(14, 10);
-      element = $compile('<timepicker ng-model="time" show-meridian="meridian"></timepicker>')($rootScope);
+      element = $compile('<uib-timepicker ng-model="time" show-meridian="meridian"></uib-timepicker>')($rootScope);
       $rootScope.$digest();
     });
 
@@ -662,7 +663,7 @@ describe('timepicker directive', function() {
 
     it('handles correctly initially empty model on parent element', function() {
       $rootScope.time = null;
-      element = $compile('<span ng-model="time"><timepicker show-meridian="meridian"></timepicker></span>')($rootScope);
+      element = $compile('<span ng-model="time"><uib-timepicker show-meridian="meridian"></uib-timepicker></span>')($rootScope);
       $rootScope.$digest();
 
       expect($rootScope.time).toBe(null);
@@ -672,7 +673,7 @@ describe('timepicker directive', function() {
   describe('`meridians` attribute', function() {
     beforeEach(inject(function() {
       $rootScope.meridiansArray = ['am', 'pm'];
-      element = $compile('<timepicker ng-model="time" meridians="meridiansArray"></timepicker>')($rootScope);
+      element = $compile('<uib-timepicker ng-model="time" meridians="meridiansArray"></uib-timepicker>')($rootScope);
       $rootScope.$digest();
     }));
 
@@ -690,7 +691,7 @@ describe('timepicker directive', function() {
   describe('`readonly-input` attribute', function() {
     beforeEach(inject(function() {
       $rootScope.meridiansArray = ['am', 'pm'];
-      element = $compile('<timepicker ng-model="time" readonly-input="true"></timepicker>')($rootScope);
+      element = $compile('<uib-timepicker ng-model="time" readonly-input="true"></uib-timepicker>')($rootScope);
       $rootScope.$digest();
     }));
 
@@ -703,20 +704,20 @@ describe('timepicker directive', function() {
 
   describe('setting timepickerConfig steps', function() {
     var originalConfig = {};
-    beforeEach(inject(function(_$compile_, _$rootScope_, timepickerConfig) {
-      angular.extend(originalConfig, timepickerConfig);
-      timepickerConfig.hourStep = 2;
-      timepickerConfig.minuteStep = 10;
-      timepickerConfig.showMeridian = false;
-      element = $compile('<timepicker ng-model="time"></timepicker>')($rootScope);
+    beforeEach(inject(function(_$compile_, _$rootScope_, uibTimepickerConfig) {
+      angular.extend(originalConfig, uibTimepickerConfig);
+      uibTimepickerConfig.hourStep = 2;
+      uibTimepickerConfig.minuteStep = 10;
+      uibTimepickerConfig.showMeridian = false;
+      element = $compile('<uib-timepicker ng-model="time"></uib-timepicker>')($rootScope);
       $rootScope.$digest();
     }));
-    afterEach(inject(function(timepickerConfig) {
+    afterEach(inject(function(uibTimepickerConfig) {
       // return it to the original state
-      angular.extend(timepickerConfig, originalConfig);
+      angular.extend(uibTimepickerConfig, originalConfig);
     }));
 
-    it('does not affect the initial value', function () {
+    it('does not affect the initial value', function() {
       expect(getTimeState(true)).toEqual(['14', '40']);
       expect(getModelState()).toEqual([14, 40]);
     });
@@ -750,16 +751,16 @@ describe('timepicker directive', function() {
 
   describe('setting timepickerConfig meridian labels', function() {
     var originalConfig = {};
-    beforeEach(inject(function(_$compile_, _$rootScope_, timepickerConfig) {
-      angular.extend(originalConfig, timepickerConfig);
-      timepickerConfig.meridians = ['π.μ.', 'μ.μ.'];
-      timepickerConfig.showMeridian = true;
-      element = $compile('<timepicker ng-model="time"></timepicker>')($rootScope);
+    beforeEach(inject(function(_$compile_, _$rootScope_, uibTimepickerConfig) {
+      angular.extend(originalConfig, uibTimepickerConfig);
+      uibTimepickerConfig.meridians = ['π.μ.', 'μ.μ.'];
+      uibTimepickerConfig.showMeridian = true;
+      element = $compile('<uib-timepicker ng-model="time"></uib-timepicker>')($rootScope);
       $rootScope.$digest();
     }));
-    afterEach(inject(function(timepickerConfig) {
+    afterEach(inject(function(uibTimepickerConfig) {
       // return it to the original state
-      angular.extend(timepickerConfig, originalConfig);
+      angular.extend(uibTimepickerConfig, originalConfig);
     }));
 
     it('displays correctly', function() {
@@ -920,7 +921,7 @@ describe('timepicker directive', function() {
 
     it('handles 12/24H mode change', function() {
       $rootScope.meridian = true;
-      element = $compile('<timepicker ng-model="time" show-meridian="meridian"></timepicker>')($rootScope);
+      element = $compile('<uib-timepicker ng-model="time" show-meridian="meridian"></uib-timepicker>')($rootScope);
       $rootScope.$digest();
 
       var el = getHoursInputEl();
@@ -936,11 +937,26 @@ describe('timepicker directive', function() {
       expect(getModelState()).toEqual([16, 40]);
       expect(element.hasClass('ng-invalid-time')).toBe(false);
     });
+
+    it('should have a default tabindex of 0', function() {
+      element = $compile('<uib-timepicker ng-model="time"></uib-timepicker>')($rootScope);
+      $rootScope.$digest();
+
+      expect(element.isolateScope().tabindex).toBe(0);
+    });
+
+    it('should have the correct tabindex', function() {
+      element = $compile('<uib-timepicker ng-model="time" tabindex="5"></uib-timepicker>')($rootScope);
+      $rootScope.$digest();
+
+      expect(element.attr('tabindex')).toBe(undefined);
+      expect(element.isolateScope().tabindex).toBe('5');
+    });
   });
 
   describe('when model is not a Date', function() {
     beforeEach(inject(function() {
-      element = $compile('<timepicker ng-model="time"></timepicker>')($rootScope);
+      element = $compile('<uib-timepicker ng-model="time"></uib-timepicker>')($rootScope);
     }));
 
     it('should not be invalid when the model is null', function() {
@@ -992,7 +1008,7 @@ describe('timepicker directive', function() {
   describe('use with `ng-required` directive', function() {
     beforeEach(inject(function() {
       $rootScope.time = null;
-      element = $compile('<timepicker ng-model="time" ng-required="true"></timepicker>')($rootScope);
+      element = $compile('<uib-timepicker ng-model="time" ng-required="true"></uib-timepicker>')($rootScope);
       $rootScope.$digest();
     }));
 
@@ -1011,7 +1027,7 @@ describe('timepicker directive', function() {
     beforeEach(inject(function() {
       $rootScope.changeHandler = jasmine.createSpy('changeHandler');
       $rootScope.time = new Date();
-      element = $compile('<timepicker ng-model="time" ng-change="changeHandler()"></timepicker>')($rootScope);
+      element = $compile('<uib-timepicker ng-model="time" ng-change="changeHandler()"></uib-timepicker>')($rootScope);
       $rootScope.$digest();
     }));
 
@@ -1039,7 +1055,7 @@ describe('timepicker directive', function() {
   describe('when used with min', function() {
     var changeInputValueTo;
     beforeEach(inject(function($sniffer) {
-      element = $compile('<timepicker ng-model="time" min="min"></timepicker>')($rootScope);
+      element = $compile('<uib-timepicker ng-model="time" min="min"></uib-timepicker>')($rootScope);
       $rootScope.$digest();
       changeInputValueTo = function(inputEl, value) {
         inputEl.val(value);
@@ -1692,4 +1708,67 @@ describe('timepicker directive', function() {
       expect(element.hasClass('ng-invalid-time')).toBe(false);
     });
   });
+
+  describe('custom template and controllerAs', function() {
+    it('should allow custom templates', function() {
+      $templateCache.put('foo/bar.html', '<div>baz</div>');
+
+      element = $compile('<uib-timepicker ng-model="time" template-url="foo/bar.html"></uib-timepicker>')($rootScope);
+      $rootScope.$digest();
+      expect(element[0].tagName.toLowerCase()).toBe('div');
+      expect(element.html()).toBe('baz');
+    });
+
+    it('should expose the controller on the view', function() {
+      $templateCache.put('template/timepicker/timepicker.html', '<div><div>{{timepicker.text}}</div></div>');
+
+      element = $compile('<uib-timepicker ng-model="time"></uib-timepicker>')($rootScope);
+      $rootScope.$digest();
+
+      var ctrl = element.controller('uibTimepicker');
+      expect(ctrl).toBeDefined();
+
+      ctrl.text = 'foo';
+      $rootScope.$digest();
+
+      expect(element.html()).toBe('<div class="ng-binding">foo</div>');
+    });
+  });
+});
+
+/* Deprecation tests below */
+
+describe('timepicker deprecation', function() {
+  beforeEach(module('ui.bootstrap.timepicker'));
+  beforeEach(module('ngAnimateMock'));
+  beforeEach(module('template/timepicker/timepicker.html'));
+
+  it('should suppress warning', function() {
+    module(function($provide) {
+      $provide.value('$timepickerSuppressWarning', true);
+    });
+
+    inject(function($compile, $log, $rootScope) {
+      spyOn($log, 'warn');
+
+      $rootScope.time = new Date().setHours(14, 40, 0, 0);
+      var element = '<timepicker ng-model="time"></timepicker>';
+      element = $compile(element)($rootScope);
+      $rootScope.$digest();
+      expect($log.warn.calls.count()).toBe(0);
+    });
+  });
+
+  it('should give warning by default', inject(function($compile, $log, $rootScope) {
+    spyOn($log, 'warn');
+
+      $rootScope.time = new Date().setHours(14, 40, 0, 0);
+    var element = '<timepicker ng-model="time"></timepicker>';
+    element = $compile(element)($rootScope);
+    $rootScope.$digest();
+
+    expect($log.warn.calls.count()).toBe(2);
+    expect($log.warn.calls.argsFor(0)).toEqual(['TimepickerController is now deprecated. Use UibTimepickerController instead.']);
+    expect($log.warn.calls.argsFor(1)).toEqual(['timepicker is now deprecated. Use uib-timepicker instead.']);
+  }));
 });
diff --git a/src/timepicker/timepicker.js b/src/timepicker/timepicker.js
index 01502258a7..60e95f3564 100644
--- a/src/timepicker/timepicker.js
+++ b/src/timepicker/timepicker.js
@@ -1,6 +1,6 @@
 angular.module('ui.bootstrap.timepicker', [])
 
-.constant('timepickerConfig', {
+.constant('uibTimepickerConfig', {
   hourStep: 1,
   minuteStep: 1,
   showMeridian: true,
@@ -11,11 +11,14 @@ angular.module('ui.bootstrap.timepicker', [])
   showSpinners: true
 })
 
-.controller('TimepickerController', ['$scope', '$attrs', '$parse', '$log', '$locale', 'timepickerConfig', function($scope, $attrs, $parse, $log, $locale, timepickerConfig) {
+.controller('UibTimepickerController', ['$scope', '$element', '$attrs', '$parse', '$log', '$locale', 'uibTimepickerConfig', function($scope, $element, $attrs, $parse, $log, $locale, timepickerConfig) {
   var selected = new Date(),
       ngModelCtrl = { $setViewValue: angular.noop }, // nullModelCtrl
       meridians = angular.isDefined($attrs.meridians) ? $scope.$parent.$eval($attrs.meridians) : timepickerConfig.meridians || $locale.DATETIME_FORMATS.AMPMS;
 
+  $scope.tabindex = angular.isDefined($attrs.tabindex) ? $attrs.tabindex : 0;
+  $element.removeAttr('tabindex');
+
   this.init = function(ngModelCtrl_, inputs) {
     ngModelCtrl = ngModelCtrl_;
     ngModelCtrl.$render = this.render;
@@ -143,6 +146,9 @@ angular.module('ui.bootstrap.timepicker', [])
   }
 
   function pad(value) {
+    if (value === null) {
+      return '';
+    }
     return (angular.isDefined(value) && value.toString().length < 2) ? '0' + value : value.toString();
   }
 
@@ -220,6 +226,7 @@ angular.module('ui.bootstrap.timepicker', [])
 
       if (angular.isDefined(hours) && angular.isDefined(minutes)) {
         selected.setHours(hours);
+        selected.setMinutes(minutes);
         if (selected < min || selected > max) {
           invalidate(true);
         } else {
@@ -231,7 +238,10 @@ angular.module('ui.bootstrap.timepicker', [])
     };
 
     hoursInputEl.bind('blur', function(e) {
-      if (!$scope.invalidHours && $scope.hours < 10) {
+      ngModelCtrl.$setTouched();
+      if ($scope.hours === null || $scope.hours === '') {
+        invalidate(true);
+      } else if (!$scope.invalidHours && $scope.hours < 10) {
         $scope.$apply(function() {
           $scope.hours = pad($scope.hours);
         });
@@ -243,6 +253,7 @@ angular.module('ui.bootstrap.timepicker', [])
         hours = getHoursFromTemplate();
 
       if (angular.isDefined(minutes) && angular.isDefined(hours)) {
+        selected.setHours(hours);
         selected.setMinutes(minutes);
         if (selected < min || selected > max) {
           invalidate(undefined, true);
@@ -255,7 +266,10 @@ angular.module('ui.bootstrap.timepicker', [])
     };
 
     minutesInputEl.bind('blur', function(e) {
-      if (!$scope.invalidMinutes && $scope.minutes < 10) {
+      ngModelCtrl.$setTouched();
+      if ($scope.minutes === null) {
+        invalidate(undefined, true);
+      } else if (!$scope.invalidMinutes && $scope.minutes < 10) {
         $scope.$apply(function() {
           $scope.minutes = pad($scope.minutes);
         });
@@ -300,17 +314,23 @@ angular.module('ui.bootstrap.timepicker', [])
   }
 
   function updateTemplate(keyboardChange) {
-    var hours = selected.getHours(), minutes = selected.getMinutes();
+    if (ngModelCtrl.$modelValue == null) {
+      $scope.hours = null;
+      $scope.minutes = null;
+      $scope.meridian = meridians[0];
+    } else {
+      var hours = selected.getHours(), minutes = selected.getMinutes();
 
-    if ($scope.showMeridian) {
-      hours = (hours === 0 || hours === 12) ? 12 : hours % 12; // Convert 24 to 12 hour system
-    }
+      if ($scope.showMeridian) {
+        hours = (hours === 0 || hours === 12) ? 12 : hours % 12; // Convert 24 to 12 hour system
+      }
 
-    $scope.hours = keyboardChange === 'h' ? hours : pad(hours);
-    if (keyboardChange !== 'm') {
-      $scope.minutes = pad(minutes);
+      $scope.hours = keyboardChange === 'h' ? hours : pad(hours);
+      if (keyboardChange !== 'm') {
+        $scope.minutes = pad(minutes);
+      }
+      $scope.meridian = selected.getHours() < 12 ? meridians[0] : meridians[1];
     }
-    $scope.meridian = selected.getHours() < 12 ? meridians[0] : meridians[1];
   }
 
   function addMinutes(date, minutes) {
@@ -353,20 +373,30 @@ angular.module('ui.bootstrap.timepicker', [])
   };
 
   $scope.toggleMeridian = function() {
+    var minutes = getMinutesFromTemplate(),
+        hours = getHoursFromTemplate();
+
     if (!$scope.noToggleMeridian()) {
-      addMinutesToSelected(12 * 60 * (selected.getHours() < 12 ? 1 : -1));
+      if (angular.isDefined(minutes) && angular.isDefined(hours)) {
+        addMinutesToSelected(12 * 60 * (selected.getHours() < 12 ? 1 : -1));
+      } else {
+        $scope.meridian = $scope.meridian === meridians[0] ? meridians[1] : meridians[0];
+      }
     }
   };
 }])
 
-.directive('timepicker', function() {
+.directive('uibTimepicker', function() {
   return {
     restrict: 'EA',
-    require: ['timepicker', '?^ngModel'],
-    controller:'TimepickerController',
+    require: ['uibTimepicker', '?^ngModel'],
+    controller: 'UibTimepickerController',
+    controllerAs: 'timepicker',
     replace: true,
     scope: {},
-    templateUrl: 'template/timepicker/timepicker.html',
+    templateUrl: function(element, attrs) {
+      return attrs.templateUrl || 'template/timepicker/timepicker.html';
+    },
     link: function(scope, element, attrs, ctrls) {
       var timepickerCtrl = ctrls[0], ngModelCtrl = ctrls[1];
 
@@ -376,3 +406,45 @@ angular.module('ui.bootstrap.timepicker', [])
     }
   };
 });
+
+/* Deprecated timepicker below */
+
+angular.module('ui.bootstrap.timepicker')
+
+.value('$timepickerSuppressWarning', false)
+
+.controller('TimepickerController', ['$scope', '$element', '$attrs', '$controller', '$log', '$timepickerSuppressWarning', function($scope, $element, $attrs, $controller, $log, $timepickerSuppressWarning) {
+  if (!$timepickerSuppressWarning) {
+    $log.warn('TimepickerController is now deprecated. Use UibTimepickerController instead.');
+  }
+
+  angular.extend(this, $controller('UibTimepickerController', {
+    $scope: $scope,
+    $element: $element,
+    $attrs: $attrs
+  }));
+}])
+
+.directive('timepicker', ['$log', '$timepickerSuppressWarning', function($log, $timepickerSuppressWarning) {
+  return {
+    restrict: 'EA',
+    require: ['timepicker', '?^ngModel'],
+    controller: 'TimepickerController',
+    controllerAs: 'timepicker',
+    replace: true,
+    scope: {},
+    templateUrl: function(element, attrs) {
+      return attrs.templateUrl || 'template/timepicker/timepicker.html';
+    },
+    link: function(scope, element, attrs, ctrls) {
+      if (!$timepickerSuppressWarning) {
+        $log.warn('timepicker is now deprecated. Use uib-timepicker instead.');
+      }
+      var timepickerCtrl = ctrls[0], ngModelCtrl = ctrls[1];
+
+      if (ngModelCtrl) {
+        timepickerCtrl.init(ngModelCtrl, element.find('input'));
+      }
+    }
+  };
+}]);
diff --git a/src/tooltip/docs/demo.html b/src/tooltip/docs/demo.html
index 4bb7f0adf9..795f3657b0 100644
--- a/src/tooltip/docs/demo.html
+++ b/src/tooltip/docs/demo.html
@@ -8,24 +8,26 @@
       <input type="text" ng-model="dynamicTooltip" class="form-control">
     </div>
     <p>
-      Pellentesque <a href="#" tooltip="{{dynamicTooltip}}">{{dynamicTooltipText}}</a>,
+      Pellentesque <a href="#" uib-tooltip="{{dynamicTooltip}}">{{dynamicTooltipText}}</a>,
       sit amet venenatis urna cursus eget nunc scelerisque viverra mauris, in
       aliquam. Tincidunt lobortis feugiat vivamus at
-      <a href="#" tooltip-placement="left" tooltip="On the Left!">left</a> eget
+      <a href="#" tooltip-placement="left" uib-tooltip="On the Left!">left</a> eget
       arcu dictum varius duis at consectetur lorem. Vitae elementum curabitur
-      <a href="#" tooltip-placement="right" tooltip="On the Right!">right</a>
+      <a href="#" tooltip-placement="right" uib-tooltip="On the Right!">right</a>
       nunc sed velit dignissim sodales ut eu sem integer vitae. Turpis egestas
-      <a href="#" tooltip-placement="bottom" tooltip="On the Bottom!">bottom</a>
+      <a href="#" tooltip-placement="bottom" uib-tooltip="On the Bottom!">bottom</a>
       pharetra convallis posuere morbi leo urna,
-      <a href="#" tooltip-animation="false" tooltip="I don't fade. :-(">fading</a>
+      <a href="#" tooltip-animation="false" uib-tooltip="I don't fade. :-(">fading</a>
       at elementum eu, facilisis sed odio morbi quis commodo odio. In cursus
-      <a href="#" tooltip-popup-delay='1000' tooltip='appears with delay'>delayed</a> turpis massa tincidunt dui ut.
-      <a href="#" tooltip-template="'myTooltipTemplate.html'">Custom template</a>
+      <a href="#" tooltip-popup-delay='1000' uib-tooltip='appears with delay'>show delay</a>
+      turpis massa tincidunt dui ut. In cursus
+      <a href="#" tooltip-popup-close-delay='1000' uib-tooltip='hides with delay'>hide delay</a>
+      <a href="#" uib-tooltip-template="'myTooltipTemplate.html'">Custom template</a>
       nunc sed velit dignissim sodales ut eu sem integer vitae. Turpis egestas
     </p>
 
     <p>
-        I can even contain HTML. <a href="#" tooltip-html="htmlTooltip">Check me out!</a>
+        I can even contain HTML. <a href="#" uib-tooltip-html="htmlTooltip">Check me out!</a>
     </p>
 
     <p>
@@ -41,20 +43,20 @@
                 display: none;
             }
         </style>
-        I can have a custom class. <a href="#" tooltip="I can have a custom class applied to me!" tooltip-class="customClass">Check me out!</a>
+        I can have a custom class. <a href="#" uib-tooltip="I can have a custom class applied to me!" tooltip-class="customClass">Check me out!</a>
     </p>
 
     <form role="form">
       <div class="form-group">
         <label>Or use custom triggers, like focus: </label>
-        <input type="text" value="Click me!" tooltip="See? Now click away..."  tooltip-trigger="focus" tooltip-placement="right" class="form-control" />
+        <input type="text" value="Click me!" uib-tooltip="See? Now click away..." tooltip-trigger="focus" tooltip-placement="right" class="form-control" />
       </div>
 
       <div class="form-group" ng-class="{'has-error' : !inputModel}">
         <label>Disable tooltips conditionally:</label>
         <input type="text" ng-model="inputModel" class="form-control"
           placeholder="Hover over this for a tooltip until this is filled"
-          tooltip="Enter something in this input field to disable this tooltip"
+          uib-tooltip="Enter something in this input field to disable this tooltip"
           tooltip-placement="top"
           tooltip-trigger="mouseenter"
           tooltip-enable="!inputModel" />
diff --git a/src/tooltip/docs/readme.md b/src/tooltip/docs/readme.md
index b0ae385518..16d4cdb6c9 100644
--- a/src/tooltip/docs/readme.md
+++ b/src/tooltip/docs/readme.md
@@ -1,16 +1,16 @@
 A lightweight, extensible directive for fancy tooltip creation. The tooltip
 directive supports multiple placements, optional transition animation, and more.
 
-There are three versions of the tooltip: `tooltip`, `tooltip-template`, and
-`tooltip-html-unsafe`:
+There are three versions of the tooltip: `uib-tooltip`, `uib-tooltip-template`, and
+`uib-tooltip-html-unsafe`:
 
-- `tooltip` takes text only and will escape any HTML provided.
-- `tooltip-template` takes text that specifies the location of a template to
+- `uib-tooltip` takes text only and will escape any HTML provided.
+- `uib-tooltip-template` takes text that specifies the location of a template to
   use for the tooltip. Note that this needs to be wrapped in a tag.
-- `tooltip-html` takes
+- `uib-tooltip-html` takes
   whatever HTML is provided and displays it in a tooltip; *The user is responsible for ensuring the
   content is safe to put into the DOM!*
-- `tooltip-html-unsafe` -- deprecated in favour of `tooltip-html`
+- `uib-tooltip-html-unsafe` -- deprecated in favour of `tooltip-html`
 
 The tooltip directives provide several optional attributes to control how they
 will display:
@@ -20,6 +20,8 @@ will display:
 - `tooltip-animation`: Should it fade in and out? Defaults to "true".
 - `tooltip-popup-delay`: For how long should the user have to have the mouse
   over the element before the tooltip shows (in milliseconds)? Defaults to 0.
+- `tooltip-close-popup-delay`: For how long should the tooltip remain open
+  after the close trigger event? Defaults to 0.
 - `tooltip-trigger`: What should trigger a show of the tooltip? Supports a space separated list of event names.
   Note: this attribute is no longer observable. See `tooltip-enable`.
 - `tooltip-enable`: Is it enabled? It will enable or disable the configured
@@ -47,15 +49,15 @@ For any non-supported value, the trigger will be used to both show and hide the
 tooltip. Using the 'none' trigger will disable the internal trigger(s), one can
 then use the `tooltip-is-open` attribute exclusively to show and hide the tooltip.
 
-**$tooltipProvider**
+**$uibTooltipProvider**
 
-Through the `$tooltipProvider`, you can change the way tooltips and popovers
+Through the `$uibTooltipProvider`, you can change the way tooltips and popovers
 behave by default; the attributes above always take precedence. The following
 methods are available:
 
-- `setTriggers( obj )`: Extends the default trigger mappings mentioned above
+- `setTriggers(obj)`: Extends the default trigger mappings mentioned above
   with mappings of your own. E.g. `{ 'openTrigger': 'closeTrigger' }`.
-- `options( obj )`: Provide a set of defaults for certain tooltip and popover
+- `options(obj)`: Provide a set of defaults for certain tooltip and popover
   attributes. Currently supports 'placement', 'animation', 'popupDelay', and
   `appendToBody`. Here are the defaults:
 
@@ -63,6 +65,16 @@ methods are available:
   placement: 'top',
   animation: true,
   popupDelay: 0,
+  popupCloseDelay: 500,
   appendToBody: false
   </pre>
 
+**Known issues**
+
+For Safari 7+ support, if you want to use the **focus** `tooltip-trigger`, you need to use an anchor tag with a tab index. For example:
+
+```
+<a tabindex="0" uib-tooltip="Test" tooltip-trigger="focus" class="btn btn-default">
+  Click Me
+</a>
+```
diff --git a/src/tooltip/test/tooltip-template.spec.js b/src/tooltip/test/tooltip-template.spec.js
index 6071baa17c..ad1c97318f 100644
--- a/src/tooltip/test/tooltip-template.spec.js
+++ b/src/tooltip/test/tooltip-template.spec.js
@@ -17,7 +17,7 @@ describe('tooltip template', function() {
 
   beforeEach(inject(function($rootScope, $compile) {
     elmBody = angular.element(
-      '<div><span tooltip-template="templateUrl">Selector Text</span></div>'
+      '<div><span uib-tooltip-template="templateUrl">Selector Text</span></div>'
     );
 
     scope = $rootScope;
@@ -30,18 +30,25 @@ describe('tooltip template', function() {
     tooltipScope = elmScope.$$childTail;
   }));
 
+  function trigger(element, evt) {
+    evt = new Event(evt);
+
+    element[0].dispatchEvent(evt);
+    element.scope().$$childTail.$digest();
+  }
+
   it('should open on mouseenter', inject(function() {
-    elm.trigger('mouseenter');
-    expect( tooltipScope.isOpen ).toBe( true );
+    trigger(elm, 'mouseenter');
+    expect(tooltipScope.isOpen).toBe(true);
 
-    expect( elmBody.children().length ).toBe( 2 );
+    expect(elmBody.children().length).toBe(2);
   }));
 
   it('should not open on mouseenter if templateUrl is empty', inject(function() {
     scope.templateUrl = null;
     scope.$digest();
 
-    elm.trigger('mouseenter');
+    trigger(elm, 'mouseenter');
     expect(tooltipScope.isOpen).toBe(false);
 
     expect(elmBody.children().length).toBe(1);
@@ -49,10 +56,10 @@ describe('tooltip template', function() {
 
   it('should show updated text', inject(function() {
     scope.myTemplateText = 'some text';
-    scope.$digest();
 
-    elm.trigger('mouseenter');
+    trigger(elm, 'mouseenter');
     expect(tooltipScope.isOpen).toBe(true);
+    scope.$digest();
 
     expect(elmBody.children().eq(1).text().trim()).toBe('some text');
 
@@ -63,7 +70,7 @@ describe('tooltip template', function() {
   }));
 
   it('should hide tooltip when template becomes empty', inject(function($timeout) {
-    elm.trigger('mouseenter');
+    trigger(elm, 'mouseenter');
     expect(tooltipScope.isOpen).toBe(true);
 
     scope.templateUrl = '';
@@ -76,3 +83,64 @@ describe('tooltip template', function() {
   }));
 });
 
+/* Deprecation tests below */
+
+describe('tooltip template deprecation', function() {
+  beforeEach(module('ui.bootstrap.tooltip'));
+  beforeEach(module('template/tooltip/tooltip-template-popup.html'));
+
+  var elm, elmBody, elmScope, tooltipScope;
+
+  function trigger(element, evt) {
+    evt = new Event(evt);
+
+    element[0].dispatchEvent(evt);
+    element.scope().$$childTail.$digest();
+  }
+
+  it('should suppress warning', function() {
+    module(function($provide) {
+      $provide.value('$tooltipSuppressWarning', true);
+    });
+
+    inject(function($compile, $log, $rootScope, $templateCache) {
+      spyOn($log, 'warn');
+      $templateCache.put('myUrl', [200, '<span>{{ myTemplateText }}</span>', {}]);
+      $rootScope.templateUrl = 'myUrl';
+
+      elmBody = angular.element('<div><span tooltip-template="templateUrl">Selector Text</span></div>');
+      $compile(elmBody)($rootScope);
+      $rootScope.$digest();
+      elm = elmBody.find('span');
+      elmScope = elm.scope();
+      tooltipScope = elmScope.$$childTail;
+
+      trigger(elm, 'mouseenter');
+
+      expect($log.warn.calls.count()).toBe(0);
+    });
+  });
+
+  it('should give warning by default', inject(function($compile, $log, $rootScope, $templateCache) {
+    spyOn($log, 'warn');
+    $templateCache.put('myUrl', [200, '<span>{{ myTemplateText }}</span>', {}]);
+    $rootScope.templateUrl = 'myUrl';
+
+    var element = '<div><span tooltip-template="templateUrl">Selector Text</span></div>';
+    element = $compile(element)($rootScope);
+    $rootScope.$digest();
+
+    elmBody = angular.element('<div><span tooltip-template="templateUrl">Selector Text</span></div>');
+    $compile(elmBody)($rootScope);
+    $rootScope.$digest();
+    elm = elmBody.find('span');
+    elmScope = elm.scope();
+    tooltipScope = elmScope.$$childTail;
+
+    trigger(elm, 'mouseenter');
+
+    expect($log.warn.calls.count()).toBe(2);
+    expect($log.warn.calls.argsFor(0)).toEqual(['$tooltip is now deprecated. Use $uibTooltip instead.']);
+    expect($log.warn.calls.argsFor(1)).toEqual(['tooltip-template-popup is now deprecated. Use uib-tooltip-template-popup instead.']);
+  }));
+});
diff --git a/src/tooltip/test/tooltip.spec.js b/src/tooltip/test/tooltip.spec.js
index 2d7e8df96e..30e495ee80 100644
--- a/src/tooltip/test/tooltip.spec.js
+++ b/src/tooltip/test/tooltip.spec.js
@@ -3,7 +3,8 @@ describe('tooltip', function() {
       elmBody,
       scope,
       elmScope,
-      tooltipScope;
+      tooltipScope,
+      $document;
 
   // load the tooltip code
   beforeEach(module('ui.bootstrap.tooltip'));
@@ -11,11 +12,12 @@ describe('tooltip', function() {
   // load the template
   beforeEach(module('template/tooltip/tooltip-popup.html'));
 
-  beforeEach(inject(function($rootScope, $compile) {
+  beforeEach(inject(function($rootScope, $compile, _$document_) {
     elmBody = angular.element(
-      '<div><span tooltip="tooltip text" tooltip-animation="false">Selector Text</span></div>'
+      '<div><span uib-tooltip="tooltip text" tooltip-animation="false">Selector Text</span></div>'
     );
 
+    $document = _$document_;
     scope = $rootScope;
     $compile(elmBody)(scope);
     scope.$digest();
@@ -24,6 +26,13 @@ describe('tooltip', function() {
     tooltipScope = elmScope.$$childTail;
   }));
 
+  function trigger(element, evt) {
+    evt = new Event(evt);
+
+    element[0].dispatchEvent(evt);
+    element.scope().$$childTail.$digest();
+  }
+
   it('should not be open initially', inject(function() {
     expect(tooltipScope.isOpen).toBe(false);
 
@@ -33,7 +42,7 @@ describe('tooltip', function() {
   }));
 
   it('should open on mouseenter', inject(function() {
-    elm.trigger('mouseenter');
+    trigger(elm, 'mouseenter');
     expect(tooltipScope.isOpen).toBe(true);
 
     // We can only test *that* the tooltip-popup element was created as the
@@ -42,8 +51,8 @@ describe('tooltip', function() {
   }));
 
   it('should close on mouseleave', inject(function() {
-    elm.trigger('mouseenter');
-    elm.trigger('mouseleave');
+    trigger(elm, 'mouseenter');
+    trigger(elm, 'mouseleave');
     expect(tooltipScope.isOpen).toBe(false);
   }));
 
@@ -52,32 +61,32 @@ describe('tooltip', function() {
   }));
 
   it('should have default placement of "top"', inject(function() {
-    elm.trigger('mouseenter');
+    trigger(elm, 'mouseenter');
     expect(tooltipScope.placement).toBe('top');
   }));
 
   it('should allow specification of placement', inject(function($compile) {
     elm = $compile(angular.element(
-      '<span tooltip="tooltip text" tooltip-placement="bottom">Selector Text</span>'
+      '<span uib-tooltip="tooltip text" tooltip-placement="bottom">Selector Text</span>'
     ))(scope);
     scope.$apply();
     elmScope = elm.scope();
     tooltipScope = elmScope.$$childTail;
 
-    elm.trigger('mouseenter');
+    trigger(elm, 'mouseenter');
     expect(tooltipScope.placement).toBe('bottom');
   }));
 
   it('should update placement dynamically', inject(function($compile, $timeout) {
     scope.place = 'bottom';
-    elm = $compile( angular.element(
-      '<span tooltip="tooltip text" tooltip-placement="{{place}}">Selector Text</span>'
+    elm = $compile(angular.element(
+      '<span uib-tooltip="tooltip text" tooltip-placement="{{place}}">Selector Text</span>'
     ))(scope);
     scope.$apply();
     elmScope = elm.scope();
     tooltipScope = elmScope.$$childTail;
 
-    elm.trigger('mouseenter');
+    trigger(elm, 'mouseenter');
     expect(tooltipScope.placement).toBe('bottom');
 
     scope.place = 'right';
@@ -90,7 +99,7 @@ describe('tooltip', function() {
     elm = $compile(angular.element(
       '<ul>'+
         '<li ng-repeat="item in items">'+
-          '<span tooltip="{{item.tooltip}}">{{item.name}}</span>'+
+          '<span uib-tooltip="{{item.tooltip}}">{{item.name}}</span>'+
         '</li>'+
       '</ul>'
     ))(scope);
@@ -102,22 +111,22 @@ describe('tooltip', function() {
     scope.$digest();
 
     var tt = angular.element(elm.find('li > span')[0]);
-
-    tt.trigger('mouseenter');
+    trigger(tt, 'mouseenter');
 
     expect(tt.text()).toBe(scope.items[0].name);
 
     tooltipScope = tt.scope().$$childTail;
     expect(tooltipScope.content).toBe(scope.items[0].tooltip);
 
-    tt.trigger('mouseleave');
+    trigger(tt, 'mouseleave');
+    expect(tooltipScope.isOpen).toBeFalsy();
   }));
 
   it('should show correct text when in an ngRepeat', inject(function($compile, $timeout) {
     elm = $compile(angular.element(
       '<ul>'+
         '<li ng-repeat="item in items">'+
-          '<span tooltip="{{item.tooltip}}">{{item.name}}</span>'+
+          '<span uib-tooltip="{{item.tooltip}}">{{item.name}}</span>'+
         '</li>'+
       '</ul>'
     ))(scope);
@@ -132,12 +141,12 @@ describe('tooltip', function() {
     var tt_1 = angular.element(elm.find('li > span')[0]);
     var tt_2 = angular.element(elm.find('li > span')[1]);
 
-    tt_1.trigger('mouseenter');
-    tt_1.trigger('mouseleave');
+    trigger(tt_1, 'mouseenter');
+    trigger(tt_1, 'mouseleave');
 
     $timeout.flush();
 
-    tt_2.trigger('mouseenter');
+    trigger(tt_2, 'mouseenter');
 
     expect(tt_1.text()).toBe(scope.items[0].name);
     expect(tt_2.text()).toBe(scope.items[1].name);
@@ -146,7 +155,7 @@ describe('tooltip', function() {
     expect(tooltipScope.content).toBe(scope.items[1].tooltip);
     expect(elm.find('.tooltip-inner').text()).toBe(scope.items[1].tooltip);
 
-    tt_2.trigger('mouseleave');
+    trigger(tt_2, 'mouseleave');
   }));
 
   it('should only have an isolate scope on the popup', inject(function($compile) {
@@ -155,8 +164,8 @@ describe('tooltip', function() {
     scope.tooltipMsg = 'Tooltip Text';
     scope.alt = 'Alt Message';
 
-    elmBody = $compile( angular.element(
-      '<div><span alt={{alt}} tooltip="{{tooltipMsg}}" tooltip-animation="false">Selector Text</span></div>'
+    elmBody = $compile(angular.element(
+      '<div><span alt={{alt}} uib-tooltip="{{tooltipMsg}}" tooltip-animation="false">Selector Text</span></div>'
     ))(scope);
 
     $compile(elmBody)(scope);
@@ -164,17 +173,17 @@ describe('tooltip', function() {
     elm = elmBody.find('span');
     elmScope = elm.scope();
 
-    elm.trigger('mouseenter');
+    trigger(elm, 'mouseenter');
     expect(elm.attr('alt')).toBe(scope.alt);
 
     ttScope = angular.element(elmBody.children()[1]).isolateScope();
     expect(ttScope.placement).toBe('top');
     expect(ttScope.content).toBe(scope.tooltipMsg);
 
-    elm.trigger('mouseleave');
+    trigger(elm, 'mouseleave');
 
     //Isolate scope contents should be the same after hiding and showing again (issue 1191)
-    elm.trigger('mouseenter');
+    trigger(elm, 'mouseenter');
 
     ttScope = angular.element(elmBody.children()[1]).isolateScope();
     expect(ttScope.placement).toBe('top');
@@ -183,7 +192,7 @@ describe('tooltip', function() {
 
   it('should not show tooltips if there is nothing to show - issue #129', inject(function($compile) {
     elmBody = $compile(angular.element(
-      '<div><span tooltip="">Selector Text</span></div>'
+      '<div><span uib-tooltip="">Selector Text</span></div>'
     ))(scope);
     scope.$digest();
     elmBody.find('span').trigger('mouseenter');
@@ -191,8 +200,8 @@ describe('tooltip', function() {
     expect(elmBody.children().length).toBe(1);
   }));
 
-  it( 'should close the tooltip when its trigger element is destroyed', inject(function() {
-    elm.trigger('mouseenter');
+  it('should close the tooltip when its trigger element is destroyed', inject(function() {
+    trigger(elm, 'mouseenter');
     expect(tooltipScope.isOpen).toBe(true);
 
     elm.remove();
@@ -202,27 +211,27 @@ describe('tooltip', function() {
 
   it('issue 1191 - scope on the popup should always be child of correct element scope', function() {
     var ttScope;
-    elm.trigger('mouseenter');
+    trigger(elm, 'mouseenter');
 
-    ttScope = angular.element( elmBody.children()[1] ).scope();
-    expect(ttScope.$parent).toBe( tooltipScope );
+    ttScope = angular.element(elmBody.children()[1]).scope();
+    expect(ttScope.$parent).toBe(tooltipScope);
 
-    elm.trigger('mouseleave');
+    trigger(elm, 'mouseleave');
 
     // After leaving and coming back, the scope's parent should be the same
-    elm.trigger('mouseenter');
+    trigger(elm, 'mouseenter');
 
     ttScope = angular.element(elmBody.children()[1]).scope();
     expect(ttScope.$parent).toBe(tooltipScope);
 
-    elm.trigger('mouseleave');
+    trigger(elm, 'mouseleave');
   });
 
   describe('with specified enable expression', function() {
     beforeEach(inject(function($compile) {
       scope.enable = false;
       elmBody = $compile(angular.element(
-        '<div><span tooltip="tooltip text" tooltip-enable="enable">Selector Text</span></div>'
+        '<div><span uib-tooltip="tooltip text" tooltip-enable="enable">Selector Text</span></div>'
       ))(scope);
       scope.$digest();
       elm = elmBody.find('span');
@@ -231,7 +240,7 @@ describe('tooltip', function() {
     }));
 
     it('should not open ', inject(function() {
-      elm.trigger('mouseenter');
+      trigger(elm, 'mouseenter');
       expect(tooltipScope.isOpen).toBeFalsy();
       expect(elmBody.children().length).toBe(1);
     }));
@@ -239,49 +248,51 @@ describe('tooltip', function() {
     it('should open', inject(function() {
       scope.enable = true;
       scope.$digest();
-      elm.trigger('mouseenter');
+      trigger(elm, 'mouseenter');
       expect(tooltipScope.isOpen).toBeTruthy();
       expect(elmBody.children().length).toBe(2);
     }));
   });
 
   describe('with specified popup delay', function() {
-    beforeEach(inject(function($compile) {
-      scope.delay='1000';
+    var $timeout;
+    beforeEach(inject(function($compile, _$timeout_) {
+      $timeout = _$timeout_;
+      scope.delay = '1000';
       elm = $compile(angular.element(
-        '<span tooltip="tooltip text" tooltip-popup-delay="{{delay}}" ng-disabled="disabled">Selector Text</span>'
+        '<span uib-tooltip="tooltip text" tooltip-popup-delay="{{delay}}" ng-disabled="disabled">Selector Text</span>'
       ))(scope);
       elmScope = elm.scope();
       tooltipScope = elmScope.$$childTail;
       scope.$digest();
     }));
 
-    it('should open after timeout', inject(function($timeout) {
-      elm.trigger('mouseenter');
+    it('should open after timeout', function() {
+      trigger(elm, 'mouseenter');
       expect(tooltipScope.isOpen).toBe(false);
 
       $timeout.flush();
       expect(tooltipScope.isOpen).toBe(true);
-    }));
+    });
 
-    it('should not open if mouseleave before timeout', inject(function($timeout) {
-      elm.trigger('mouseenter');
+    it('should not open if mouseleave before timeout', function() {
+      trigger(elm, 'mouseenter');
       expect(tooltipScope.isOpen).toBe(false);
 
-      elm.trigger('mouseleave');
+      trigger(elm, 'mouseleave');
       $timeout.flush();
       expect(tooltipScope.isOpen).toBe(false);
-    }));
+    });
 
     it('should use default popup delay if specified delay is not a number', function() {
-      scope.delay='text1000';
+      scope.delay = 'text1000';
       scope.$digest();
-      elm.trigger('mouseenter');
+      trigger(elm, 'mouseenter');
       expect(tooltipScope.isOpen).toBe(true);
     });
 
-    it('should not open if disabled is present', inject(function($timeout) {
-      elm.trigger('mouseenter');
+    it('should not open if disabled is present', function() {
+      trigger(elm, 'mouseenter');
       expect(tooltipScope.isOpen).toBe(false);
 
       $timeout.flush(500);
@@ -289,23 +300,137 @@ describe('tooltip', function() {
       elmScope.disabled = true;
       elmScope.$digest();
 
+      expect(tooltipScope.isOpen).toBe(false);
+    });
+
+    it('should open when not disabled after being disabled - issue #4204', function() {
+      trigger(elm, 'mouseenter');
+      expect(tooltipScope.isOpen).toBe(false);
+
+      $timeout.flush(500);
+      elmScope.disabled = true;
+      elmScope.$digest();
+
+      $timeout.flush(500);
+      expect(tooltipScope.isOpen).toBe(false);
+
+      elmScope.disabled = false;
+      elmScope.$digest();
+
+      trigger(elm, 'mouseenter');
       $timeout.flush();
+
+      expect(tooltipScope.isOpen).toBe(true);
+    });
+
+    it('should close the tooltips in order', inject(function($compile) {
+      var elm2 = $compile('<div><span uib-tooltip="tooltip #2" tooltip-is-open="isOpen2">Selector Text</span></div>')(scope);
+      scope.$digest();
+      elm2 = elm2.find('span');
+      var tooltipScope2 = elm2.scope().$$childTail;
+      tooltipScope2.isOpen = false;
+      scope.$digest();
+
+      trigger(elm, 'mouseenter');
+      tooltipScope2.$digest();
+      $timeout.flush();
+      expect(tooltipScope.isOpen).toBe(true);
+      expect(tooltipScope2.isOpen).toBe(false);
+
+      trigger(elm2, 'mouseenter');
+      tooltipScope2.$digest();
+      $timeout.flush();
+      expect(tooltipScope.isOpen).toBe(true);
+      expect(tooltipScope2.isOpen).toBe(true);
+
+      var evt = $.Event('keypress');
+      evt.which = 27;
+
+      $document.trigger(evt);
+      tooltipScope.$digest();
+      tooltipScope2.$digest();
+
+      expect(tooltipScope.isOpen).toBe(true);
+      expect(tooltipScope2.isOpen).toBe(false);
+
+      var evt2 = $.Event('keypress');
+      evt2.which = 27;
+
+      $document.trigger(evt2);
+      tooltipScope.$digest();
+      tooltipScope2.$digest();
+
       expect(tooltipScope.isOpen).toBe(false);
+      expect(tooltipScope2.isOpen).toBe(false);
     }));
   });
-  
-  describe( 'with an is-open attribute', function() {
+
+  describe('with specified popup close delay', function() {
+    var $timeout;
+    beforeEach(inject(function($compile, _$timeout_) {
+      $timeout = _$timeout_;
+      scope.delay = '1000';
+      elm = $compile(angular.element(
+        '<span uib-tooltip="tooltip text" tooltip-popup-close-delay="{{delay}}" ng-disabled="disabled">Selector Text</span>'
+      ))(scope);
+      elmScope = elm.scope();
+      tooltipScope = elmScope.$$childTail;
+      scope.$digest();
+    }));
+
+    it('should close after timeout', function() {
+      trigger(elm, 'mouseenter');
+      expect(tooltipScope.isOpen).toBe(true);
+      trigger(elm, 'mouseleave');
+      $timeout.flush();
+      expect(tooltipScope.isOpen).toBe(false);
+    });
+
+    it('should use default popup close delay if specified delay is not a number and close immediately', function() {
+      scope.delay = 'text1000';
+      scope.$digest();
+      trigger(elm, 'mouseenter');
+      expect(tooltipScope.popupCloseDelay).toBe(0);
+      expect(tooltipScope.isOpen).toBe(true);
+      trigger(elm, 'mouseleave');
+      $timeout.flush();
+      expect(tooltipScope.isOpen).toBe(false);
+    });
+
+    it('should open when not disabled after being disabled and close after delay - issue #4204', function() {
+      trigger(elm, 'mouseenter');
+      expect(tooltipScope.isOpen).toBe(true);
+
+      elmScope.disabled = true;
+      elmScope.$digest();
+
+      $timeout.flush(500);
+      expect(tooltipScope.isOpen).toBe(false);
+
+      elmScope.disabled = false;
+      elmScope.$digest();
+
+      trigger(elm, 'mouseenter');
+
+      expect(tooltipScope.isOpen).toBe(true);
+      trigger(elm, 'mouseleave');
+      $timeout.flush();
+      expect(tooltipScope.isOpen).toBe(false);
+    });
+  });
+
+  describe('with an is-open attribute', function() {
     beforeEach(inject(function ($compile) {
       scope.isOpen = false;
       elm = $compile(angular.element(
-        '<span tooltip="tooltip text" tooltip-is-open="isOpen" >Selector Text</span>'
+        '<span uib-tooltip="tooltip text" tooltip-is-open="isOpen" >Selector Text</span>'
       ))(scope);
       elmScope = elm.scope();
       tooltipScope = elmScope.$$childTail;
       scope.$digest();
     }));
-    
-    it( 'should show and hide with the controller value', function() {
+
+    it('should show and hide with the controller value', function() {
       expect(tooltipScope.isOpen).toBe(false);
       elmScope.isOpen = true;
       elmScope.$digest();
@@ -314,25 +439,47 @@ describe('tooltip', function() {
       elmScope.$digest();
       expect(tooltipScope.isOpen).toBe(false);
     });
-    
-    it( 'should update the controller value', function() {
-      elm.trigger('mouseenter');
+
+    it('should update the controller value', function() {
+      trigger(elm, 'mouseenter');
       expect(elmScope.isOpen).toBe(true);
-      elm.trigger('mouseleave');
+      trigger(elm, 'mouseleave');
       expect(elmScope.isOpen).toBe(false);
     });
   });
 
-  describe( 'with a trigger attribute', function() {
+  describe('with an is-open attribute expression', function() {
+    beforeEach(inject(function($compile) {
+      scope.isOpen = false;
+      elm = $compile(angular.element(
+        '<span uib-tooltip="tooltip text" tooltip-is-open="isOpen === true" >Selector Text</span>'
+      ))(scope);
+      elmScope = elm.scope();
+      tooltipScope = elmScope.$$childTail;
+      scope.$digest();
+    }));
+
+    it('should show and hide with the expression', function() {
+      expect(tooltipScope.isOpen).toBe(false);
+      elmScope.isOpen = true;
+      elmScope.$digest();
+      expect(tooltipScope.isOpen).toBe(true);
+      elmScope.isOpen = false;
+      elmScope.$digest();
+      expect(tooltipScope.isOpen).toBe(false);
+    });
+  });
+
+  describe('with a trigger attribute', function() {
     var scope, elmBody, elm, elmScope;
 
-    beforeEach( inject( function( $rootScope ) {
+    beforeEach(inject(function($rootScope) {
       scope = $rootScope;
     }));
 
-    it( 'should use it to show but set the hide trigger based on the map for mapped triggers', inject(function($compile) {
+    it('should use it to show but set the hide trigger based on the map for mapped triggers', inject(function($compile) {
       elmBody = angular.element(
-        '<div><input tooltip="Hello!" tooltip-trigger="focus" /></div>'
+        '<div><input uib-tooltip="Hello!" tooltip-trigger="focus" /></div>'
       );
       $compile(elmBody)(scope);
       scope.$apply();
@@ -341,15 +488,15 @@ describe('tooltip', function() {
       tooltipScope = elmScope.$$childTail;
 
       expect(tooltipScope.isOpen).toBeFalsy();
-      elm.trigger('focus');
+      trigger(elm, 'focus');
       expect(tooltipScope.isOpen).toBeTruthy();
-      elm.trigger('blur');
+      trigger(elm, 'blur');
       expect(tooltipScope.isOpen).toBeFalsy();
     }));
 
-    it( 'should use it as both the show and hide triggers for unmapped triggers', inject(function($compile) {
+    it('should use it as both the show and hide triggers for unmapped triggers', inject(function($compile) {
       elmBody = angular.element(
-        '<div><input tooltip="Hello!" tooltip-trigger="fakeTriggerAttr" /></div>'
+        '<div><input uib-tooltip="Hello!" tooltip-trigger="fakeTriggerAttr" /></div>'
       );
       $compile(elmBody)(scope);
       scope.$apply();
@@ -358,9 +505,9 @@ describe('tooltip', function() {
       tooltipScope = elmScope.$$childTail;
 
       expect(tooltipScope.isOpen).toBeFalsy();
-      elm.trigger('fakeTriggerAttr');
+      trigger(elm, 'fakeTriggerAttr');
       expect(tooltipScope.isOpen).toBeTruthy();
-      elm.trigger('fakeTriggerAttr');
+      trigger(elm, 'fakeTriggerAttr');
       expect(tooltipScope.isOpen).toBeFalsy();
     }));
 
@@ -368,8 +515,8 @@ describe('tooltip', function() {
       scope.test = true;
       elmBody = angular.element(
         '<div>' +
-          '<input tooltip="Hello!" tooltip-trigger="{{ (test && \'mouseenter\' || \'click\') }}" />' +
-          '<input tooltip="Hello!" tooltip-trigger="{{ (test && \'mouseenter\' || \'click\') }}" />' +
+          '<input uib-tooltip="Hello!" tooltip-trigger="{{ (test && \'mouseenter\' || \'click\') }}" />' +
+          '<input uib-tooltip="Hello!" tooltip-trigger="{{ (test && \'mouseenter\' || \'click\') }}" />' +
         '</div>'
       );
 
@@ -388,13 +535,13 @@ describe('tooltip', function() {
       expect(tooltipScope2.isOpen).toBeFalsy();
 
       // mouseenter trigger is still set
-      elm2.trigger('mouseenter');
+      trigger(elm2, 'mouseenter');
       expect(tooltipScope2.isOpen).toBeTruthy();
     }));
 
-    it( 'should accept multiple triggers based on the map for mapped triggers', inject(function($compile) {
+    it('should accept multiple triggers based on the map for mapped triggers', inject(function($compile) {
       elmBody = angular.element(
-        '<div><input tooltip="Hello!" tooltip-trigger="focus fakeTriggerAttr" /></div>'
+        '<div><input uib-tooltip="Hello!" tooltip-trigger="focus fakeTriggerAttr" /></div>'
       );
       $compile(elmBody)(scope);
       scope.$apply();
@@ -402,20 +549,20 @@ describe('tooltip', function() {
       elmScope = elm.scope();
       tooltipScope = elmScope.$$childTail;
 
-      expect( tooltipScope.isOpen ).toBeFalsy();
-      elm.trigger('focus');
-      expect( tooltipScope.isOpen ).toBeTruthy();
-      elm.trigger('blur');
-      expect( tooltipScope.isOpen ).toBeFalsy();
-      elm.trigger('fakeTriggerAttr');
-      expect( tooltipScope.isOpen ).toBeTruthy();
-      elm.trigger('fakeTriggerAttr');
-      expect( tooltipScope.isOpen ).toBeFalsy();
+      expect(tooltipScope.isOpen).toBeFalsy();
+      trigger(elm, 'focus');
+      expect(tooltipScope.isOpen).toBeTruthy();
+      trigger(elm, 'blur');
+      expect(tooltipScope.isOpen).toBeFalsy();
+      trigger(elm, 'fakeTriggerAttr');
+      expect(tooltipScope.isOpen).toBeTruthy();
+      trigger(elm, 'fakeTriggerAttr');
+      expect(tooltipScope.isOpen).toBeFalsy();
     }));
-    
-    it( 'should not show when trigger is set to "none"', inject(function($compile) {
+
+    it('should not show when trigger is set to "none"', inject(function($compile) {
       elmBody = angular.element(
-        '<div><input tooltip="Hello!" tooltip-trigger="none" /></div>'
+        '<div><input uib-tooltip="Hello!" tooltip-trigger="none" /></div>'
       );
       $compile(elmBody)(scope);
       scope.$apply();
@@ -442,7 +589,7 @@ describe('tooltip', function() {
     it('should append to the body', inject(function($compile, $document) {
       $body = $document.find('body');
       elmBody = angular.element(
-        '<div><span tooltip="tooltip text" tooltip-append-to-body="true">Selector Text</span></div>'
+        '<div><span uib-tooltip="tooltip text" tooltip-append-to-body="true">Selector Text</span></div>'
       );
 
       $compile(elmBody)(scope);
@@ -452,7 +599,7 @@ describe('tooltip', function() {
       tooltipScope = elmScope.$$childTail;
 
       var bodyLength = $body.children().length;
-      elm.trigger('mouseenter');
+      trigger(elm, 'mouseenter');
 
       expect(tooltipScope.isOpen).toBe(true);
       expect(elmBody.children().length).toBe(1);
@@ -476,14 +623,14 @@ describe('tooltip', function() {
     }
 
     beforeEach(inject(function($compile, $rootScope) {
-      elmBody = angular.element('<div><input tooltip="Hello!" tooltip-trigger="fooTrigger" /></div>');
+      elmBody = angular.element('<div><input uib-tooltip="Hello!" tooltip-trigger="fooTrigger" /></div>');
 
       $compile(elmBody)($rootScope);
       $rootScope.$apply();
 
       elm = elmBody.find('input');
       elmScope = elm.scope();
-      elm.trigger('fooTrigger');
+      trigger(elm, 'fooTrigger');
       tooltipScope = elmScope.$$childTail.$$childTail;
     }));
 
@@ -493,6 +640,46 @@ describe('tooltip', function() {
       expect(inCache()).toBeFalsy();
     }));
   });
+
+  describe('observers', function() {
+    var elmBody, elm, elmScope, scope, tooltipScope;
+
+    beforeEach(inject(function($compile, $rootScope) {
+      scope = $rootScope;
+      scope.content = 'tooltip content';
+      scope.placement = 'top';
+      elmBody = angular.element('<div><input uib-tooltip="{{content}}" tooltip-placement={{placement}} /></div>');
+      $compile(elmBody)(scope);
+      scope.$apply();
+
+      elm = elmBody.find('input');
+      elmScope = elm.scope();
+      tooltipScope = elmScope.$$childTail;
+    }));
+
+    it('should be removed when tooltip hides', inject(function($timeout) {
+      expect(tooltipScope.content).toBe(undefined);
+      expect(tooltipScope.placement).toBe(undefined);
+
+      trigger(elm, 'mouseenter');
+      expect(tooltipScope.content).toBe('tooltip content');
+      expect(tooltipScope.placement).toBe('top');
+      scope.content = 'tooltip content updated';
+
+      scope.placement = 'bottom';
+      scope.$apply();
+      expect(tooltipScope.content).toBe('tooltip content updated');
+      expect(tooltipScope.placement).toBe('bottom');
+
+      trigger(elm, 'mouseleave');
+      $timeout.flush();
+      scope.content = 'tooltip content updated after close';
+      scope.placement = 'left';
+      scope.$apply();
+      expect(tooltipScope.content).toBe('tooltip content updated');
+      expect(tooltipScope.placement).toBe('bottom');
+    }));
+  });
 });
 
 describe('tooltipWithDifferentSymbols', function() {
@@ -505,19 +692,26 @@ describe('tooltipWithDifferentSymbols', function() {
     beforeEach(module('template/tooltip/tooltip-popup.html'));
 
     // configure interpolate provider to use [[ ]] instead of {{ }}
-    beforeEach(module( function($interpolateProvider) {
-        $interpolateProvider.startSymbol('[[');
-        $interpolateProvider.startSymbol(']]');
-      }));
+    beforeEach(module(function($interpolateProvider) {
+      $interpolateProvider.startSymbol('[[');
+      $interpolateProvider.startSymbol(']]');
+    }));
+
+    function trigger(element, evt) {
+      evt = new Event(evt);
+
+      element[0].dispatchEvent(evt);
+      element.scope().$$childTail.$digest();
+    }
 
     it('should show the correct tooltip text', inject(function($compile, $rootScope) {
       elmBody = angular.element(
-        '<div><input type="text" tooltip="My tooltip" tooltip-trigger="focus" tooltip-placement="right" /></div>'
+        '<div><input type="text" uib-tooltip="My tooltip" tooltip-trigger="focus" tooltip-placement="right" /></div>'
       );
       $compile(elmBody)($rootScope);
       $rootScope.$apply();
       var elmInput = elmBody.find('input');
-      elmInput.trigger('focus');
+      trigger(elmInput, 'focus');
 
       expect(elmInput.next().find('div').next().html()).toBe('My tooltip');
     }));
@@ -535,24 +729,31 @@ describe('tooltip positioning', function() {
   // load the template
   beforeEach(module('template/tooltip/tooltip-popup.html'));
 
-  beforeEach(inject(function($rootScope, $compile, _$position_) {
-    $position = _$position_;
+  beforeEach(inject(function($rootScope, $compile, $uibPosition) {
+    $position = $uibPosition;
     spyOn($position, 'positionElements').and.callThrough();
 
     scope = $rootScope;
     scope.text = 'Some Text';
 
-    elmBody = $compile( angular.element(
-      '<div><span tooltip="{{ text }}">Selector Text</span></div>'
-    ))( scope);
+    elmBody = $compile(angular.element(
+      '<div><span uib-tooltip="{{ text }}">Selector Text</span></div>'
+    ))(scope);
     scope.$digest();
     elm = elmBody.find('span');
     elmScope = elm.scope();
     tooltipScope = elmScope.$$childTail;
   }));
 
+  function trigger(element, evt) {
+    evt = new Event(evt);
+
+    element[0].dispatchEvent(evt);
+    element.scope().$$childTail.$digest();
+  }
+
   it('should re-position when value changes', inject(function($timeout) {
-    elm.trigger('mouseenter');
+    trigger(elm, 'mouseenter');
 
     scope.$digest();
     $timeout.flush();
@@ -561,7 +762,7 @@ describe('tooltip positioning', function() {
     scope.text = 'New Text';
     scope.$digest();
     $timeout.flush();
-    expect(elm.attr('tooltip')).toBe( 'New Text' );
+    expect(elm.attr('uib-tooltip')).toBe('New Text');
     expect($position.positionElements.calls.count()).toEqual(startingPositionCalls + 1);
     // Check that positionElements was called with elm
     expect($position.positionElements.calls.argsFor(startingPositionCalls)[0][0])
@@ -593,88 +794,44 @@ describe('tooltipHtml', function() {
     scope.html = 'I say: <strong class="hello">Hello!</strong>';
     scope.safeHtml = $sce.trustAsHtml(scope.html);
 
-    elmBody = $compile( angular.element(
-      '<div><span tooltip-html="safeHtml">Selector Text</span></div>'
-    ))( scope );
+    elmBody = $compile(angular.element(
+      '<div><span uib-tooltip-html="safeHtml">Selector Text</span></div>'
+    ))(scope);
     scope.$digest();
     elm = elmBody.find('span');
     elmScope = elm.scope();
     tooltipScope = elmScope.$$childTail;
   }));
 
+  function trigger(element, evt) {
+    evt = new Event(evt);
+
+    element[0].dispatchEvent(evt);
+    element.scope().$$childTail.$digest();
+  }
+
   it('should render html properly', inject(function() {
-    elm.trigger('mouseenter');
-    expect( elmBody.find('.tooltip-inner').html()).toBe(scope.html);
+    trigger(elm, 'mouseenter');
+    expect(elmBody.find('.tooltip-inner').html()).toBe(scope.html);
   }));
 
   it('should not open if html is empty', function() {
     scope.safeHtml = null;
     scope.$digest();
-    elm.trigger('mouseenter');
+    trigger(elm, 'mouseenter');
     expect(tooltipScope.isOpen).toBe(false);
   });
 
   it('should show on mouseenter and hide on mouseleave', inject(function($sce) {
     expect(tooltipScope.isOpen).toBe(false);
 
-    elm.trigger('mouseenter');
+    trigger(elm, 'mouseenter');
     expect(tooltipScope.isOpen).toBe(true);
     expect(elmBody.children().length).toBe(2);
 
     expect($sce.getTrustedHtml(tooltipScope.contentExp())).toEqual(scope.html);
 
-    elm.trigger('mouseleave');
-    expect(tooltipScope.isOpen).toBe(false);
-    expect(elmBody.children().length).toBe(1);
-  }));
-});
-
-describe('tooltipHtmlUnsafe', function() {
-  var elm, elmBody, elmScope, tooltipScope, scope;
-  var logWarnSpy;
-
-  // load the tooltip code
-  beforeEach(module('ui.bootstrap.tooltip', function($tooltipProvider) {
-    $tooltipProvider.options({ animation: false });
-  }));
-
-  // load the template
-  beforeEach(module('template/tooltip/tooltip-html-unsafe-popup.html'));
-
-  beforeEach(inject(function($rootScope, $compile, $log) {
-    scope = $rootScope;
-    scope.html = 'I say: <strong class="hello">Hello!</strong>';
-
-    logWarnSpy = spyOn($log, 'warn');
-
-    elmBody = $compile( angular.element(
-      '<div><span tooltip-html-unsafe="{{html}}">Selector Text</span></div>'
-    ))(scope);
-    scope.$digest();
-    elm = elmBody.find('span');
-    elmScope = elm.scope();
-    tooltipScope = elmScope.$$childTail;
-  }));
-
-  it('should warn that this is deprecated', function() {
-    expect(logWarnSpy).toHaveBeenCalledWith(jasmine.stringMatching('deprecated'));
-  });
-
-  it('should render html properly', inject(function() {
-    elm.trigger('mouseenter');
-    expect(elmBody.find('.tooltip-inner').html()).toBe(scope.html);
-  }));
-
-  it('should show on mouseenter and hide on mouseleave', inject(function() {
-    expect(tooltipScope.isOpen).toBe(false);
-
-    elm.trigger('mouseenter');
-    expect(tooltipScope.isOpen).toBe(true);
-    expect(elmBody.children().length).toBe(2);
-
-    expect(tooltipScope.content).toEqual(scope.html);
-
-    elm.trigger('mouseleave');
+    trigger(elm, 'mouseleave');
     expect(tooltipScope.isOpen).toBe(false);
     expect(elmBody.children().length).toBe(1);
   }));
@@ -687,6 +844,13 @@ describe('$tooltipProvider', function() {
       elmScope,
       tooltipScope;
 
+  function trigger(element, evt) {
+    evt = new Event(evt);
+
+    element[0].dispatchEvent(evt);
+    element.scope().$$childTail.$digest();
+  }
+
   describe('popupDelay', function() {
     beforeEach(module('ui.bootstrap.tooltip', function($tooltipProvider) {
       $tooltipProvider.options({popupDelay: 1000});
@@ -697,7 +861,7 @@ describe('$tooltipProvider', function() {
 
     beforeEach(inject(function($rootScope, $compile) {
       elmBody = angular.element(
-        '<div><span tooltip="tooltip text">Selector Text</span></div>'
+        '<div><span uib-tooltip="tooltip text">Selector Text</span></div>'
       );
 
       scope = $rootScope;
@@ -709,7 +873,7 @@ describe('$tooltipProvider', function() {
     }));
 
     it('should open after timeout', inject(function($timeout) {
-      elm.trigger('mouseenter');
+      trigger(elm, 'mouseenter');
       expect(tooltipScope.isOpen).toBe(false);
 
       $timeout.flush();
@@ -722,17 +886,17 @@ describe('$tooltipProvider', function() {
 
     beforeEach(module('template/tooltip/tooltip-popup.html'));
     beforeEach(module('ui.bootstrap.tooltip', function($tooltipProvider) {
-        $tooltipProvider.options({ appendToBody: true });
+      $tooltipProvider.options({ appendToBody: true });
     }));
 
     afterEach(function() {
       $body.find('.tooltip').remove();
     });
 
-    it( 'should append to the body', inject(function($rootScope, $compile, $document) {
+    it('should append to the body', inject(function($rootScope, $compile, $document) {
       $body = $document.find('body');
       elmBody = angular.element(
-        '<div><span tooltip="tooltip text">Selector Text</span></div>'
+        '<div><span uib-tooltip="tooltip text">Selector Text</span></div>'
       );
 
       scope = $rootScope;
@@ -743,7 +907,7 @@ describe('$tooltipProvider', function() {
       tooltipScope = elmScope.$$childTail;
 
       var bodyLength = $body.children().length;
-      elm.trigger('mouseenter');
+      trigger(elm, 'mouseenter');
 
       expect(tooltipScope.isOpen).toBe(true);
       expect(elmBody.children().length).toBe(1);
@@ -752,7 +916,7 @@ describe('$tooltipProvider', function() {
 
     it('should close on location change', inject(function($rootScope, $compile) {
       elmBody = angular.element(
-        '<div><span tooltip="tooltip text">Selector Text</span></div>'
+        '<div><span uib-tooltip="tooltip text">Selector Text</span></div>'
       );
 
       scope = $rootScope;
@@ -762,7 +926,7 @@ describe('$tooltipProvider', function() {
       elmScope = elm.scope();
       tooltipScope = elmScope.$$childTail;
 
-      elm.trigger('mouseenter');
+      trigger(elm, 'mouseenter');
       expect(tooltipScope.isOpen).toBe(true);
 
       scope.$broadcast('$locationChangeSuccess');
@@ -771,18 +935,18 @@ describe('$tooltipProvider', function() {
     }));
   });
 
-  describe( 'triggers', function() {
-    describe( 'triggers with a mapped value', function() {
-      beforeEach(module('ui.bootstrap.tooltip', function($tooltipProvider) {
-        $tooltipProvider.options({trigger: 'focus'});
+  describe('triggers', function() {
+    describe('triggers with a mapped value', function() {
+      beforeEach(module('ui.bootstrap.tooltip', function($uibTooltipProvider) {
+        $uibTooltipProvider.options({trigger: 'focus'});
       }));
 
       // load the template
       beforeEach(module('template/tooltip/tooltip-popup.html'));
 
-      it( 'should use the show trigger and the mapped value for the hide trigger', inject(function($rootScope, $compile) {
+      it('should use the show trigger and the mapped value for the hide trigger', inject(function($rootScope, $compile) {
         elmBody = angular.element(
-          '<div><input tooltip="tooltip text" /></div>'
+          '<div><input uib-tooltip="tooltip text" /></div>'
         );
 
         scope = $rootScope;
@@ -793,15 +957,15 @@ describe('$tooltipProvider', function() {
         tooltipScope = elmScope.$$childTail;
 
         expect(tooltipScope.isOpen).toBeFalsy();
-        elm.trigger('focus');
+        trigger(elm, 'focus');
         expect(tooltipScope.isOpen).toBeTruthy();
-        elm.trigger('blur');
+        trigger(elm, 'blur');
         expect(tooltipScope.isOpen).toBeFalsy();
       }));
 
-      it( 'should override the show and hide triggers if there is an attribute', inject(function($rootScope, $compile) {
+      it('should override the show and hide triggers if there is an attribute', inject(function($rootScope, $compile) {
         elmBody = angular.element(
-          '<div><input tooltip="tooltip text" tooltip-trigger="mouseenter"/></div>'
+          '<div><input uib-tooltip="tooltip text" tooltip-trigger="mouseenter"/></div>'
         );
 
         scope = $rootScope;
@@ -812,25 +976,25 @@ describe('$tooltipProvider', function() {
         tooltipScope = elmScope.$$childTail;
 
         expect(tooltipScope.isOpen).toBeFalsy();
-        elm.trigger('mouseenter');
+        trigger(elm, 'mouseenter');
         expect(tooltipScope.isOpen).toBeTruthy();
-        elm.trigger('mouseleave');
+        trigger(elm, 'mouseleave');
         expect(tooltipScope.isOpen).toBeFalsy();
       }));
     });
 
     describe('triggers with a custom mapped value', function() {
-      beforeEach(module('ui.bootstrap.tooltip', function($tooltipProvider) {
-        $tooltipProvider.setTriggers({ 'customOpenTrigger': 'customCloseTrigger' });
-        $tooltipProvider.options({trigger: 'customOpenTrigger'});
+      beforeEach(module('ui.bootstrap.tooltip', function($uibTooltipProvider) {
+        $uibTooltipProvider.setTriggers({ customOpenTrigger: 'foo bar' });
+        $uibTooltipProvider.options({trigger: 'customOpenTrigger'});
       }));
 
       // load the template
       beforeEach(module('template/tooltip/tooltip-popup.html'));
 
-      it( 'should use the show trigger and the mapped value for the hide trigger', inject(function($rootScope, $compile) {
+      it('should use the show trigger and the mapped value for the hide trigger', inject(function($rootScope, $compile) {
         elmBody = angular.element(
-          '<div><input tooltip="tooltip text" /></div>'
+          '<div><input uib-tooltip="tooltip text" /></div>'
         );
 
         scope = $rootScope;
@@ -841,24 +1005,28 @@ describe('$tooltipProvider', function() {
         tooltipScope = elmScope.$$childTail;
 
         expect(tooltipScope.isOpen).toBeFalsy();
-        elm.trigger('customOpenTrigger');
+        trigger(elm, 'customOpenTrigger');
+        expect(tooltipScope.isOpen).toBeTruthy();
+        trigger(elm, 'foo');
+        expect(tooltipScope.isOpen).toBeFalsy();
+        trigger(elm, 'customOpenTrigger');
         expect(tooltipScope.isOpen).toBeTruthy();
-        elm.trigger('customCloseTrigger');
+        trigger(elm, 'bar');
         expect(tooltipScope.isOpen).toBeFalsy();
       }));
     });
 
     describe('triggers without a mapped value', function() {
-      beforeEach(module('ui.bootstrap.tooltip', function($tooltipProvider) {
-        $tooltipProvider.options({trigger: 'fakeTrigger'});
+      beforeEach(module('ui.bootstrap.tooltip', function($uibTooltipProvider) {
+        $uibTooltipProvider.options({trigger: 'fakeTrigger'});
       }));
 
       // load the template
       beforeEach(module('template/tooltip/tooltip-popup.html'));
 
-      it( 'should use the show trigger to hide', inject(function($rootScope, $compile) {
+      it('should use the show trigger to hide', inject(function($rootScope, $compile) {
         elmBody = angular.element(
-          '<div><span tooltip="tooltip text">Selector Text</span></div>'
+          '<div><span uib-tooltip="tooltip text">Selector Text</span></div>'
         );
 
         scope = $rootScope;
@@ -868,11 +1036,11 @@ describe('$tooltipProvider', function() {
         elmScope = elm.scope();
         tooltipScope = elmScope.$$childTail;
 
-        expect( tooltipScope.isOpen ).toBeFalsy();
-        elm.trigger('fakeTrigger');
-        expect( tooltipScope.isOpen ).toBeTruthy();
-        elm.trigger('fakeTrigger');
-        expect( tooltipScope.isOpen ).toBeFalsy();
+        expect(tooltipScope.isOpen).toBeFalsy();
+        trigger(elm, 'fakeTrigger');
+        expect(tooltipScope.isOpen).toBeTruthy();
+        trigger(elm, 'fakeTrigger');
+        expect(tooltipScope.isOpen).toBeFalsy();
       }));
     });
   });
diff --git a/src/tooltip/test/tooltip2.spec.js b/src/tooltip/test/tooltip2.spec.js
index eca3678c74..2ed8e2b1a4 100644
--- a/src/tooltip/test/tooltip2.spec.js
+++ b/src/tooltip/test/tooltip2.spec.js
@@ -5,7 +5,6 @@ describe('tooltip directive', function() {
   beforeEach(module('template/tooltip/tooltip-popup.html'));
   beforeEach(module('template/tooltip/tooltip-template-popup.html'));
   beforeEach(module('template/tooltip/tooltip-html-popup.html'));
-  beforeEach(module('template/tooltip/tooltip-html-unsafe-popup.html'));
   beforeEach(inject(function(_$rootScope_, _$compile_, _$document_, _$timeout_) {
     $rootScope = _$rootScope_;
     $compile = _$compile_;
@@ -39,23 +38,31 @@ describe('tooltip directive', function() {
   });
 
   function compileTooltip(ttipMarkup) {
-    var fragment = $compile('<div>'+ttipMarkup+'</div>')($rootScope);
+    var fragment = $compile('<div>' + ttipMarkup + '</div>')($rootScope);
     $rootScope.$digest();
     return fragment;
   }
 
-  function closeTooltip(hostEl, trigger, shouldNotFlush) {
-    hostEl.trigger(trigger || 'mouseleave');
+  function closeTooltip(hostEl, triggerEvt, shouldNotFlush) {
+    trigger(hostEl, triggerEvt || 'mouseleave');
+    hostEl.scope().$$childTail.$digest();
     if (!shouldNotFlush) {
       $timeout.flush();
     }
   }
 
+  function trigger(element, evt) {
+    evt = new Event(evt);
+
+    element[0].dispatchEvent(evt);
+    element.scope().$$childTail.$digest();
+  }
+
   describe('basic scenarios with default options', function() {
     it('shows default tooltip on mouse enter and closes on mouse leave', function() {
-      var fragment = compileTooltip('<span tooltip="tooltip text">Trigger here</span>');
+      var fragment = compileTooltip('<span uib-tooltip="tooltip text">Trigger here</span>');
 
-      fragment.find('span').trigger('mouseenter');
+      trigger(fragment.find('span'), 'mouseenter');
       expect(fragment).toHaveOpenTooltips();
 
       closeTooltip(fragment.find('span'));
@@ -63,16 +70,16 @@ describe('tooltip directive', function() {
     });
 
     it('should not show a tooltip when its content is empty', function() {
-      var fragment = compileTooltip('<span tooltip=""></span>');
-      fragment.find('span').trigger('mouseenter');
+      var fragment = compileTooltip('<span uib-tooltip=""></span>');
+      trigger(fragment.find('span'), 'mouseenter');
       expect(fragment).not.toHaveOpenTooltips();
     });
 
     it('should not show a tooltip when its content becomes empty', function() {
       $rootScope.content = 'some text';
-      var fragment = compileTooltip('<span tooltip="{{ content }}"></span>');
+      var fragment = compileTooltip('<span uib-tooltip="{{ content }}"></span>');
 
-      fragment.find('span').trigger('mouseenter');
+      trigger(fragment.find('span'), 'mouseenter');
       expect(fragment).toHaveOpenTooltips();
 
       $rootScope.content = '';
@@ -83,22 +90,21 @@ describe('tooltip directive', function() {
 
     it('should update tooltip when its content becomes empty', function() {
       $rootScope.content = 'some text';
-      var fragment = compileTooltip('<span tooltip="{{ content }}"></span>');
+      var fragment = compileTooltip('<span uib-tooltip="{{ content }}"></span>');
 
       $rootScope.content = '';
       $rootScope.$digest();
 
-      fragment.find('span').trigger('mouseenter');
+      trigger(fragment.find('span'), 'mouseenter');
       expect(fragment).not.toHaveOpenTooltips();
     });
   });
 
   describe('option by option', function() {
     var tooltipTypes = {
-      'tooltip': 'tooltip="tooltip text"',
-      'tooltip-html': 'tooltip-html="tooltipSafeHtml"',
-      'tooltip-html-unsafe': 'tooltip-html-unsafe="tooltip text"',
-      'tooltip-template': 'tooltip-template="\'tooltipTextUrl\'"'
+      'tooltip': 'uib-tooltip="tooltip text"',
+      'tooltip-html': 'uib-tooltip-html="tooltipSafeHtml"',
+      'tooltip-template': 'uib-tooltip-template="\'tooltipTextUrl\'"'
     };
 
     beforeEach(inject(function($sce, $templateCache) {
@@ -108,11 +114,11 @@ describe('tooltip directive', function() {
     }));
 
     angular.forEach(tooltipTypes, function(html, key) {
-      describe(key, function () {
+      describe(key, function() {
         describe('placement', function() {
           it('can specify an alternative, valid placement', function() {
             var fragment = compileTooltip('<span ' + html + ' tooltip-placement="left">Trigger here</span>');
-            fragment.find('span').trigger('mouseenter');
+            trigger(fragment.find('span'), 'mouseenter');
 
             var ttipElement = fragment.find('div.tooltip');
             expect(fragment).toHaveOpenTooltips();
@@ -126,7 +132,7 @@ describe('tooltip directive', function() {
         describe('class', function() {
           it('can specify a custom class', function() {
             var fragment = compileTooltip('<span ' + html + ' tooltip-class="custom">Trigger here</span>');
-            fragment.find('span').trigger('mouseenter');
+            trigger(fragment.find('span'), 'mouseenter');
 
             var ttipElement = fragment.find('div.tooltip');
             expect(fragment).toHaveOpenTooltips();
@@ -141,9 +147,9 @@ describe('tooltip directive', function() {
   });
 
   it('should show even after close trigger is called multiple times - issue #1847', function() {
-    var fragment = compileTooltip('<span tooltip="tooltip text">Trigger here</span>');
+    var fragment = compileTooltip('<span uib-tooltip="tooltip text">Trigger here</span>');
 
-    fragment.find('span').trigger('mouseenter');
+    trigger(fragment.find('span'), 'mouseenter');
     expect(fragment).toHaveOpenTooltips();
 
     closeTooltip(fragment.find('span'), null, true);
@@ -153,7 +159,7 @@ describe('tooltip directive', function() {
     closeTooltip(fragment.find('span'), null, true);
     expect(fragment).toHaveOpenTooltips();
 
-    fragment.find('span').trigger('mouseenter');
+    trigger(fragment.find('span'), 'mouseenter');
     expect(fragment).toHaveOpenTooltips();
 
     $timeout.flush();
@@ -161,24 +167,116 @@ describe('tooltip directive', function() {
   });
 
   it('should hide even after show trigger is called multiple times', function() {
-    var fragment = compileTooltip('<span tooltip="tooltip text" tooltip-popup-delay="1000">Trigger here</span>');
+    var fragment = compileTooltip('<span uib-tooltip="tooltip text" tooltip-popup-delay="1000">Trigger here</span>');
 
-    fragment.find('span').trigger('mouseenter');
-    fragment.find('span').trigger('mouseenter');
+    trigger(fragment.find('span'), 'mouseenter');
+    trigger(fragment.find('span'), 'mouseenter');
 
     closeTooltip(fragment.find('span'));
     expect(fragment).not.toHaveOpenTooltips();
   });
 
   it('should not show tooltips element is disabled (button) - issue #3167', function() {
-    var fragment = compileTooltip('<button tooltip="cancel!" ng-disabled="disabled" ng-click="disabled = true">Cancel</button>');
+    var fragment = compileTooltip('<button uib-tooltip="cancel!" ng-disabled="disabled" ng-click="disabled = true">Cancel</button>');
 
-    fragment.find('button').trigger('mouseenter');
+    trigger(fragment.find('button'), 'mouseenter');
     expect(fragment).toHaveOpenTooltips();
 
-    fragment.find('button').trigger('click');
+    trigger(fragment.find('button'), 'click');
     $timeout.flush();
     // One needs to flush deferred functions before checking there is no tooltip.
     expect(fragment).not.toHaveOpenTooltips();
   });
 });
+
+/* Deprecation tests below */
+
+describe('tooltip deprecation', function() {
+  beforeEach(module('ui.bootstrap.tooltip'));
+  beforeEach(module('template/tooltip/tooltip-popup.html'));
+  beforeEach(module('template/tooltip/tooltip-template-popup.html'));
+  beforeEach(module('template/tooltip/tooltip-html-popup.html'));
+
+  describe('tooltip', function() {
+    it('should suppress warning', function() {
+      module(function($provide) {
+        $provide.value('$tooltipSuppressWarning', true);
+      });
+
+      inject(function($compile, $log, $rootScope) {
+        spyOn($log, 'warn');
+
+        var element = '<div><span tooltip="tooltip text">Trigger here</span></div>';
+        element = $compile(element)($rootScope);
+        $rootScope.$digest();
+        expect($log.warn.calls.count()).toBe(0);
+      });
+    });
+
+    it('should give warning by default', inject(function($compile, $log, $rootScope) {
+      spyOn($log, 'warn');
+
+      var element = '<div><span tooltip="tooltip text">Trigger here</span></div>';
+      element = $compile(element)($rootScope);
+      $rootScope.$digest();
+
+      expect($log.warn.calls.count()).toBe(1);
+      expect($log.warn.calls.argsFor(0)).toEqual(['$tooltip is now deprecated. Use $uibTooltip instead.']);
+    }));
+  });
+
+  describe('tooltip html', function() {
+    var elm, elmBody, elmScope, tooltipScope;
+
+    function trigger(element, evt) {
+      evt = new Event(evt);
+
+      element[0].dispatchEvent(evt);
+      element.scope().$$childTail.$digest();
+    }
+
+    it('should suppress warning', function() {
+      module(function($provide) {
+        $provide.value('$tooltipSuppressWarning', true);
+      });
+
+      inject(function($compile, $log, $rootScope, $sce) {
+        spyOn($log, 'warn');
+
+        $rootScope.html = 'I say: <strong class="hello">Hello!</strong>';
+        $rootScope.safeHtml = $sce.trustAsHtml($rootScope.html);
+        elmBody = angular.element('<div><span tooltip-html="safeHtml">Selector Text</span></div>');
+        $compile(elmBody)($rootScope);
+        $rootScope.$digest();
+        elm = elmBody.find('span');
+        elmScope = elm.scope();
+        tooltipScope = elmScope.$$childTail;
+
+        trigger(elm, 'mouseenter');
+        tooltipScope.$digest();
+
+        expect($log.warn.calls.count()).toBe(0);
+      });
+    });
+
+    it('should give warning by default', inject(function($compile, $log, $rootScope, $sce) {
+      spyOn($log, 'warn');
+
+      $rootScope.html = 'I say: <strong class="hello">Hello!</strong>';
+      $rootScope.safeHtml = $sce.trustAsHtml($rootScope.html);
+      elmBody = angular.element('<div><span tooltip-html="safeHtml">Selector Text</span></div>');
+      $compile(elmBody)($rootScope);
+      $rootScope.$digest();
+      elm = elmBody.find('span');
+      elmScope = elm.scope();
+      tooltipScope = elmScope.$$childTail;
+
+      trigger(elm, 'mouseenter');
+      tooltipScope.$digest();
+
+      expect($log.warn.calls.count()).toBe(2);
+      expect($log.warn.calls.argsFor(0)).toEqual(['$tooltip is now deprecated. Use $uibTooltip instead.']);
+      expect($log.warn.calls.argsFor(1)).toEqual(['tooltip-html-popup is now deprecated. Use uib-tooltip-html-popup instead.']);
+    }));
+  });
+});
diff --git a/src/tooltip/tooltip.js b/src/tooltip/tooltip.js
index 8a20c52d02..f2d1dd7297 100644
--- a/src/tooltip/tooltip.js
+++ b/src/tooltip/tooltip.js
@@ -3,18 +3,19 @@
  * function, placement as a function, inside, support for more triggers than
  * just mouse enter/leave, html tooltips, and selector delegation.
  */
-angular.module('ui.bootstrap.tooltip', ['ui.bootstrap.position', 'ui.bootstrap.bindHtml'])
+angular.module('ui.bootstrap.tooltip', ['ui.bootstrap.position', 'ui.bootstrap.stackedMap'])
 
 /**
  * The $tooltip service creates tooltip- and popover-like directives as well as
  * houses global options for them.
  */
-.provider('$tooltip', function() {
+.provider('$uibTooltip', function() {
   // The default options tooltip and popover.
   var defaultOptions = {
     placement: 'top',
     animation: true,
     popupDelay: 0,
+    popupCloseDelay: 0,
     useContentExp: false
   };
 
@@ -66,8 +67,20 @@ angular.module('ui.bootstrap.tooltip', ['ui.bootstrap.position', 'ui.bootstrap.b
    * Returns the actual instance of the $tooltip service.
    * TODO support multiple triggers
    */
-  this.$get = ['$window', '$compile', '$timeout', '$document', '$position', '$interpolate', '$rootScope', '$parse', function($window, $compile, $timeout, $document, $position, $interpolate, $rootScope, $parse) {
-    return function $tooltip(type, prefix, defaultTriggerShow, options) {
+  this.$get = ['$window', '$compile', '$timeout', '$document', '$uibPosition', '$interpolate', '$rootScope', '$parse', '$$stackedMap', function($window, $compile, $timeout, $document, $position, $interpolate, $rootScope, $parse, $$stackedMap) {
+    var openedTooltips = $$stackedMap.createNew();
+    $document.on('keypress', function(e) {
+      if (e.which === 27) {
+        var last = openedTooltips.top();
+        if (last) {
+          last.value.close();
+          openedTooltips.removeTop();
+          last = null;
+        }
+      }
+    });
+
+    return function $tooltip(ttType, prefix, defaultTriggerShow, options) {
       options = angular.extend({}, defaultOptions, globalOptions, options);
 
       /**
@@ -95,54 +108,64 @@ angular.module('ui.bootstrap.tooltip', ['ui.bootstrap.position', 'ui.bootstrap.b
         };
       }
 
-      var directiveName = snake_case(type);
+      var directiveName = snake_case(ttType);
 
       var startSym = $interpolate.startSymbol();
       var endSym = $interpolate.endSymbol();
       var template =
-        '<div '+ directiveName +'-popup '+
-          'title="'+startSym+'title'+endSym+'" '+
+        '<div '+ directiveName + '-popup '+
+          'title="' + startSym + 'title' + endSym + '" '+
           (options.useContentExp ?
             'content-exp="contentExp()" ' :
-            'content="'+startSym+'content'+endSym+'" ') +
-          'placement="'+startSym+'placement'+endSym+'" '+
-          'popup-class="'+startSym+'popupClass'+endSym+'" '+
-          'animation="animation" '+
-          'is-open="isOpen"'+
-          'origin-scope="origScope" '+
-          '>'+
+            'content="' + startSym + 'content' + endSym + '" ') +
+          'placement="' + startSym + 'placement' + endSym + '" '+
+          'popup-class="' + startSym + 'popupClass' + endSym + '" '+
+          'animation="animation" ' +
+          'is-open="isOpen"' +
+          'origin-scope="origScope" ' +
+          'style="visibility: hidden; display: block;"' +
+          '>' +
         '</div>';
 
       return {
-        restrict: 'EA',
         compile: function(tElem, tAttrs) {
-          var tooltipLinker = $compile( template );
+          var tooltipLinker = $compile(template);
 
           return function link(scope, element, attrs, tooltipCtrl) {
             var tooltip;
             var tooltipLinkedScope;
             var transitionTimeout;
-            var popupTimeout;
+            var showTimeout;
+            var hideTimeout;
+            var positionTimeout;
             var appendToBody = angular.isDefined(options.appendToBody) ? options.appendToBody : false;
             var triggers = getTriggers(undefined);
             var hasEnableExp = angular.isDefined(attrs[prefix + 'Enable']);
             var ttScope = scope.$new(true);
             var repositionScheduled = false;
-            var isOpenExp = angular.isDefined(attrs[prefix + 'IsOpen']) ? $parse(attrs[prefix + 'IsOpen']) : false;
+            var isOpenParse = angular.isDefined(attrs[prefix + 'IsOpen']) ? $parse(attrs[prefix + 'IsOpen']) : false;
+            var contentParse = options.useContentExp ? $parse(attrs[ttType]) : false;
+            var observers = [];
 
             var positionTooltip = function() {
-              if (!tooltip) { return; }
-
-              var ttPosition = $position.positionElements(element, tooltip, ttScope.placement, appendToBody);
-              ttPosition.top += 'px';
-              ttPosition.left += 'px';
-
-              // Now set the calculated positioning.
-              tooltip.css(ttPosition);
-            };
-
-            var positionTooltipAsync = function() {
-              $timeout(positionTooltip, 0, false);
+              // check if tooltip exists and is not empty
+              if (!tooltip || !tooltip.html()) { return; }
+
+              if (!positionTimeout) {
+                positionTimeout = $timeout(function() {
+                  // Reset the positioning.
+                  tooltip.css({ top: 0, left: 0 });
+
+                  // Now set the calculated positioning.
+                  var ttCss = $position.positionElements(element, tooltip, ttScope.placement, appendToBody);
+                  ttCss.top += 'px';
+                  ttCss.left += 'px';
+                  ttCss.visibility = 'visible';
+                  tooltip.css(ttCss);
+
+                  positionTimeout = null;
+                }, 0, false);
+              }
             };
 
             // Set up the correct scope to allow transclusion later
@@ -151,6 +174,9 @@ angular.module('ui.bootstrap.tooltip', ['ui.bootstrap.position', 'ui.bootstrap.b
             // By default, the tooltip is not open.
             // TODO add ability to start tooltip opened
             ttScope.isOpen = false;
+            openedTooltips.add(ttScope, {
+              close: hide
+            });
 
             function toggleTooltipBind() {
               if (!ttScope.isOpen) {
@@ -171,89 +197,96 @@ angular.module('ui.bootstrap.tooltip', ['ui.bootstrap.position', 'ui.bootstrap.b
               if (ttScope.popupDelay) {
                 // Do nothing if the tooltip was already scheduled to pop-up.
                 // This happens if show is triggered multiple times before any hide is triggered.
-                if (!popupTimeout) {
-                  popupTimeout = $timeout(show, ttScope.popupDelay, false);
-                  popupTimeout.then(function(reposition) { reposition(); });
+                if (!showTimeout) {
+                  showTimeout = $timeout(show, ttScope.popupDelay, false);
                 }
               } else {
-                show()();
+                show();
               }
             }
 
-            function hideTooltipBind () {
-              hide();
-              if (!$rootScope.$$phase) {
-                $rootScope.$digest();
+            function hideTooltipBind() {
+              if (ttScope.popupCloseDelay) {
+                hideTimeout = $timeout(hide, ttScope.popupCloseDelay, false);
+              } else {
+                hide();
               }
             }
 
             // Show the tooltip popup element.
             function show() {
-              popupTimeout = null;
+              if (showTimeout) {
+                $timeout.cancel(showTimeout);
+                showTimeout = null;
+              }
 
               // If there is a pending remove transition, we must cancel it, lest the
               // tooltip be mysteriously removed.
+              if (hideTimeout) {
+                $timeout.cancel(hideTimeout);
+                hideTimeout = null;
+              }
               if (transitionTimeout) {
                 $timeout.cancel(transitionTimeout);
                 transitionTimeout = null;
               }
 
               // Don't show empty tooltips.
-              if (!(options.useContentExp ? ttScope.contentExp() : ttScope.content)) {
+              if (!ttScope.content) {
                 return angular.noop;
               }
 
               createTooltip();
 
-              // Set the initial positioning.
-              tooltip.css({ top: 0, left: 0, display: 'block' });
-
-              positionTooltip();
-
               // And show the tooltip.
-              ttScope.isOpen = true;
-              if (isOpenExp) {
-                isOpenExp.assign(ttScope.origScope, ttScope.isOpen);
-              }
-              
-              if (!$rootScope.$$phase) {
-                ttScope.$apply(); // digest required as $apply is not called
-              }
-
-              // Return positioning function as promise callback for correct
-              // positioning after draw.
-              return positionTooltip;
+              ttScope.$evalAsync(function() {
+                ttScope.isOpen = true;
+                assignIsOpen(true);
+                positionTooltip();
+              });
             }
 
             // Hide the tooltip popup element.
             function hide() {
-              // First things first: we don't show it anymore.
-              ttScope.isOpen = false;
-              if (isOpenExp) {
-                isOpenExp.assign(ttScope.origScope, ttScope.isOpen);
+              if (!ttScope) {
+                return;
               }
-              
+
               //if tooltip is going to be shown after delay, we must cancel this
-              $timeout.cancel(popupTimeout);
-              popupTimeout = null;
-
-              // And now we remove it from the DOM. However, if we have animation, we
-              // need to wait for it to expire beforehand.
-              // FIXME: this is a placeholder for a port of the transitions library.
-              if (ttScope.animation) {
-                if (!transitionTimeout) {
-                  transitionTimeout = $timeout(removeTooltip, 500);
-                }
-              } else {
-                removeTooltip();
+              if (showTimeout) {
+                $timeout.cancel(showTimeout);
+                showTimeout = null;
               }
+
+              if (positionTimeout) {
+                $timeout.cancel(positionTimeout);
+                positionTimeout = null;
+              }
+
+              // First things first: we don't show it anymore.
+              ttScope.$evalAsync(function() {
+                ttScope.isOpen = false;
+                assignIsOpen(false);
+                // And now we remove it from the DOM. However, if we have animation, we
+                // need to wait for it to expire beforehand.
+                // FIXME: this is a placeholder for a port of the transitions library.
+                // The fade transition in TWBS is 150ms.
+                if (ttScope.animation) {
+                  if (!transitionTimeout) {
+                    transitionTimeout = $timeout(removeTooltip, 150, false);
+                  }
+                } else {
+                  removeTooltip();
+                }
+              });
             }
 
             function createTooltip() {
               // There can only be one tooltip element per directive shown at once.
               if (tooltip) {
-                removeTooltip();
+                return;
               }
+
               tooltipLinkedScope = ttScope.$new();
               tooltip = tooltipLinker(tooltipLinkedScope, function(tooltip) {
                 if (appendToBody) {
@@ -263,29 +296,12 @@ angular.module('ui.bootstrap.tooltip', ['ui.bootstrap.position', 'ui.bootstrap.b
                 }
               });
 
-              if (options.useContentExp) {
-                tooltipLinkedScope.$watch('contentExp()', function(val) {
-                  if (!val && ttScope.isOpen) {
-                    hide();
-                  }
-                });
-                
-                tooltipLinkedScope.$watch(function() {
-                  if (!repositionScheduled) {
-                    repositionScheduled = true;
-                    tooltipLinkedScope.$$postDigest(function() {
-                      repositionScheduled = false;
-                      if (ttScope.isOpen) {
-                        positionTooltipAsync();
-                      }
-                    });
-                  }
-                });
-                
-              }
+              prepObservers();
             }
 
             function removeTooltip() {
+              unregisterObservers();
+
               transitionTimeout = null;
               if (tooltip) {
                 tooltip.remove();
@@ -297,34 +313,45 @@ angular.module('ui.bootstrap.tooltip', ['ui.bootstrap.position', 'ui.bootstrap.b
               }
             }
 
+            /**
+             * Set the inital scope values. Once
+             * the tooltip is created, the observers
+             * will be added to keep things in synch.
+             */
             function prepareTooltip() {
-              prepPopupClass();
-              prepPlacement();
-              prepPopupDelay();
+              ttScope.title = attrs[prefix + 'Title'];
+              if (contentParse) {
+                ttScope.content = contentParse(scope);
+              } else {
+                ttScope.content = attrs[ttType];
+              }
+
+              ttScope.popupClass = attrs[prefix + 'Class'];
+              ttScope.placement = angular.isDefined(attrs[prefix + 'Placement']) ? attrs[prefix + 'Placement'] : options.placement;
+
+              var delay = parseInt(attrs[prefix + 'PopupDelay'], 10);
+              var closeDelay = parseInt(attrs[prefix + 'PopupCloseDelay'], 10);
+              ttScope.popupDelay = !isNaN(delay) ? delay : options.popupDelay;
+              ttScope.popupCloseDelay = !isNaN(closeDelay) ? closeDelay : options.popupCloseDelay;
+            }
+
+            function assignIsOpen(isOpen) {
+              if (isOpenParse && angular.isFunction(isOpenParse.assign)) {
+                isOpenParse.assign(scope, isOpen);
+              }
             }
 
             ttScope.contentExp = function() {
-              return scope.$eval(attrs[type]);
+              return ttScope.content;
             };
 
             /**
              * Observe the relevant attributes.
              */
-            if (!options.useContentExp) {
-              attrs.$observe(type, function(val) {
-                ttScope.content = val;
-
-                if (!val && ttScope.isOpen) {
-                  hide();
-                } else {
-                  positionTooltipAsync();
-                }
-              });
-            }
-
             attrs.$observe('disabled', function(val) {
-              if (popupTimeout && val) {
-                $timeout.cancel(popupTimeout);
+              if (showTimeout && val) {
+                $timeout.cancel(showTimeout);
+                showTimeout = null;
               }
 
               if (val && ttScope.isOpen) {
@@ -332,41 +359,81 @@ angular.module('ui.bootstrap.tooltip', ['ui.bootstrap.position', 'ui.bootstrap.b
               }
             });
 
-            attrs.$observe(prefix + 'Title', function(val) {
-              ttScope.title = val;
-              positionTooltipAsync();
-            });
-
-            attrs.$observe( prefix + 'Placement', function() {
-              if (ttScope.isOpen) {
-                $timeout(function() {
-                  prepPlacement();
-                  show()();
-                }, 0, false);
-              }
-            });
-            
-            if (isOpenExp) {
-              scope.$watch(isOpenExp, function(val) {
-                if (val !== ttScope.isOpen) {
+            if (isOpenParse) {
+              scope.$watch(isOpenParse, function(val) {
+                /*jshint -W018 */
+                if (!val === ttScope.isOpen) {
                   toggleTooltipBind();
                 }
+                /*jshint +W018 */
               });
             }
 
-            function prepPopupClass() {
-              ttScope.popupClass = attrs[prefix + 'Class'];
-            }
+            function prepObservers() {
+              observers.length = 0;
+
+              if (contentParse) {
+                observers.push(
+                  scope.$watch(contentParse, function(val) {
+                    ttScope.content = val;
+                    if (!val && ttScope.isOpen) {
+                      hide();
+                    }
+                  })
+                );
+
+                observers.push(
+                  tooltipLinkedScope.$watch(function() {
+                    if (!repositionScheduled) {
+                      repositionScheduled = true;
+                      tooltipLinkedScope.$$postDigest(function() {
+                        repositionScheduled = false;
+                        if (ttScope && ttScope.isOpen) {
+                          positionTooltip();
+                        }
+                      });
+                    }
+                  })
+                );
+              } else {
+                observers.push(
+                  attrs.$observe(ttType, function(val) {
+                    ttScope.content = val;
+                    if (!val && ttScope.isOpen) {
+                      hide();
+                    } else {
+                      positionTooltip();
+                    }
+                  })
+                );
+              }
 
-            function prepPlacement() {
-              var val = attrs[prefix + 'Placement'];
-              ttScope.placement = angular.isDefined(val) ? val : options.placement;
+              observers.push(
+                attrs.$observe(prefix + 'Title', function(val) {
+                  ttScope.title = val;
+                  if (ttScope.isOpen) {
+                    positionTooltip();
+                  }
+                })
+              );
+
+              observers.push(
+                attrs.$observe(prefix + 'Placement', function(val) {
+                  ttScope.placement = val ? val : options.placement;
+                  if (ttScope.isOpen) {
+                    positionTooltip();
+                  }
+                })
+              );
             }
 
-            function prepPopupDelay() {
-              var val = attrs[prefix + 'PopupDelay'];
-              var delay = parseInt(val, 10);
-              ttScope.popupDelay = !isNaN(delay) ? delay : options.popupDelay;
+            function unregisterObservers() {
+              if (observers.length) {
+                angular.forEach(observers, function(observer) {
+                  observer();
+                });
+                observers.length = 0;
+              }
             }
 
             var unregisterTriggers = function() {
@@ -374,7 +441,9 @@ angular.module('ui.bootstrap.tooltip', ['ui.bootstrap.position', 'ui.bootstrap.b
                 element.unbind(trigger, showTooltipBind);
               });
               triggers.hide.forEach(function(trigger) {
-                element.unbind(trigger, hideTooltipBind);
+                trigger.split(' ').forEach(function(hideTrigger) {
+                  element[0].removeEventListener(hideTrigger, hideTooltipBind);
+                });
               });
             };
 
@@ -386,15 +455,25 @@ angular.module('ui.bootstrap.tooltip', ['ui.bootstrap.position', 'ui.bootstrap.b
 
               if (triggers.show !== 'none') {
                 triggers.show.forEach(function(trigger, idx) {
+                  // Using raw addEventListener due to jqLite/jQuery bug - #4060
                   if (trigger === triggers.hide[idx]) {
-                    element.bind(trigger, toggleTooltipBind);
+                    element[0].addEventListener(trigger, toggleTooltipBind);
                   } else if (trigger) {
-                    element.bind(trigger, showTooltipBind);
-                    element.bind(triggers.hide[idx], hideTooltipBind);
+                    element[0].addEventListener(trigger, showTooltipBind);
+                    triggers.hide[idx].split(' ').forEach(function(trigger) {
+                      element[0].addEventListener(trigger, hideTooltipBind);
+                    });
                   }
+
+                  element.on('keypress', function(e) {
+                    if (e.which === 27) {
+                      hideTooltipBind();
+                    }
+                  });
                 });
               }
             }
+
             prepTriggers();
 
             var animation = scope.$eval(attrs[prefix + 'Animation']);
@@ -416,10 +495,13 @@ angular.module('ui.bootstrap.tooltip', ['ui.bootstrap.position', 'ui.bootstrap.b
 
             // Make sure tooltip is destroyed and removed.
             scope.$on('$destroy', function onDestroyTooltip() {
-              $timeout.cancel( transitionTimeout );
-              $timeout.cancel( popupTimeout );
+              $timeout.cancel(transitionTimeout);
+              $timeout.cancel(showTimeout);
+              $timeout.cancel(hideTimeout);
+              $timeout.cancel(positionTimeout);
               unregisterTriggers();
               removeTooltip();
+              openedTooltips.remove(ttScope);
               ttScope = null;
             });
           };
@@ -430,7 +512,7 @@ angular.module('ui.bootstrap.tooltip', ['ui.bootstrap.position', 'ui.bootstrap.b
 })
 
 // This is mostly ngInclude code but with a custom scope
-.directive('tooltipTemplateTransclude', [
+.directive('uibTooltipTemplateTransclude', [
          '$animate', '$sce', '$compile', '$templateRequest',
 function ($animate ,  $sce ,  $compile ,  $templateRequest) {
   return {
@@ -447,10 +529,12 @@ function ($animate ,  $sce ,  $compile ,  $templateRequest) {
           previousElement.remove();
           previousElement = null;
         }
+
         if (currentScope) {
           currentScope.$destroy();
           currentScope = null;
         }
+
         if (currentElement) {
           $animate.leave(currentElement).then(function() {
             previousElement = null;
@@ -460,7 +544,7 @@ function ($animate ,  $sce ,  $compile ,  $templateRequest) {
         }
       };
 
-      scope.$watch($sce.parseAsResourceUrl(attrs.tooltipTemplateTransclude), function(src) {
+      scope.$watch($sce.parseAsResourceUrl(attrs.uibTooltipTemplateTransclude), function(src) {
         var thisChangeId = ++changeCounter;
 
         if (src) {
@@ -502,16 +586,18 @@ function ($animate ,  $sce ,  $compile ,  $templateRequest) {
  * They must not be animated as they're expected to be present on the tooltip on
  * initialization.
  */
-.directive('tooltipClasses', function() {
+.directive('uibTooltipClasses', function() {
   return {
     restrict: 'A',
     link: function(scope, element, attrs) {
       if (scope.placement) {
         element.addClass(scope.placement);
       }
+
       if (scope.popupClass) {
         element.addClass(scope.popupClass);
       }
+
       if (scope.animation()) {
         element.addClass(attrs.tooltipAnimationClass);
       }
@@ -519,68 +605,225 @@ function ($animate ,  $sce ,  $compile ,  $templateRequest) {
   };
 })
 
-.directive('tooltipPopup', function() {
+.directive('uibTooltipPopup', function() {
   return {
-    restrict: 'EA',
     replace: true,
     scope: { content: '@', placement: '@', popupClass: '@', animation: '&', isOpen: '&' },
-    templateUrl: 'template/tooltip/tooltip-popup.html'
+    templateUrl: 'template/tooltip/tooltip-popup.html',
+    link: function(scope, element) {
+      element.addClass('tooltip');
+    }
   };
 })
 
-.directive('tooltip', [ '$tooltip', function($tooltip) {
-  return $tooltip('tooltip', 'tooltip', 'mouseenter');
+.directive('uibTooltip', [ '$uibTooltip', function($uibTooltip) {
+  return $uibTooltip('uibTooltip', 'tooltip', 'mouseenter');
 }])
 
-.directive('tooltipTemplatePopup', function() {
+.directive('uibTooltipTemplatePopup', function() {
   return {
-    restrict: 'EA',
     replace: true,
     scope: { contentExp: '&', placement: '@', popupClass: '@', animation: '&', isOpen: '&',
       originScope: '&' },
-    templateUrl: 'template/tooltip/tooltip-template-popup.html'
+    templateUrl: 'template/tooltip/tooltip-template-popup.html',
+    link: function(scope, element) {
+      element.addClass('tooltip');
+    }
   };
 })
 
-.directive('tooltipTemplate', ['$tooltip', function($tooltip) {
-  return $tooltip('tooltipTemplate', 'tooltip', 'mouseenter', {
+.directive('uibTooltipTemplate', ['$uibTooltip', function($uibTooltip) {
+  return $uibTooltip('uibTooltipTemplate', 'tooltip', 'mouseenter', {
     useContentExp: true
   });
 }])
 
-.directive('tooltipHtmlPopup', function() {
+.directive('uibTooltipHtmlPopup', function() {
   return {
-    restrict: 'EA',
     replace: true,
     scope: { contentExp: '&', placement: '@', popupClass: '@', animation: '&', isOpen: '&' },
-    templateUrl: 'template/tooltip/tooltip-html-popup.html'
+    templateUrl: 'template/tooltip/tooltip-html-popup.html',
+    link: function(scope, element) {
+      element.addClass('tooltip');
+    }
   };
 })
 
-.directive('tooltipHtml', ['$tooltip', function($tooltip) {
-  return $tooltip('tooltipHtml', 'tooltip', 'mouseenter', {
+.directive('uibTooltipHtml', ['$uibTooltip', function($uibTooltip) {
+  return $uibTooltip('uibTooltipHtml', 'tooltip', 'mouseenter', {
     useContentExp: true
   });
+}]);
+
+/* Deprecated tooltip below */
+
+angular.module('ui.bootstrap.tooltip')
+
+.value('$tooltipSuppressWarning', false)
+
+.provider('$tooltip', ['$uibTooltipProvider', function($uibTooltipProvider) {
+  angular.extend(this, $uibTooltipProvider);
+
+  this.$get = ['$log', '$tooltipSuppressWarning', '$injector', function($log, $tooltipSuppressWarning, $injector) {
+    if (!$tooltipSuppressWarning) {
+      $log.warn('$tooltip is now deprecated. Use $uibTooltip instead.');
+    }
+
+    return $injector.invoke($uibTooltipProvider.$get);
+  }];
+}])
+
+// This is mostly ngInclude code but with a custom scope
+.directive('tooltipTemplateTransclude', [
+         '$animate', '$sce', '$compile', '$templateRequest', '$log', '$tooltipSuppressWarning',
+function ($animate ,  $sce ,  $compile ,  $templateRequest,   $log,   $tooltipSuppressWarning) {
+  return {
+    link: function(scope, elem, attrs) {
+      if (!$tooltipSuppressWarning) {
+        $log.warn('tooltip-template-transclude is now deprecated. Use uib-tooltip-template-transclude instead.');
+      }
+
+      var origScope = scope.$eval(attrs.tooltipTemplateTranscludeScope);
+
+      var changeCounter = 0,
+        currentScope,
+        previousElement,
+        currentElement;
+
+      var cleanupLastIncludeContent = function() {
+        if (previousElement) {
+          previousElement.remove();
+          previousElement = null;
+        }
+        if (currentScope) {
+          currentScope.$destroy();
+          currentScope = null;
+        }
+        if (currentElement) {
+          $animate.leave(currentElement).then(function() {
+            previousElement = null;
+          });
+          previousElement = currentElement;
+          currentElement = null;
+        }
+      };
+
+      scope.$watch($sce.parseAsResourceUrl(attrs.tooltipTemplateTransclude), function(src) {
+        var thisChangeId = ++changeCounter;
+
+        if (src) {
+          //set the 2nd param to true to ignore the template request error so that the inner
+          //contents and scope can be cleaned up.
+          $templateRequest(src, true).then(function(response) {
+            if (thisChangeId !== changeCounter) { return; }
+            var newScope = origScope.$new();
+            var template = response;
+
+            var clone = $compile(template)(newScope, function(clone) {
+              cleanupLastIncludeContent();
+              $animate.enter(clone, elem);
+            });
+
+            currentScope = newScope;
+            currentElement = clone;
+
+            currentScope.$emit('$includeContentLoaded', src);
+          }, function() {
+            if (thisChangeId === changeCounter) {
+              cleanupLastIncludeContent();
+              scope.$emit('$includeContentError', src);
+            }
+          });
+          scope.$emit('$includeContentRequested', src);
+        } else {
+          cleanupLastIncludeContent();
+        }
+      });
+
+      scope.$on('$destroy', cleanupLastIncludeContent);
+    }
+  };
 }])
 
-/*
-Deprecated
-*/
-.directive('tooltipHtmlUnsafePopup', function() {
+.directive('tooltipClasses', ['$log', '$tooltipSuppressWarning', function($log, $tooltipSuppressWarning) {
+  return {
+    restrict: 'A',
+    link: function(scope, element, attrs) {
+      if (!$tooltipSuppressWarning) {
+        $log.warn('tooltip-classes is now deprecated. Use uib-tooltip-classes instead.');
+      }
+
+      if (scope.placement) {
+        element.addClass(scope.placement);
+      }
+      if (scope.popupClass) {
+        element.addClass(scope.popupClass);
+      }
+      if (scope.animation()) {
+        element.addClass(attrs.tooltipAnimationClass);
+      }
+    }
+  };
+}])
+
+.directive('tooltipPopup', ['$log', '$tooltipSuppressWarning', function($log, $tooltipSuppressWarning) {
   return {
-    restrict: 'EA',
     replace: true,
     scope: { content: '@', placement: '@', popupClass: '@', animation: '&', isOpen: '&' },
-    templateUrl: 'template/tooltip/tooltip-html-unsafe-popup.html'
+    templateUrl: 'template/tooltip/tooltip-popup.html',
+    link: function(scope, element) {
+      if (!$tooltipSuppressWarning) {
+        $log.warn('tooltip-popup is now deprecated. Use uib-tooltip-popup instead.');
+      }
+
+      element.addClass('tooltip');
+    }
   };
-})
+}])
 
-.value('tooltipHtmlUnsafeSuppressDeprecated', false)
-.directive('tooltipHtmlUnsafe', [
-          '$tooltip', 'tooltipHtmlUnsafeSuppressDeprecated', '$log',
-function($tooltip ,  tooltipHtmlUnsafeSuppressDeprecated ,  $log) {
-  if (!tooltipHtmlUnsafeSuppressDeprecated) {
-    $log.warn('tooltip-html-unsafe is now deprecated. Use tooltip-html or tooltip-template instead.');
-  }
-  return $tooltip('tooltipHtmlUnsafe', 'tooltip', 'mouseenter');
+.directive('tooltip', ['$tooltip', function($tooltip) {
+  return $tooltip('tooltip', 'tooltip', 'mouseenter');
+}])
+
+.directive('tooltipTemplatePopup', ['$log', '$tooltipSuppressWarning', function($log, $tooltipSuppressWarning) {
+  return {
+    replace: true,
+    scope: { contentExp: '&', placement: '@', popupClass: '@', animation: '&', isOpen: '&',
+      originScope: '&' },
+    templateUrl: 'template/tooltip/tooltip-template-popup.html',
+    link: function(scope, element) {
+      if (!$tooltipSuppressWarning) {
+        $log.warn('tooltip-template-popup is now deprecated. Use uib-tooltip-template-popup instead.');
+      }
+
+      element.addClass('tooltip');
+    }
+  };
+}])
+
+.directive('tooltipTemplate', ['$tooltip', function($tooltip) {
+  return $tooltip('tooltipTemplate', 'tooltip', 'mouseenter', {
+    useContentExp: true
+  });
+}])
+
+.directive('tooltipHtmlPopup', ['$log', '$tooltipSuppressWarning', function($log, $tooltipSuppressWarning) {
+  return {
+    replace: true,
+    scope: { contentExp: '&', placement: '@', popupClass: '@', animation: '&', isOpen: '&' },
+    templateUrl: 'template/tooltip/tooltip-html-popup.html',
+    link: function(scope, element) {
+      if (!$tooltipSuppressWarning) {
+        $log.warn('tooltip-html-popup is now deprecated. Use uib-tooltip-html-popup instead.');
+      }
+
+      element.addClass('tooltip');
+    }
+  };
+}])
+
+.directive('tooltipHtml', ['$tooltip', function($tooltip) {
+  return $tooltip('tooltipHtml', 'tooltip', 'mouseenter', {
+    useContentExp: true
+  });
 }]);
diff --git a/src/transition/test/transition.spec.js b/src/transition/test/transition.spec.js
deleted file mode 100644
index aafe1bfb2a..0000000000
--- a/src/transition/test/transition.spec.js
+++ /dev/null
@@ -1,147 +0,0 @@
-
-describe('$transition', function() {
-
-  // Work out if we are running IE
-  var ie = (function(){
-      var v = 3,
-          div = document.createElement('div'),
-          all = div.getElementsByTagName('i');
-      do {
-        div.innerHTML = '<!--[if gt IE ' + (++v) + ']><i></i><![endif]-->';
-      } while(all[0]);
-      return v > 4 ? v : undefined;
-  }());
-
-  var $transition, $timeout;
-
-  beforeEach(module('ui.bootstrap.transition'));
-
-  beforeEach(inject(function(_$transition_, _$timeout_) {
-    $transition = _$transition_;
-    $timeout = _$timeout_;
-  }));
-
-  it('returns our custom promise', function() {
-    var element = angular.element('<div></div>');
-    var promise = $transition(element, '');
-    expect(promise.then).toEqual(jasmine.any(Function));
-    expect(promise.cancel).toEqual(jasmine.any(Function));
-  });
-
-  it('changes the css if passed a string', function() {
-    var element = angular.element('<div></div>');
-    spyOn(element, 'addClass');
-    $transition(element, 'triggerClass');
-    $timeout.flush();
-
-    expect(element.addClass).toHaveBeenCalledWith('triggerClass');
-  });
-
-  it('changes the style if passed an object', function() {
-    var element = angular.element('<div></div>');
-    var triggerStyle = { height: '11px' };
-    spyOn(element, 'css');
-    $transition(element, triggerStyle);
-    $timeout.flush();
-    expect(element.css).toHaveBeenCalledWith(triggerStyle);
-  });
-
-  it('calls the function if passed', function() {
-    var element = angular.element('<div></div>');
-    var triggerFunction = jasmine.createSpy('triggerFunction');
-    $transition(element, triggerFunction);
-    $timeout.flush();
-    expect(triggerFunction).toHaveBeenCalledWith(element);
-  });
-
-  // Versions of Internet Explorer before version 10 do not have CSS transitions
-  if ( !ie  || ie > 9 ) {
-    describe('transitionEnd event', function() {
-      var element, triggerTransitionEnd;
-
-      beforeEach(function() {
-        element = angular.element('<div></div>');
-        // Mock up the element.bind method
-        spyOn(element, 'bind').and.callFake(function(element, handler) {
-          // Store the handler to be used to simulate the end of the transition later
-          triggerTransitionEnd = handler;
-        });
-        // Mock up the element.unbind method
-        spyOn(element, 'unbind');
-      });
-
-      describe('transitionEndEventName', function() {
-        it('should be a string ending with transitionend', function() {
-          expect($transition.transitionEndEventName).toMatch(/transitionend$/i);
-        });
-      });
-
-      describe('animationEndEventName', function() {
-        it('should be a string ending with animationend', function() {
-          expect($transition.animationEndEventName).toMatch(/animationend$/i);
-        });
-      });
-
-      it('binds a transitionEnd handler to the element', function() {
-        $transition(element, '');
-        expect(element.bind).toHaveBeenCalledWith($transition.transitionEndEventName, jasmine.any(Function));
-      });
-
-      it('binds an animationEnd handler to the element if option is given', function() {
-        $transition(element, '', {animation: true});
-        expect(element.bind).toHaveBeenCalledWith($transition.animationEndEventName, jasmine.any(Function));
-      });
-
-      it('resolves the promise when the transitionEnd is triggered', function() {
-        var resolutionHandler = jasmine.createSpy('resolutionHandler');
-
-        // Run the transition
-        $transition(element, '').then(resolutionHandler);
-
-        // Simulate the end of transition event
-        triggerTransitionEnd();
-        $timeout.flush();
-
-        expect(resolutionHandler).toHaveBeenCalledWith(element);
-      });
-
-      it('rejects the promise if transition is cancelled', function() {
-        var rejectionHandler = jasmine.createSpy('rejectionHandler');
-
-        var promise = $transition(element, '');
-        promise.then(null, rejectionHandler);
-
-        promise.cancel();
-        inject(function($rootScope) {
-          $rootScope.$digest();
-        });
-        expect(rejectionHandler).toHaveBeenCalledWith(jasmine.any(String));
-        expect(element.unbind).toHaveBeenCalledWith($transition.transitionEndEventName, jasmine.any(Function));
-      });
-    });
-  } else {
-
-    describe('transitionEndEventName', function() {
-      it('should be undefined', function() {
-        expect($transition.transitionEndEventName).not.toBeDefined();
-      });
-    });
-
-    it('does not bind a transitionEnd handler to the element', function() {
-      var element = angular.element('<div></div>');
-      spyOn(element, 'bind');
-      $transition(element, '');
-      expect(element.bind).not.toHaveBeenCalledWith($transition.transitionEndEventName, jasmine.any(Function));
-    });
-
-    it('resolves the promise', function() {
-      var element = angular.element('<div></div>');
-      var transitionEndHandler = jasmine.createSpy('transitionEndHandler');
-      $transition(element, '').then(transitionEndHandler);
-      $timeout.flush();
-      expect(transitionEndHandler).toHaveBeenCalledWith(element);
-    });
-
-  }
-});
-
diff --git a/src/transition/transition.js b/src/transition/transition.js
deleted file mode 100644
index 490cdf7bee..0000000000
--- a/src/transition/transition.js
+++ /dev/null
@@ -1,89 +0,0 @@
-angular.module('ui.bootstrap.transition', [])
-
-.value('$transitionSuppressDeprecated', false)
-/**
- * $transition service provides a consistent interface to trigger CSS 3 transitions and to be informed when they complete.
- * @param  {DOMElement} element  The DOMElement that will be animated.
- * @param  {string|object|function} trigger  The thing that will cause the transition to start:
- *   - As a string, it represents the css class to be added to the element.
- *   - As an object, it represents a hash of style attributes to be applied to the element.
- *   - As a function, it represents a function to be called that will cause the transition to occur.
- * @return {Promise}  A promise that is resolved when the transition finishes.
- */
-.factory('$transition', [
-        '$q', '$timeout', '$rootScope', '$log', '$transitionSuppressDeprecated',
-function($q ,  $timeout ,  $rootScope ,  $log ,  $transitionSuppressDeprecated) {
-
-  if (!$transitionSuppressDeprecated) {
-    $log.warn('$transition is now deprecated. Use $animate from ngAnimate instead.');
-  }
-
-  var $transition = function(element, trigger, options) {
-    options = options || {};
-    var deferred = $q.defer();
-    var endEventName = $transition[options.animation ? 'animationEndEventName' : 'transitionEndEventName'];
-
-    var transitionEndHandler = function(event) {
-      $rootScope.$apply(function() {
-        element.unbind(endEventName, transitionEndHandler);
-        deferred.resolve(element);
-      });
-    };
-
-    if (endEventName) {
-      element.bind(endEventName, transitionEndHandler);
-    }
-
-    // Wrap in a timeout to allow the browser time to update the DOM before the transition is to occur
-    $timeout(function() {
-      if ( angular.isString(trigger) ) {
-        element.addClass(trigger);
-      } else if ( angular.isFunction(trigger) ) {
-        trigger(element);
-      } else if ( angular.isObject(trigger) ) {
-        element.css(trigger);
-      }
-      //If browser does not support transitions, instantly resolve
-      if ( !endEventName ) {
-        deferred.resolve(element);
-      }
-    });
-
-    // Add our custom cancel function to the promise that is returned
-    // We can call this if we are about to run a new transition, which we know will prevent this transition from ending,
-    // i.e. it will therefore never raise a transitionEnd event for that transition
-    deferred.promise.cancel = function() {
-      if ( endEventName ) {
-        element.unbind(endEventName, transitionEndHandler);
-      }
-      deferred.reject('Transition cancelled');
-    };
-
-    return deferred.promise;
-  };
-
-  // Work out the name of the transitionEnd event
-  var transElement = document.createElement('trans');
-  var transitionEndEventNames = {
-    'WebkitTransition': 'webkitTransitionEnd',
-    'MozTransition': 'transitionend',
-    'OTransition': 'oTransitionEnd',
-    'transition': 'transitionend'
-  };
-  var animationEndEventNames = {
-    'WebkitTransition': 'webkitAnimationEnd',
-    'MozTransition': 'animationend',
-    'OTransition': 'oAnimationEnd',
-    'transition': 'animationend'
-  };
-  function findEndEventName(endEventNames) {
-    for (var name in endEventNames){
-      if (transElement.style[name] !== undefined) {
-        return endEventNames[name];
-      }
-    }
-  }
-  $transition.transitionEndEventName = findEndEventName(transitionEndEventNames);
-  $transition.animationEndEventName = findEndEventName(animationEndEventNames);
-  return $transition;
-}]);
diff --git a/src/typeahead/docs/demo.html b/src/typeahead/docs/demo.html
index 3808bc854d..ff4dea90db 100644
--- a/src/typeahead/docs/demo.html
+++ b/src/typeahead/docs/demo.html
@@ -1,18 +1,64 @@
+<style>
+  .typeahead-demo .custom-popup-wrapper {
+    position: absolute;
+    top: 100%;
+    left: 0;
+    z-index: 1000;
+    display: none;
+    background-color: #f9f9f9;
+  }
+
+  .typeahead-demo .custom-popup-wrapper > .message {
+    padding: 10px 20px;
+    border-bottom: 1px solid #ddd;
+    color: #868686;
+  }
+
+  .typeahead-demo .custom-popup-wrapper > .dropdown-menu {
+    position: static;
+    float: none;
+    display: block;
+    min-width: 160px;
+    background-color: transparent;
+    border: none;
+    border-radius: 0;
+    box-shadow: none;
+  }
+</style>
+
 <script type="text/ng-template" id="customTemplate.html">
   <a>
       <img ng-src="http://upload.wikimedia.org/wikipedia/commons/thumb/{{match.model.flag}}" width="16">
-      <span bind-html-unsafe="match.label | typeaheadHighlight:query"></span>
+      <span ng-bind-html="match.label | uibTypeaheadHighlight:query"></span>
   </a>
 </script>
-<div class='container-fluid' ng-controller="TypeaheadCtrl">
+
+<script type="text/ng-template" id="customPopupTemplate.html">
+  <div class="custom-popup-wrapper"
+     ng-style="{top: position().top+'px', left: position().left+'px'}"
+     style="display: block;"
+     ng-show="isOpen() && !moveInProgress"
+     aria-hidden="{{!isOpen()}}">
+    <p class="message">select location from drop down.</p>
+
+    <ul class="dropdown-menu" role="listbox">
+        <li ng-repeat="match in matches track by $index" ng-class="{active: isActive($index) }"
+            ng-mouseenter="selectActive($index)" ng-click="selectMatch($index)" role="option" id="{{::match.id}}">
+            <div uib-typeahead-match index="$index" match="match" query="query" template-url="templateUrl"></div>
+        </li>
+    </ul>
+  </div>
+</script>
+
+<div class='container-fluid typeahead-demo' ng-controller="TypeaheadCtrl">
 
     <h4>Static arrays</h4>
     <pre>Model: {{selected | json}}</pre>
-    <input type="text" ng-model="selected" typeahead="state for state in states | filter:$viewValue | limitTo:8" class="form-control">
+    <input type="text" ng-model="selected" uib-typeahead="state for state in states | filter:$viewValue | limitTo:8" class="form-control">
 
     <h4>Asynchronous results</h4>
     <pre>Model: {{asyncSelected | json}}</pre>
-    <input type="text" ng-model="asyncSelected" placeholder="Locations loaded via $http" typeahead="address for address in getLocation($viewValue)" typeahead-loading="loadingLocations" typeahead-no-results="noResults" class="form-control">
+    <input type="text" ng-model="asyncSelected" placeholder="Locations loaded via $http" uib-typeahead="address for address in getLocation($viewValue)" typeahead-loading="loadingLocations" typeahead-no-results="noResults" class="form-control">
     <i ng-show="loadingLocations" class="glyphicon glyphicon-refresh"></i>
     <div ng-show="noResults">
       <i class="glyphicon glyphicon-remove"></i> No Results Found
@@ -20,5 +66,9 @@ <h4>Asynchronous results</h4>
 
     <h4>Custom templates for results</h4>
     <pre>Model: {{customSelected | json}}</pre>
-    <input type="text" ng-model="customSelected" placeholder="Custom template" typeahead="state as state.name for state in statesWithFlags | filter:{name:$viewValue}" typeahead-template-url="customTemplate.html" class="form-control">
+    <input type="text" ng-model="customSelected" placeholder="Custom template" uib-typeahead="state as state.name for state in statesWithFlags | filter:{name:$viewValue}" typeahead-template-url="customTemplate.html" class="form-control">
+
+    <h4>Custom popup templates for typeahead's dropdown</h4>
+    <pre>Model: {{customPopupSelected | json}}</pre>
+    <input type="text" ng-model="customPopupSelected" placeholder="Custom popup template" uib-typeahead="state as state.name for state in statesWithFlags | filter:{name:$viewValue}" typeahead-popup-template-url="customPopupTemplate.html" class="form-control">
 </div>
diff --git a/src/typeahead/docs/readme.md b/src/typeahead/docs/readme.md
index 71892ac6dd..6f48c7d74c 100644
--- a/src/typeahead/docs/readme.md
+++ b/src/typeahead/docs/readme.md
@@ -24,6 +24,9 @@ The typeahead directives provide several attributes:
 * `typeahead-append-to-body` <i class="glyphicon glyphicon-eye-open"></i>
    _(Defaults: false)_ : Should the typeahead popup be appended to $body instead of the parent element?
 
+* `typeahead-append-to-element-id`
+   _(Defaults: false)_ : Should the typeahead popup be appended to an element id instead of the parent element?
+
 * `typeahead-editable` <i class="glyphicon glyphicon-eye-open"></i>
    _(Defaults: true)_ :
    Should it restrict model values to the ones selected from the popup only ?
@@ -60,6 +63,10 @@ The typeahead directives provide several attributes:
    :
    Set custom item template
 
+* `typeahead-popup-template-url`
+   _(Defaults: `template/typeahead/typeahead-popup.html`)_ :
+   Set custom popup template
+
 * `typeahead-wait-ms` <i class="glyphicon glyphicon-eye-open"></i>
    _(Defaults: 0)_ :
    Minimal wait time after last character typed before typeahead kicks-in
@@ -67,3 +74,7 @@ The typeahead directives provide several attributes:
 * `typeahead-select-on-blur`
    _(Defaults: false)_ :
    On blur, select the currently highlighted match
+
+* `typeahead-focus-on-select`
+   _(Defaults: true) :
+   On selection, focus the input element the typeahead directive is associated with
diff --git a/src/typeahead/test/typeahead-highlight-ngsanitize.spec.js b/src/typeahead/test/typeahead-highlight-ngsanitize.spec.js
new file mode 100644
index 0000000000..de24319361
--- /dev/null
+++ b/src/typeahead/test/typeahead-highlight-ngsanitize.spec.js
@@ -0,0 +1,16 @@
+describe('Security concerns', function() {
+  var highlightFilter, $sanitize, logSpy;
+
+  beforeEach(module('ui.bootstrap.typeahead', 'ngSanitize'));
+
+  beforeEach(inject(function (uibTypeaheadHighlightFilter, _$sanitize_, $log) {
+    highlightFilter = uibTypeaheadHighlightFilter;
+    $sanitize = _$sanitize_;
+    logSpy = spyOn($log, 'warn');
+  }));
+
+  it('should not call the $log service when ngSanitize is present', function() {
+    highlightFilter('before <script src="">match</script> after', 'match');
+    expect(logSpy).not.toHaveBeenCalled();
+  });
+});
diff --git a/src/typeahead/test/typeahead-highlight.spec.js b/src/typeahead/test/typeahead-highlight.spec.js
index 1a5d8b1c5d..c696587751 100644
--- a/src/typeahead/test/typeahead-highlight.spec.js
+++ b/src/typeahead/test/typeahead-highlight.spec.js
@@ -1,38 +1,80 @@
-describe('typeaheadHighlight', function() {
-  var highlightFilter;
+describe('typeaheadHighlight', function () {
+
+  var highlightFilter, $log, $sce, logSpy;
 
   beforeEach(module('ui.bootstrap.typeahead'));
-  beforeEach(inject(function(typeaheadHighlightFilter) {
-    highlightFilter = typeaheadHighlightFilter;
+
+  beforeEach(inject(function(_$log_, _$sce_) {
+    $log = _$log_;
+    $sce = _$sce_;
+    logSpy = spyOn($log, 'warn');
+  }));
+
+  beforeEach(inject(function(uibTypeaheadHighlightFilter) {
+    highlightFilter = uibTypeaheadHighlightFilter;
   }));
 
   it('should higlight a match', function() {
-    expect(highlightFilter('before match after', 'match')).toEqual('before <strong>match</strong> after');
+    expect($sce.getTrustedHtml(highlightFilter('before match after', 'match'))).toEqual('before <strong>match</strong> after');
   });
 
   it('should higlight a match with mixed case', function() {
-    expect(highlightFilter('before MaTch after', 'match')).toEqual('before <strong>MaTch</strong> after');
+    expect($sce.getTrustedHtml(highlightFilter('before MaTch after', 'match'))).toEqual('before <strong>MaTch</strong> after');
   });
 
   it('should higlight all matches', function() {
-    expect(highlightFilter('before MaTch after match', 'match')).toEqual('before <strong>MaTch</strong> after <strong>match</strong>');
+    expect($sce.getTrustedHtml(highlightFilter('before MaTch after match', 'match'))).toEqual('before <strong>MaTch</strong> after <strong>match</strong>');
   });
 
   it('should do nothing if no match', function() {
-    expect(highlightFilter('before match after', 'nomatch')).toEqual('before match after');
+    expect($sce.getTrustedHtml(highlightFilter('before match after', 'nomatch'))).toEqual('before match after');
   });
 
   it('should do nothing if no or empty query', function() {
-    expect(highlightFilter('before match after', '')).toEqual('before match after');
-    expect(highlightFilter('before match after', null)).toEqual('before match after');
-    expect(highlightFilter('before match after', undefined)).toEqual('before match after');
+    expect($sce.getTrustedHtml(highlightFilter('before match after', ''))).toEqual('before match after');
+    expect($sce.getTrustedHtml(highlightFilter('before match after', null))).toEqual('before match after');
+    expect($sce.getTrustedHtml(highlightFilter('before match after', undefined))).toEqual('before match after');
   });
 
   it('issue 316 - should work correctly for regexp reserved words', function() {
-    expect(highlightFilter('before (match after', '(match')).toEqual('before <strong>(match</strong> after');
+    expect($sce.getTrustedHtml(highlightFilter('before (match after', '(match'))).toEqual('before <strong>(match</strong> after');
   });
 
   it('issue 1777 - should work correctly with numeric values', function() {
-    expect(highlightFilter(123, '2')).toEqual('1<strong>2</strong>3');
+    expect($sce.getTrustedHtml(highlightFilter(123, '2'))).toEqual('1<strong>2</strong>3');
+  });
+
+  it('should show a warning when this component is being used unsafely', function() {
+    highlightFilter('<i>before</i> match after', 'match');
+    expect(logSpy).toHaveBeenCalled();
+  });
+});
+
+/* Deprecation tests below */
+
+describe('typeahead highlightFilter deprecated', function(){
+  var highlightFilter, $log, $sce, logSpy;
+
+  beforeEach(module('ui.bootstrap.typeahead'));
+
+  it('should supress the warning by default', function(){
+    module(function($provide) {
+      $provide.value('$typeaheadSuppressWarning', true);
+    });
+    
+    inject(function($compile, $log, $rootScope, typeaheadHighlightFilter, $sce){
+      spyOn($log, 'warn');
+      var highlightFilter = typeaheadHighlightFilter;
+      $sce.getTrustedHtml(highlightFilter('before match after', 'match'));
+      expect($log.warn.calls.count()).toBe(0);
+    });
   });
+  
+  it('should decrecate typeaheadHighlightFilter', inject(function($compile, $log, $rootScope, typeaheadHighlightFilter, $sce){
+    spyOn($log, 'warn');
+    var highlightFilter = typeaheadHighlightFilter;
+    $sce.getTrustedHtml(highlightFilter('before match after', 'match'));
+    expect($log.warn.calls.count()).toBe(1);
+    expect($log.warn.calls.argsFor(0)).toEqual(['typeaheadHighlight is now deprecated. Use uibTypeaheadHighlight instead.']);
+  }));
 });
diff --git a/src/typeahead/test/typeahead-popup.spec.js b/src/typeahead/test/typeahead-popup.spec.js
index 5b2b94ae3c..63936609f0 100644
--- a/src/typeahead/test/typeahead-popup.spec.js
+++ b/src/typeahead/test/typeahead-popup.spec.js
@@ -14,7 +14,7 @@ describe('typeaheadPopup - result rendering', function() {
     scope.matches = ['foo', 'bar', 'baz'];
     scope.active = 1;
 
-    var el = $compile('<div><typeahead-popup matches="matches" active="active" select="select(activeIdx)"></typeahead-popup></div>')(scope);
+    var el = $compile('<div><uib-typeahead-popup matches="matches" active="active" select="select(activeIdx)"></uib-typeahead-popup></div>')(scope);
     $rootScope.$digest();
 
     var liElems = el.find('li');
@@ -28,7 +28,7 @@ describe('typeaheadPopup - result rendering', function() {
     scope.matches = ['foo', 'bar', 'baz'];
     scope.active = 1;
 
-    var el = $compile('<div><typeahead-popup matches="matches" active="active" select="select(activeIdx)"></typeahead-popup></div>')(scope);
+    var el = $compile('<div><uib-typeahead-popup matches="matches" active="active" select="select(activeIdx)"></uib-typeahead-popup></div>')(scope);
     $rootScope.$digest();
 
     var liElems = el.find('li');
@@ -47,7 +47,7 @@ describe('typeaheadPopup - result rendering', function() {
     $rootScope.select = angular.noop;
     spyOn($rootScope, 'select');
 
-    var el = $compile('<div><typeahead-popup matches="matches" active="active" select="select(activeIdx)"></typeahead-popup></div>')(scope);
+    var el = $compile('<div><uib-typeahead-popup matches="matches" active="active" select="select(activeIdx)"></uib-typeahead-popup></div>')(scope);
     $rootScope.$digest();
 
     var liElems = el.find('li');
@@ -55,3 +55,47 @@ describe('typeaheadPopup - result rendering', function() {
     expect($rootScope.select).toHaveBeenCalledWith(2);
   });
 });
+
+/* Deprecation tests below */
+
+describe('typeaheadPopup deprecation', function() {
+  beforeEach(module('ui.bootstrap.typeahead'));
+  beforeEach(module('ngSanitize'));
+  beforeEach(module('template/typeahead/typeahead-popup.html'));
+  beforeEach(module('template/typeahead/typeahead-match.html'));
+
+  it('should suppress warning', function() {
+    module(function($provide) {
+      $provide.value('$typeaheadSuppressWarning', true);
+    });
+
+    inject(function($compile, $log, $rootScope) {
+      var scope = $rootScope.$new();
+      scope.matches = ['foo', 'bar', 'baz'];
+      scope.active = 1;
+      $rootScope.select = angular.noop;
+      spyOn($log, 'warn');
+
+      var element = '<div><typeahead-popup matches="matches" active="active" select="select(activeIdx)"></typeahead-popup></div>';
+      element = $compile(element)(scope);
+      $rootScope.$digest();
+      expect($log.warn.calls.count()).toBe(0);
+    });
+  });
+
+  it('should give warning by default', inject(function($compile, $log, $rootScope) {
+    var scope = $rootScope.$new();
+    scope.matches = ['foo', 'bar', 'baz'];
+    scope.active = 1;
+    $rootScope.select = angular.noop;
+    spyOn($log, 'warn');
+
+    var element = '<div><typeahead-popup matches="matches" active="active" select="select(activeIdx)"></typeahead-popup></div>';
+    element = $compile(element)(scope);
+
+    $rootScope.$digest();
+
+    expect($log.warn.calls.count()).toBe(1);
+    expect($log.warn.calls.argsFor(0)).toEqual(['typeahead-popup is now deprecated. Use uib-typeahead-popup instead.']);
+  }));
+});
\ No newline at end of file
diff --git a/src/typeahead/test/typeahead.spec.js b/src/typeahead/test/typeahead.spec.js
index 92a75de3f4..a410abba39 100644
--- a/src/typeahead/test/typeahead.spec.js
+++ b/src/typeahead/test/typeahead.spec.js
@@ -1,8 +1,9 @@
 describe('typeahead tests', function() {
-  var $scope, $compile, $document, $timeout;
+  var $scope, $compile, $document, $templateCache, $timeout;
   var changeInputValueTo;
 
   beforeEach(module('ui.bootstrap.typeahead'));
+  beforeEach(module('ngSanitize'));
   beforeEach(module('template/typeahead/typeahead-popup.html'));
   beforeEach(module('template/typeahead/typeahead-match.html'));
   beforeEach(module(function($compileProvider) {
@@ -24,7 +25,7 @@ describe('typeahead tests', function() {
       };
     });
   }));
-  beforeEach(inject(function(_$rootScope_, _$compile_, _$document_, _$timeout_, $sniffer) {
+  beforeEach(inject(function(_$rootScope_, _$compile_, _$document_, _$templateCache_, _$timeout_, $sniffer) {
     $scope = _$rootScope_;
     $scope.source = ['foo', 'bar', 'baz'];
     $scope.states = [
@@ -33,6 +34,7 @@ describe('typeahead tests', function() {
     ];
     $compile = _$compile_;
     $document = _$document_;
+    $templateCache = _$templateCache_;
     $timeout = _$timeout_;
     changeInputValueTo = function(element, value) {
       var inputEl = findInput(element);
@@ -123,14 +125,14 @@ describe('typeahead tests', function() {
   //coarse grained, "integration" tests
   describe('initial state and model changes', function() {
     it('should be closed by default', function() {
-      var element = prepareInputEl('<div><input ng-model="result" typeahead="item for item in source"></div>');
+      var element = prepareInputEl('<div><input ng-model="result" uib-typeahead="item for item in source"></div>');
       expect(element).toBeClosed();
     });
 
     it('should correctly render initial state if the "as" keyword is used', function() {
       $scope.result = $scope.states[0];
 
-      var element = prepareInputEl('<div><input ng-model="result" typeahead="state as state.name for state in states"></div>');
+      var element = prepareInputEl('<div><input ng-model="result" uib-typeahead="state as state.name for state in states"></div>');
       var inputEl = findInput(element);
 
       expect(inputEl.val()).toEqual('Alaska');
@@ -139,14 +141,14 @@ describe('typeahead tests', function() {
     it('should default to bound model for initial rendering if there is not enough info to render label', function() {
       $scope.result = $scope.states[0].code;
 
-      var element = prepareInputEl('<div><input ng-model="result" typeahead="state.code as state.name + state.code for state in states"></div>');
+      var element = prepareInputEl('<div><input ng-model="result" uib-typeahead="state.code as state.name + state.code for state in states"></div>');
       var inputEl = findInput(element);
 
       expect(inputEl.val()).toEqual('AL');
     });
 
     it('should not get open on model change', function() {
-      var element = prepareInputEl('<div><input ng-model="result" typeahead="item for item in source"></div>');
+      var element = prepareInputEl('<div><input ng-model="result" uib-typeahead="item for item in source"></div>');
       $scope.$apply(function () {
         $scope.result = 'foo';
       });
@@ -156,7 +158,7 @@ describe('typeahead tests', function() {
 
   describe('basic functionality', function() {
     it('should open and close typeahead based on matches', function() {
-      var element = prepareInputEl('<div><input ng-model="result" typeahead="item for item in source | filter:$viewValue"></div>');
+      var element = prepareInputEl('<div><input ng-model="result" uib-typeahead="item for item in source | filter:$viewValue"></div>');
       var inputEl = findInput(element);
       var ownsId = inputEl.attr('aria-owns');
 
@@ -178,7 +180,7 @@ describe('typeahead tests', function() {
     });
 
     it('should allow expressions over multiple lines', function() {
-      var element = prepareInputEl('<div><input ng-model="result" typeahead="item for item in source \n' +
+      var element = prepareInputEl('<div><input ng-model="result" uib-typeahead="item for item in source \n' +
         '| filter:$viewValue"></div>');
       changeInputValueTo(element, 'ba');
       expect(element).toBeOpenWithActive(2, 0);
@@ -188,7 +190,7 @@ describe('typeahead tests', function() {
     });
 
     it('should not open typeahead if input value smaller than a defined threshold', function() {
-      var element = prepareInputEl('<div><input ng-model="result" typeahead="item for item in source | filter:$viewValue" typeahead-min-length="2"></div>');
+      var element = prepareInputEl('<div><input ng-model="result" uib-typeahead="item for item in source | filter:$viewValue" typeahead-min-length="2"></div>');
       changeInputValueTo(element, 'b');
       expect(element).toBeClosed();
     });
@@ -197,7 +199,7 @@ describe('typeahead tests', function() {
       $scope.updaterFn = function(selectedItem) {
         return 'prefix' + selectedItem;
       };
-      var element = prepareInputEl('<div><input ng-model="result" typeahead="updaterFn(item) as item for item in source | filter:$viewValue"></div>');
+      var element = prepareInputEl('<div><input ng-model="result" uib-typeahead="updaterFn(item) as item for item in source | filter:$viewValue"></div>');
       changeInputValueTo(element, 'f');
       triggerKeyDown(element, 13);
       expect($scope.result).toEqual('prefixfoo');
@@ -208,20 +210,20 @@ describe('typeahead tests', function() {
         return 'prefix' + sourceItem;
       };
 
-      var element = prepareInputEl('<div><input ng-model="result" typeahead="item as formatterFn(item) for item in source | filter:$viewValue"></div>');
+      var element = prepareInputEl('<div><input ng-model="result" uib-typeahead="item as formatterFn(item) for item in source | filter:$viewValue"></div>');
       changeInputValueTo(element, 'fo');
       var matchHighlight = findMatches(element).find('a').html();
       expect(matchHighlight).toEqual('prefix<strong>fo</strong>o');
     });
 
     it('should by default bind view value to model even if not part of matches', function() {
-      var element = prepareInputEl('<div><input ng-model="result" typeahead="item for item in source | filter:$viewValue"></div>');
+      var element = prepareInputEl('<div><input ng-model="result" uib-typeahead="item for item in source | filter:$viewValue"></div>');
       changeInputValueTo(element, 'not in matches');
       expect($scope.result).toEqual('not in matches');
     });
 
     it('should support the editable property to limit model bindings to matches only', function() {
-      var element = prepareInputEl('<div><input ng-model="result" typeahead="item for item in source | filter:$viewValue" typeahead-editable="false"></div>');
+      var element = prepareInputEl('<div><input ng-model="result" uib-typeahead="item for item in source | filter:$viewValue" typeahead-editable="false"></div>');
       changeInputValueTo(element, 'not in matches');
       expect($scope.result).toEqual(undefined);
     });
@@ -229,7 +231,7 @@ describe('typeahead tests', function() {
     it('should set validation errors for non-editable inputs', function() {
       var element = prepareInputEl(
         '<div><form name="form">' +
-          '<input name="input" ng-model="result" typeahead="item for item in source | filter:$viewValue" typeahead-editable="false">' +
+          '<input name="input" ng-model="result" uib-typeahead="item for item in source | filter:$viewValue" typeahead-editable="false">' +
         '</form></div>');
 
       changeInputValueTo(element, 'not in matches');
@@ -245,7 +247,7 @@ describe('typeahead tests', function() {
     it('should not set editable validation error for empty input', function() {
       var element = prepareInputEl(
         '<div><form name="form">' +
-          '<input name="input" ng-model="result" typeahead="item for item in source | filter:$viewValue" typeahead-editable="false">' +
+          '<input name="input" ng-model="result" uib-typeahead="item for item in source | filter:$viewValue" typeahead-editable="false">' +
         '</form></div>');
 
       changeInputValueTo(element, 'not in matches');
@@ -264,7 +266,7 @@ describe('typeahead tests', function() {
         }, 1000);
       };
 
-      var element = prepareInputEl('<div><input ng-model="result" typeahead="item for item in loadMatches()" typeahead-loading="isLoading"></div>');
+      var element = prepareInputEl('<div><input ng-model="result" uib-typeahead="item for item in loadMatches()" typeahead-loading="isLoading"></div>');
       changeInputValueTo(element, 'foo');
 
       expect($scope.isLoading).toBeTruthy();
@@ -273,7 +275,7 @@ describe('typeahead tests', function() {
     }));
 
     it('should support timeout before trying to match $viewValue', inject(function($timeout) {
-      var element = prepareInputEl('<div><input ng-model="result" typeahead="item for item in source | filter:$viewValue" typeahead-wait-ms="200"></div>');
+      var element = prepareInputEl('<div><input ng-model="result" uib-typeahead="item for item in source | filter:$viewValue" typeahead-wait-ms="200"></div>');
       changeInputValueTo(element, 'foo');
       expect(element).toBeClosed();
 
@@ -287,7 +289,7 @@ describe('typeahead tests', function() {
         values.push(viewValue);
         return $scope.source;
       };
-      var element = prepareInputEl('<div><input ng-model="result" typeahead="item for item in loadMatches($viewValue) | filter:$viewValue" typeahead-wait-ms="200"></div>');
+      var element = prepareInputEl('<div><input ng-model="result" uib-typeahead="item for item in loadMatches($viewValue) | filter:$viewValue" typeahead-wait-ms="200"></div>');
       changeInputValueTo(element, 'first');
       changeInputValueTo(element, 'second');
 
@@ -303,7 +305,7 @@ describe('typeahead tests', function() {
         values.push(viewValue);
         return $scope.source;
       };
-      var element = prepareInputEl('<div><input ng-model="result" typeahead="item for item in loadMatches($viewValue) | filter:$viewValue" typeahead-wait-ms="200"></div>');
+      var element = prepareInputEl('<div><input ng-model="result" uib-typeahead="item for item in loadMatches($viewValue) | filter:$viewValue" typeahead-wait-ms="200"></div>');
 
       changeInputValueTo(element, 'first');
       $timeout.flush();
@@ -316,31 +318,41 @@ describe('typeahead tests', function() {
       expect(values).toContain('second');
     }));
 
-    it('should support custom templates for matched items', inject(function($templateCache) {
+    it('should support custom popup templates', function() {
+      $templateCache.put('custom.html', '<div class="custom">foo</div>');
+
+      var element = prepareInputEl('<div><input ng-model="result" typeahead-popup-template-url="custom.html" uib-typeahead="state as state.name for state in states | filter:$viewValue"></div>');
+
+      changeInputValueTo(element, 'Al');
+
+      expect(element.find('.custom').text()).toBe('foo');
+    });
+
+    it('should support custom templates for matched items', function() {
       $templateCache.put('custom.html', '<p>{{ index }} {{ match.label }}</p>');
 
-      var element = prepareInputEl('<div><input ng-model="result" typeahead-template-url="custom.html" typeahead="state as state.name for state in states | filter:$viewValue"></div>');
+      var element = prepareInputEl('<div><input ng-model="result" typeahead-template-url="custom.html" uib-typeahead="state as state.name for state in states | filter:$viewValue"></div>');
 
       changeInputValueTo(element, 'Al');
 
       expect(findMatches(element).eq(0).find('p').text()).toEqual('0 Alaska');
-    }));
+    });
 
-    it('should support directives which require controllers in custom templates for matched items', inject(function($templateCache) {
+    it('should support directives which require controllers in custom templates for matched items', function() {
       $templateCache.put('custom.html', '<p child-directive>{{ index }} {{ match.label }}</p>');
 
-      var element = prepareInputEl('<div><input ng-model="result" typeahead-template-url="custom.html" typeahead="state as state.name for state in states | filter:$viewValue"></div>');
+      var element = prepareInputEl('<div><input ng-model="result" typeahead-template-url="custom.html" uib-typeahead="state as state.name for state in states | filter:$viewValue"></div>');
 
       element.data('$parentDirectiveController', {});
 
       changeInputValueTo(element, 'Al');
 
       expect(findMatches(element).eq(0).find('p').text()).toEqual('0 Alaska');
-    }));
+    });
 
     it('should throw error on invalid expression', function() {
       var prepareInvalidDir = function() {
-        prepareInputEl('<div><input ng-model="result" typeahead="an invalid expression"></div>');
+        prepareInputEl('<div><input ng-model="result" uib-typeahead="an invalid expression"></div>');
       };
       expect(prepareInvalidDir).toThrow();
     });
@@ -348,7 +360,7 @@ describe('typeahead tests', function() {
 
   describe('selecting a match', function() {
     it('should select a match on enter', function() {
-      var element = prepareInputEl('<div><input ng-model="result" typeahead="item for item in source | filter:$viewValue"></div>');
+      var element = prepareInputEl('<div><input ng-model="result" uib-typeahead="item for item in source | filter:$viewValue"></div>');
       var inputEl = findInput(element);
 
       changeInputValueTo(element, 'b');
@@ -360,7 +372,7 @@ describe('typeahead tests', function() {
     });
 
     it('should select a match on tab', function() {
-      var element = prepareInputEl('<div><input ng-model="result" typeahead="item for item in source | filter:$viewValue"></div>');
+      var element = prepareInputEl('<div><input ng-model="result" uib-typeahead="item for item in source | filter:$viewValue"></div>');
       var inputEl = findInput(element);
 
       changeInputValueTo(element, 'b');
@@ -372,7 +384,7 @@ describe('typeahead tests', function() {
     });
 
     it('should not select any match on blur without \'select-on-blur=true\' option', function() {
-      var element = prepareInputEl('<div><input ng-model="result" typeahead="item for item in source | filter:$viewValue"></div>');
+      var element = prepareInputEl('<div><input ng-model="result" uib-typeahead="item for item in source | filter:$viewValue"></div>');
       var inputEl = findInput(element);
 
       changeInputValueTo(element, 'b');
@@ -384,7 +396,7 @@ describe('typeahead tests', function() {
     });
 
     it('should select a match on blur with \'select-on-blur=true\' option', function() {
-      var element = prepareInputEl('<div><input ng-model="result" typeahead="item for item in source | filter:$viewValue" typeahead-select-on-blur="true"></div>');
+      var element = prepareInputEl('<div><input ng-model="result" uib-typeahead="item for item in source | filter:$viewValue" typeahead-select-on-blur="true"></div>');
       var inputEl = findInput(element);
 
       changeInputValueTo(element, 'b');
@@ -396,7 +408,7 @@ describe('typeahead tests', function() {
     });
 
     it('should select match on click', function() {
-      var element = prepareInputEl('<div><input ng-model="result" typeahead="item for item in source | filter:$viewValue"></div>');
+      var element = prepareInputEl('<div><input ng-model="result" uib-typeahead="item for item in source | filter:$viewValue"></div>');
       var inputEl = findInput(element);
 
       changeInputValueTo(element, 'b');
@@ -416,7 +428,7 @@ describe('typeahead tests', function() {
         $scope.$model = $model;
         $scope.$label = $label;
       };
-      var element = prepareInputEl('<div><input ng-model="result" typeahead-on-select="onSelect($item, $model, $label)" typeahead="state.code as state.name for state in states | filter:$viewValue"></div>');
+      var element = prepareInputEl('<div><input ng-model="result" typeahead-on-select="onSelect($item, $model, $label)" uib-typeahead="state.code as state.name for state in states | filter:$viewValue"></div>');
 
       changeInputValueTo(element, 'Alas');
       triggerKeyDown(element, 13);
@@ -428,7 +440,7 @@ describe('typeahead tests', function() {
     });
 
     it('should correctly update inputs value on mapping where label is not derived from the model', function() {
-      var element = prepareInputEl('<div><input ng-model="result" typeahead="state.code as state.name for state in states | filter:$viewValue"></div>');
+      var element = prepareInputEl('<div><input ng-model="result" uib-typeahead="state.code as state.name for state in states | filter:$viewValue"></div>');
       var inputEl = findInput(element);
 
       changeInputValueTo(element, 'Alas');
@@ -446,7 +458,7 @@ describe('typeahead tests', function() {
         }, 1000);
       };
 
-      var element = prepareInputEl('<div><input ng-model="result" typeahead="item for item in loadMatches()" typeahead-no-results="isNoResults"></div>');
+      var element = prepareInputEl('<div><input ng-model="result" uib-typeahead="item for item in loadMatches()" typeahead-no-results="isNoResults"></div>');
       changeInputValueTo(element, 'foo');
 
       expect($scope.isNoResults).toBeFalsy();
@@ -462,61 +474,77 @@ describe('typeahead tests', function() {
         }, 1000);
       };
 
-      var element = prepareInputEl('<div><input ng-model="result" typeahead="item for item in loadMatches()" typeahead-no-results="isNoResults"></div>');
+      var element = prepareInputEl('<div><input ng-model="result" uib-typeahead="item for item in loadMatches()" typeahead-no-results="isNoResults"></div>');
       changeInputValueTo(element, 'foo');
 
       expect($scope.isNoResults).toBeFalsy();
       $timeout.flush();
       expect($scope.isNoResults).toBeFalsy();
     }));
+
+    it('should not focus the input if `typeahead-focus-on-select` is false', function() {
+      var element = prepareInputEl('<div><input ng-model="result" uib-typeahead="item for item in source | filter:$viewValue" typeahead-focus-on-select="false"></div>');
+      $document.find('body').append(element);
+      var inputEl = findInput(element);
+
+      changeInputValueTo(element, 'b');
+      var match = $(findMatches(element)[1]).find('a')[0];
+
+      $(match).click();
+      $scope.$digest();
+      $timeout.flush();
+
+      expect(document.activeElement).not.toBe(inputEl[0]);
+      expect($scope.result).toEqual('baz');
+    });
   });
-  
+
   describe('select on exact match', function() {
     it('should select on an exact match when set', function() {
       $scope.onSelect = jasmine.createSpy('onSelect');
-      var element = prepareInputEl('<div><input ng-model="result" typeahead-editable="false" typeahead-on-select="onSelect()" typeahead="item for item in source | filter:$viewValue" typeahead-select-on-exact="true"></div>');
+      var element = prepareInputEl('<div><input ng-model="result" typeahead-editable="false" typeahead-on-select="onSelect()" uib-typeahead="item for item in source | filter:$viewValue" typeahead-select-on-exact="true"></div>');
       var inputEl = findInput(element);
 
       changeInputValueTo(element, 'bar');
-      
+
       expect($scope.result).toEqual('bar');
       expect(inputEl.val()).toEqual('bar');
       expect(element).toBeClosed();
       expect($scope.onSelect).toHaveBeenCalled();
     });
-    
+
     it('should not select on an exact match by default', function() {
       $scope.onSelect = jasmine.createSpy('onSelect');
-      var element = prepareInputEl('<div><input ng-model="result" typeahead-editable="false" typeahead-on-select="onSelect()" typeahead="item for item in source | filter:$viewValue"></div>');
+      var element = prepareInputEl('<div><input ng-model="result" typeahead-editable="false" typeahead-on-select="onSelect()" uib-typeahead="item for item in source | filter:$viewValue"></div>');
       var inputEl = findInput(element);
-      
+
       changeInputValueTo(element, 'bar');
-      
+
       expect($scope.result).toBeUndefined();
       expect(inputEl.val()).toEqual('bar');
       expect($scope.onSelect.calls.any()).toBe(false);
     });
-    
+
     it('should not be case sensitive when select on an exact match', function() {
       $scope.onSelect = jasmine.createSpy('onSelect');
-      var element = prepareInputEl('<div><input ng-model="result" typeahead-editable="false" typeahead-on-select="onSelect()" typeahead="item for item in source | filter:$viewValue" typeahead-select-on-exact="true"></div>');
+      var element = prepareInputEl('<div><input ng-model="result" typeahead-editable="false" typeahead-on-select="onSelect()" uib-typeahead="item for item in source | filter:$viewValue" typeahead-select-on-exact="true"></div>');
       var inputEl = findInput(element);
 
       changeInputValueTo(element, 'BaR');
-      
+
       expect($scope.result).toEqual('bar');
       expect(inputEl.val()).toEqual('bar');
       expect(element).toBeClosed();
       expect($scope.onSelect).toHaveBeenCalled();
     });
-    
+
     it('should not auto select when not a match with one potential result left', function() {
       $scope.onSelect = jasmine.createSpy('onSelect');
-      var element = prepareInputEl('<div><input ng-model="result" typeahead-editable="false" typeahead-on-select="onSelect()" typeahead="item for item in source | filter:$viewValue" typeahead-select-on-exact="true"></div>');
+      var element = prepareInputEl('<div><input ng-model="result" typeahead-editable="false" typeahead-on-select="onSelect()" uib-typeahead="item for item in source | filter:$viewValue" typeahead-select-on-exact="true"></div>');
       var inputEl = findInput(element);
 
       changeInputValueTo(element, 'fo');
-      
+
       expect($scope.result).toBeUndefined();
       expect(inputEl.val()).toEqual('fo');
       expect($scope.onSelect.calls.any()).toBe(false);
@@ -527,7 +555,7 @@ describe('typeahead tests', function() {
     var element;
 
     beforeEach(function() {
-      element = prepareInputEl('<div><input ng-model="result" typeahead="item for item in source | filter:$viewValue"></div>');
+      element = prepareInputEl('<div><input ng-model="result" uib-typeahead="item for item in source | filter:$viewValue"></div>');
     });
 
     it('should activate prev/next matches on up/down keys', function() {
@@ -577,7 +605,7 @@ describe('typeahead tests', function() {
       $scope.source = function() {
         return deferred.promise;
       };
-      element = prepareInputEl('<div><input ng-model="result" typeahead="item for item in source()"></div>');
+      element = prepareInputEl('<div><input ng-model="result" uib-typeahead="item for item in source()"></div>');
     }));
 
     it('should display matches from promise', function() {
@@ -611,7 +639,7 @@ describe('typeahead tests', function() {
   describe('non-regressions tests', function() {
 
     it('issue 231 - closes matches popup on click outside typeahead', function() {
-      var element = prepareInputEl('<div><input ng-model="result" typeahead="item for item in source | filter:$viewValue"></div>');
+      var element = prepareInputEl('<div><input ng-model="result" uib-typeahead="item for item in source | filter:$viewValue"></div>');
 
       changeInputValueTo(element, 'b');
 
@@ -622,13 +650,13 @@ describe('typeahead tests', function() {
     });
 
     it('issue 591 - initial formatting for un-selected match and complex label expression', function() {
-      var inputEl = findInput(prepareInputEl('<div><input ng-model="result" typeahead="state as state.name + \' \' + state.code for state in states | filter:$viewValue"></div>'));
+      var inputEl = findInput(prepareInputEl('<div><input ng-model="result" uib-typeahead="state as state.name + \' \' + state.code for state in states | filter:$viewValue"></div>'));
       expect(inputEl.val()).toEqual('');
     });
 
     it('issue 786 - name of internal model should not conflict with scope model name', function() {
       $scope.state = $scope.states[0];
-      var element = prepareInputEl('<div><input ng-model="state" typeahead="state as state.name for state in states | filter:$viewValue"></div>');
+      var element = prepareInputEl('<div><input ng-model="state" uib-typeahead="state as state.name for state in states | filter:$viewValue"></div>');
       var inputEl = findInput(element);
 
       expect(inputEl.val()).toEqual('Alaska');
@@ -636,7 +664,7 @@ describe('typeahead tests', function() {
 
     it('issue 863 - it should work correctly with input type="email"', function() {
       $scope.emails = ['foo@host.com', 'bar@host.com'];
-      var element = prepareInputEl('<div><input type="email" ng-model="email" typeahead="email for email in emails | filter:$viewValue"></div>');
+      var element = prepareInputEl('<div><input type="email" ng-model="email" uib-typeahead="email for email in emails | filter:$viewValue"></div>');
       var inputEl = findInput(element);
 
       changeInputValueTo(element, 'bar');
@@ -654,7 +682,7 @@ describe('typeahead tests', function() {
           return [viewValue];
         });
       };
-      var element = prepareInputEl('<div><input ng-model="result" typeahead="item for item in items($viewValue)"></div>');
+      var element = prepareInputEl('<div><input ng-model="result" uib-typeahead="item for item in items($viewValue)"></div>');
       var inputEl = findInput(element);
 
       changeInputValueTo(element, 'match');
@@ -672,7 +700,7 @@ describe('typeahead tests', function() {
           return [viewValue];
         });
       };
-      var element = prepareInputEl('<div><input ng-model="result" typeahead-loading="isLoading" typeahead="item for item in items($viewValue)"></div>');
+      var element = prepareInputEl('<div><input ng-model="result" typeahead-loading="isLoading" uib-typeahead="item for item in items($viewValue)"></div>');
       var inputEl = findInput(element);
 
       changeInputValueTo(element, 'match');
@@ -690,7 +718,7 @@ describe('typeahead tests', function() {
           return [viewValue];
         });
       };
-      var element = prepareInputEl('<div><input ng-model="result" typeahead-min-length="2" typeahead-loading="isLoading" typeahead="item for item in items($viewValue)"></div>');
+      var element = prepareInputEl('<div><input ng-model="result" typeahead-min-length="2" typeahead-loading="isLoading" uib-typeahead="item for item in items($viewValue)"></div>');
 
       changeInputValueTo(element, 'match');
       $scope.$digest();
@@ -710,7 +738,7 @@ describe('typeahead tests', function() {
         values.push(viewValue);
         return $scope.source;
       };
-      var element = prepareInputEl('<div><input ng-model="result" typeahead="item for item in loadMatches($viewValue) | filter:$viewValue" typeahead-min-length="2" typeahead-wait-ms="200"></div>');
+      var element = prepareInputEl('<div><input ng-model="result" uib-typeahead="item for item in loadMatches($viewValue) | filter:$viewValue" typeahead-min-length="2" typeahead-wait-ms="200"></div>');
       changeInputValueTo(element, 'match');
       changeInputValueTo(element, 'm');
 
@@ -724,7 +752,7 @@ describe('typeahead tests', function() {
       var element;
 
       it('does not close matches popup on click in input', function() {
-        element = prepareInputEl('<div><input ng-model="result" typeahead="item for item in source | filter:$viewValue"></div>');
+        element = prepareInputEl('<div><input ng-model="result" uib-typeahead="item for item in source | filter:$viewValue"></div>');
         var inputEl = findInput(element);
 
         // Note that this bug can only be found when element is in the document
@@ -739,7 +767,7 @@ describe('typeahead tests', function() {
       });
 
       it('issue #1773 - should not trigger an error when used with ng-focus', function() {
-        element = prepareInputEl('<div><input ng-model="result" typeahead="item for item in source | filter:$viewValue" ng-focus="foo()"></div>');
+        element = prepareInputEl('<div><input ng-model="result" uib-typeahead="item for item in source | filter:$viewValue" ng-focus="foo()"></div>');
         var inputEl = findInput(element);
 
         // Note that this bug can only be found when element is in the document
@@ -762,7 +790,7 @@ describe('typeahead tests', function() {
         return ['foo', 'bar'];
       };
 
-      var element = prepareInputEl('<div><input ng-model="result" typeahead="item for item in query($viewValue)"></div>');
+      var element = prepareInputEl('<div><input ng-model="result" uib-typeahead="item for item in query($viewValue)"></div>');
       changeInputValueTo(element, 'bar');
 
       expect(element).toBeOpenWithActive(2, 0);
@@ -771,7 +799,7 @@ describe('typeahead tests', function() {
     it('issue #3318 - should set model validity to true when set manually', function() {
       var element = prepareInputEl(
         '<div><form name="form">' +
-          '<input name="input" ng-model="result" typeahead="item for item in source | filter:$viewValue" typeahead-editable="false">' +
+          '<input name="input" ng-model="result" uib-typeahead="item for item in source | filter:$viewValue" typeahead-editable="false">' +
         '</form></div>');
 
       changeInputValueTo(element, 'not in matches');
@@ -784,7 +812,7 @@ describe('typeahead tests', function() {
     });
 
     it('issue #3166 - should set \'parse\' key as valid when selecting a perfect match and not editable', function() {
-      var element = prepareInputEl('<div ng-form="test"><input name="typeahead" ng-model="result" typeahead="state as state.name for state in states | filter:$viewValue" typeahead-editable="false"></div>');
+      var element = prepareInputEl('<div ng-form="test"><input name="typeahead" ng-model="result" uib-typeahead="state as state.name for state in states | filter:$viewValue" typeahead-editable="false"></div>');
       var inputEl = findInput(element);
 
       changeInputValueTo(element, 'Alaska');
@@ -792,13 +820,26 @@ describe('typeahead tests', function() {
 
       expect($scope.test.typeahead.$error.parse).toBeUndefined();
     });
+
+    it('issue #3823 - should support ng-model-options getterSetter', function() {
+      function resultSetter(state) {
+        return state;
+      }
+      $scope.result = resultSetter;
+      var element = prepareInputEl('<div><input name="typeahead" ng-model="result" ng-model-options="{getterSetter: true}" uib-typeahead="state as state.name for state in states | filter:$viewValue" typeahead-editable="false"></div>');
+
+      changeInputValueTo(element, 'Alaska');
+      triggerKeyDown(element, 13);
+
+      expect($scope.result).toBe(resultSetter);
+    });
   });
 
   describe('input formatting', function() {
     it('should co-operate with existing formatters', function() {
       $scope.result = $scope.states[0];
 
-      var element = prepareInputEl('<div><input ng-model="result.name" formatter typeahead="state.name for state in states | filter:$viewValue"></div>'),
+      var element = prepareInputEl('<div><input ng-model="result.name" formatter uib-typeahead="state.name for state in states | filter:$viewValue"></div>'),
       inputEl = findInput(element);
 
       expect(inputEl.val()).toEqual('formatted' + $scope.result.name);
@@ -810,7 +851,7 @@ describe('typeahead tests', function() {
         return $model.code;
       };
 
-      var element = prepareInputEl('<div><input ng-model="result" typeahead-input-formatter="formatInput($model)" typeahead="state as state.name for state in states | filter:$viewValue"></div>'),
+      var element = prepareInputEl('<div><input ng-model="result" typeahead-input-formatter="formatInput($model)" uib-typeahead="state as state.name for state in states | filter:$viewValue"></div>'),
       inputEl = findInput(element);
 
       expect(inputEl.val()).toEqual('AL');
@@ -818,21 +859,31 @@ describe('typeahead tests', function() {
     });
   });
 
+  describe('append to element id', function() {
+    it('append typeahead results to element', function() {
+      $document.find('body').append('<div id="myElement"></div>');
+      var element = prepareInputEl('<div><input name="input" ng-model="result" uib-typeahead="item for item in states | filter:$viewValue" typeahead-append-to-element-id="myElement"></div>');
+      changeInputValueTo(element, 'al');
+      expect($document.find('#myElement')).toBeOpenWithActive(2, 0);
+      $document.find('#myElement').remove();
+    });
+  });
+
   describe('append to body', function() {
     it('append typeahead results to body', function() {
-      var element = prepareInputEl('<div><input ng-model="result" typeahead="item for item in source | filter:$viewValue" typeahead-append-to-body="true"></div>');
+      var element = prepareInputEl('<div><input ng-model="result" uib-typeahead="item for item in source | filter:$viewValue" typeahead-append-to-body="true"></div>');
       changeInputValueTo(element, 'ba');
       expect($document.find('body')).toBeOpenWithActive(2, 0);
     });
 
     it('should not append to body when value of the attribute is false', function() {
-      var element = prepareInputEl('<div><input ng-model="result" typeahead="item for item in source | filter:$viewValue" typeahead-append-to-body="false"></div>');
+      var element = prepareInputEl('<div><input ng-model="result" uib-typeahead="item for item in source | filter:$viewValue" typeahead-append-to-body="false"></div>');
       changeInputValueTo(element, 'ba');
       expect(findDropDown($document.find('body')).length).toEqual(0);
     });
 
     it('should have right position after scroll', function() {
-      var element = prepareInputEl('<div><input ng-model="result" typeahead="item for item in source | filter:$viewValue" typeahead-append-to-body="true"></div>');
+      var element = prepareInputEl('<div><input ng-model="result" uib-typeahead="item for item in source | filter:$viewValue" typeahead-append-to-body="true"></div>');
       var dropdown = findDropDown($document.find('body'));
       var body = angular.element(document.body);
 
@@ -858,7 +909,7 @@ describe('typeahead tests', function() {
 
   describe('focus first', function() {
     it('should focus the first element by default', function() {
-      var element = prepareInputEl('<div><input ng-model="result" typeahead="item for item in source | filter:$viewValue"></div>');
+      var element = prepareInputEl('<div><input ng-model="result" uib-typeahead="item for item in source | filter:$viewValue"></div>');
       changeInputValueTo(element, 'b');
       expect(element).toBeOpenWithActive(2, 0);
 
@@ -880,7 +931,7 @@ describe('typeahead tests', function() {
     });
 
     it('should not focus the first element until keys are pressed', function() {
-      var element = prepareInputEl('<div><input ng-model="result" typeahead="item for item in source | filter:$viewValue" typeahead-focus-first="false"></div>');
+      var element = prepareInputEl('<div><input ng-model="result" uib-typeahead="item for item in source | filter:$viewValue" typeahead-focus-first="false"></div>');
       changeInputValueTo(element, 'b');
       expect(element).toBeOpenWithActive(2, -1);
 
@@ -920,7 +971,7 @@ describe('typeahead tests', function() {
     $scope.onSelect = function($item, $model, $label) {
       $scope.select_count = $scope.select_count + 1;
     };
-    var element = prepareInputEl('<div><input ng-model="result" ng-keydown="keyDownEvent = $event" typeahead="item for item in source | filter:$viewValue" typeahead-on-select="onSelect($item, $model, $label)" typeahead-focus-first="false"></div>');
+    var element = prepareInputEl('<div><input ng-model="result" ng-keydown="keyDownEvent = $event" uib-typeahead="item for item in source | filter:$viewValue" typeahead-on-select="onSelect($item, $model, $label)" typeahead-focus-first="false"></div>');
     changeInputValueTo(element, 'b');
 
     // enter key should not be captured when nothing is focused
@@ -940,7 +991,7 @@ describe('typeahead tests', function() {
     $scope.onSelect = function($item, $model, $label) {
       $scope.select_count = $scope.select_count + 1;
     };
-    var element = prepareInputEl('<div><input ng-model="result" ng-keydown="keyDownEvent = $event" typeahead="item for item in source | filter:$viewValue" typeahead-on-select="onSelect($item, $model, $label)" typeahead-focus-first="false"></div>');
+    var element = prepareInputEl('<div><input ng-model="result" ng-keydown="keyDownEvent = $event" uib-typeahead="item for item in source | filter:$viewValue" typeahead-on-select="onSelect($item, $model, $label)" typeahead-focus-first="false"></div>');
     changeInputValueTo(element, 'b');
 
     // down key should be captured and focus first element
@@ -956,10 +1007,57 @@ describe('typeahead tests', function() {
 
   describe('minLength set to 0', function() {
     it('should open typeahead if input is changed to empty string if defined threshold is 0', function() {
-      var element = prepareInputEl('<div><input ng-model="result" typeahead="item for item in source | filter:$viewValue" typeahead-min-length="0"></div>');
+      var element = prepareInputEl('<div><input ng-model="result" uib-typeahead="item for item in source | filter:$viewValue" typeahead-min-length="0"></div>');
       changeInputValueTo(element, '');
-
       expect(element).toBeOpenWithActive(3, 0);
     });
   });
 });
+
+/* Deprecation tests below */
+
+describe('typeahead deprecation', function() {
+  beforeEach(module('ui.bootstrap.typeahead'));
+  beforeEach(module('ngSanitize'));
+  beforeEach(module('template/typeahead/typeahead-popup.html'));
+  beforeEach(module('template/typeahead/typeahead-match.html'));
+
+  it('should suppress warning', function() {
+    module(function($provide) {
+      $provide.value('$typeaheadSuppressWarning', true);
+    });
+
+    inject(function($compile, $log, $rootScope) {
+      spyOn($log, 'warn');
+
+      var element = '<div><input ng-model="result" typeahead="item for item in source | filter:$viewValue" typeahead-min-length="0"></div>';
+      element = $compile(element)($rootScope);
+      $rootScope.$digest();
+      expect($log.warn.calls.count()).toBe(0);
+    });
+  });
+
+  it('should give warning by default', inject(function($compile, $log, $rootScope) {
+    spyOn($log, 'warn');
+
+    var element = '<div><input ng-model="result" typeahead="item for item in source | filter:$viewValue" typeahead-min-length="0"></div>';
+    element = $compile(element)($rootScope);
+    $rootScope.$digest();
+
+    expect($log.warn.calls.count()).toBe(3);
+    expect($log.warn.calls.argsFor(0)).toEqual(['typeaheadParser is now deprecated. Use uibTypeaheadParser instead.']);
+    expect($log.warn.calls.argsFor(1)).toEqual(['typeahead is now deprecated. Use uib-typeahead instead.']);
+    expect($log.warn.calls.argsFor(2)).toEqual(['typeahead-popup is now deprecated. Use uib-typeahead-popup instead.']);
+  }));
+  
+  it('should deprecate typeaheadMatch', inject(function($compile, $log, $rootScope, $templateCache, $sniffer){
+    spyOn($log, 'warn');
+    
+    var element = '<div typeahead-match index=\"$index\" match=\"match\" query=\"query\" template-url=\"templateUrl\"></div>';
+    element = $compile(element)($rootScope);
+    $rootScope.$digest();
+    
+    expect($log.warn.calls.count()).toBe(1);
+    expect($log.warn.calls.argsFor(0)).toEqual(['typeahead-match is now deprecated. Use uib-typeahead-match instead.']);
+  }));
+});
\ No newline at end of file
diff --git a/src/typeahead/typeahead.js b/src/typeahead/typeahead.js
index db661ba0ca..12be26dc59 100644
--- a/src/typeahead/typeahead.js
+++ b/src/typeahead/typeahead.js
@@ -1,42 +1,556 @@
-angular.module('ui.bootstrap.typeahead', ['ui.bootstrap.position', 'ui.bootstrap.bindHtml'])
+angular.module('ui.bootstrap.typeahead', ['ui.bootstrap.position'])
 
 /**
  * A helper service that can parse typeahead's syntax (string provided by users)
  * Extracted to a separate service for ease of unit testing
  */
-  .factory('typeaheadParser', ['$parse', function($parse) {
-
-  //                      00000111000000000000022200000000000000003333333333333330000000000044000
-  var TYPEAHEAD_REGEXP = /^\s*([\s\S]+?)(?:\s+as\s+([\s\S]+?))?\s+for\s+(?:([\$\w][\$\w\d]*))\s+in\s+([\s\S]+?)$/;
-
-  return {
-    parse: function(input) {
-      var match = input.match(TYPEAHEAD_REGEXP);
-      if (!match) {
-        throw new Error(
-          'Expected typeahead specification in form of "_modelValue_ (as _label_)? for _item_ in _collection_"' +
-            ' but got "' + input + '".');
-      }
+  .factory('uibTypeaheadParser', ['$parse', function($parse) {
+    //                      00000111000000000000022200000000000000003333333333333330000000000044000
+    var TYPEAHEAD_REGEXP = /^\s*([\s\S]+?)(?:\s+as\s+([\s\S]+?))?\s+for\s+(?:([\$\w][\$\w\d]*))\s+in\s+([\s\S]+?)$/;
+    return {
+      parse: function(input) {
+        var match = input.match(TYPEAHEAD_REGEXP);
+        if (!match) {
+          throw new Error(
+            'Expected typeahead specification in form of "_modelValue_ (as _label_)? for _item_ in _collection_"' +
+              ' but got "' + input + '".');
+        }
 
-      return {
-        itemName:match[3],
-        source:$parse(match[4]),
-        viewMapper:$parse(match[2] || match[1]),
-        modelMapper:$parse(match[1])
-      };
-    }
-  };
-}])
+        return {
+          itemName: match[3],
+          source: $parse(match[4]),
+          viewMapper: $parse(match[2] || match[1]),
+          modelMapper: $parse(match[1])
+        };
+      }
+    };
+  }])
 
-  .directive('typeahead', ['$compile', '$parse', '$q', '$timeout', '$document', '$window', '$rootScope', '$position', 'typeaheadParser',
-    function($compile, $parse, $q, $timeout, $document, $window, $rootScope, $position, typeaheadParser) {
+  .controller('UibTypeaheadController', ['$scope', '$element', '$attrs', '$compile', '$parse', '$q', '$timeout', '$document', '$window', '$rootScope', '$uibPosition', 'uibTypeaheadParser',
+    function(originalScope, element, attrs, $compile, $parse, $q, $timeout, $document, $window, $rootScope, $position, typeaheadParser) {
     var HOT_KEYS = [9, 13, 27, 38, 40];
     var eventDebounceTime = 200;
+    var modelCtrl, ngModelOptions;
+    //SUPPORTED ATTRIBUTES (OPTIONS)
+
+    //minimal no of characters that needs to be entered before typeahead kicks-in
+    var minLength = originalScope.$eval(attrs.typeaheadMinLength);
+    if (!minLength && minLength !== 0) {
+      minLength = 1;
+    }
+
+    //minimal wait time after last character typed before typeahead kicks-in
+    var waitTime = originalScope.$eval(attrs.typeaheadWaitMs) || 0;
+
+    //should it restrict model values to the ones selected from the popup only?
+    var isEditable = originalScope.$eval(attrs.typeaheadEditable) !== false;
+
+    //binding to a variable that indicates if matches are being retrieved asynchronously
+    var isLoadingSetter = $parse(attrs.typeaheadLoading).assign || angular.noop;
+
+    //a callback executed when a match is selected
+    var onSelectCallback = $parse(attrs.typeaheadOnSelect);
+
+    //should it select highlighted popup value when losing focus?
+    var isSelectOnBlur = angular.isDefined(attrs.typeaheadSelectOnBlur) ? originalScope.$eval(attrs.typeaheadSelectOnBlur) : false;
+
+    //binding to a variable that indicates if there were no results after the query is completed
+    var isNoResultsSetter = $parse(attrs.typeaheadNoResults).assign || angular.noop;
+
+    var inputFormatter = attrs.typeaheadInputFormatter ? $parse(attrs.typeaheadInputFormatter) : undefined;
+
+    var appendToBody =  attrs.typeaheadAppendToBody ? originalScope.$eval(attrs.typeaheadAppendToBody) : false;
+
+    var appendToElementId =  attrs.typeaheadAppendToElementId || false;
+
+    var focusFirst = originalScope.$eval(attrs.typeaheadFocusFirst) !== false;
+
+    //If input matches an item of the list exactly, select it automatically
+    var selectOnExact = attrs.typeaheadSelectOnExact ? originalScope.$eval(attrs.typeaheadSelectOnExact) : false;
+
+    //INTERNAL VARIABLES
+
+    //model setter executed upon match selection
+    var parsedModel = $parse(attrs.ngModel);
+    var invokeModelSetter = $parse(attrs.ngModel + '($$$p)');
+    var $setModelValue = function(scope, newValue) {
+      if (angular.isFunction(parsedModel(originalScope)) &&
+        ngModelOptions && ngModelOptions.$options && ngModelOptions.$options.getterSetter) {
+        return invokeModelSetter(scope, {$$$p: newValue});
+      } else {
+        return parsedModel.assign(scope, newValue);
+      }
+    };
+
+    //expressions used by typeahead
+    var parserResult = typeaheadParser.parse(attrs.uibTypeahead);
+
+    var hasFocus;
+
+    //Used to avoid bug in iOS webview where iOS keyboard does not fire
+    //mousedown & mouseup events
+    //Issue #3699
+    var selected;
+
+    //create a child scope for the typeahead directive so we are not polluting original scope
+    //with typeahead-specific data (matches, query etc.)
+    var scope = originalScope.$new();
+    var offDestroy = originalScope.$on('$destroy', function() {
+      scope.$destroy();
+    });
+    scope.$on('$destroy', offDestroy);
+
+    // WAI-ARIA
+    var popupId = 'typeahead-' + scope.$id + '-' + Math.floor(Math.random() * 10000);
+    element.attr({
+      'aria-autocomplete': 'list',
+      'aria-expanded': false,
+      'aria-owns': popupId
+    });
+
+    //pop-up element used to display matches
+    var popUpEl = angular.element('<div uib-typeahead-popup></div>');
+    popUpEl.attr({
+      id: popupId,
+      matches: 'matches',
+      active: 'activeIdx',
+      select: 'select(activeIdx)',
+      'move-in-progress': 'moveInProgress',
+      query: 'query',
+      position: 'position'
+    });
+    //custom item template
+    if (angular.isDefined(attrs.typeaheadTemplateUrl)) {
+      popUpEl.attr('template-url', attrs.typeaheadTemplateUrl);
+    }
+
+    if (angular.isDefined(attrs.typeaheadPopupTemplateUrl)) {
+      popUpEl.attr('popup-template-url', attrs.typeaheadPopupTemplateUrl);
+    }
+
+    var resetMatches = function() {
+      scope.matches = [];
+      scope.activeIdx = -1;
+      element.attr('aria-expanded', false);
+    };
+
+    var getMatchId = function(index) {
+      return popupId + '-option-' + index;
+    };
+
+    // Indicate that the specified match is the active (pre-selected) item in the list owned by this typeahead.
+    // This attribute is added or removed automatically when the `activeIdx` changes.
+    scope.$watch('activeIdx', function(index) {
+      if (index < 0) {
+        element.removeAttr('aria-activedescendant');
+      } else {
+        element.attr('aria-activedescendant', getMatchId(index));
+      }
+    });
+
+    var inputIsExactMatch = function(inputValue, index) {
+      if (scope.matches.length > index && inputValue) {
+        return inputValue.toUpperCase() === scope.matches[index].label.toUpperCase();
+      }
+
+      return false;
+    };
+
+    var getMatchesAsync = function(inputValue) {
+      var locals = {$viewValue: inputValue};
+      isLoadingSetter(originalScope, true);
+      isNoResultsSetter(originalScope, false);
+      $q.when(parserResult.source(originalScope, locals)).then(function(matches) {
+        //it might happen that several async queries were in progress if a user were typing fast
+        //but we are interested only in responses that correspond to the current view value
+        var onCurrentRequest = (inputValue === modelCtrl.$viewValue);
+        if (onCurrentRequest && hasFocus) {
+          if (matches && matches.length > 0) {
+            scope.activeIdx = focusFirst ? 0 : -1;
+            isNoResultsSetter(originalScope, false);
+            scope.matches.length = 0;
+
+            //transform labels
+            for (var i = 0; i < matches.length; i++) {
+              locals[parserResult.itemName] = matches[i];
+              scope.matches.push({
+                id: getMatchId(i),
+                label: parserResult.viewMapper(scope, locals),
+                model: matches[i]
+              });
+            }
+
+            scope.query = inputValue;
+            //position pop-up with matches - we need to re-calculate its position each time we are opening a window
+            //with matches as a pop-up might be absolute-positioned and position of an input might have changed on a page
+            //due to other elements being rendered
+            recalculatePosition();
+
+            element.attr('aria-expanded', true);
+
+            //Select the single remaining option if user input matches
+            if (selectOnExact && scope.matches.length === 1 && inputIsExactMatch(inputValue, 0)) {
+              scope.select(0);
+            }
+          } else {
+            resetMatches();
+            isNoResultsSetter(originalScope, true);
+          }
+        }
+        if (onCurrentRequest) {
+          isLoadingSetter(originalScope, false);
+        }
+      }, function() {
+        resetMatches();
+        isLoadingSetter(originalScope, false);
+        isNoResultsSetter(originalScope, true);
+      });
+    };
+
+    // bind events only if appendToBody params exist - performance feature
+    if (appendToBody) {
+      angular.element($window).bind('resize', fireRecalculating);
+      $document.find('body').bind('scroll', fireRecalculating);
+    }
+
+    // Declare the timeout promise var outside the function scope so that stacked calls can be cancelled later
+    var timeoutEventPromise;
+
+    // Default progress type
+    scope.moveInProgress = false;
+
+    function fireRecalculating() {
+      if (!scope.moveInProgress) {
+        scope.moveInProgress = true;
+        scope.$digest();
+      }
 
+      // Cancel previous timeout
+      if (timeoutEventPromise) {
+        $timeout.cancel(timeoutEventPromise);
+      }
+
+      // Debounced executing recalculate after events fired
+      timeoutEventPromise = $timeout(function() {
+        // if popup is visible
+        if (scope.matches.length) {
+          recalculatePosition();
+        }
+
+        scope.moveInProgress = false;
+      }, eventDebounceTime);
+    }
+
+    // recalculate actual position and set new values to scope
+    // after digest loop is popup in right position
+    function recalculatePosition() {
+      scope.position = appendToBody ? $position.offset(element) : $position.position(element);
+      scope.position.top += element.prop('offsetHeight');
+    }
+
+    //we need to propagate user's query so we can higlight matches
+    scope.query = undefined;
+
+    //Declare the timeout promise var outside the function scope so that stacked calls can be cancelled later
+    var timeoutPromise;
+
+    var scheduleSearchWithTimeout = function(inputValue) {
+      timeoutPromise = $timeout(function() {
+        getMatchesAsync(inputValue);
+      }, waitTime);
+    };
+
+    var cancelPreviousTimeout = function() {
+      if (timeoutPromise) {
+        $timeout.cancel(timeoutPromise);
+      }
+    };
+
+    resetMatches();
+
+    scope.select = function(activeIdx) {
+      //called from within the $digest() cycle
+      var locals = {};
+      var model, item;
+
+      selected = true;
+      locals[parserResult.itemName] = item = scope.matches[activeIdx].model;
+      model = parserResult.modelMapper(originalScope, locals);
+      $setModelValue(originalScope, model);
+      modelCtrl.$setValidity('editable', true);
+      modelCtrl.$setValidity('parse', true);
+
+      onSelectCallback(originalScope, {
+        $item: item,
+        $model: model,
+        $label: parserResult.viewMapper(originalScope, locals)
+      });
+
+      resetMatches();
+
+      //return focus to the input element if a match was selected via a mouse click event
+      // use timeout to avoid $rootScope:inprog error
+      if (scope.$eval(attrs.typeaheadFocusOnSelect) !== false) {
+        $timeout(function() { element[0].focus(); }, 0, false);
+      }
+    };
+
+    //bind keyboard events: arrows up(38) / down(40), enter(13) and tab(9), esc(27)
+    element.bind('keydown', function(evt) {
+      //typeahead is open and an "interesting" key was pressed
+      if (scope.matches.length === 0 || HOT_KEYS.indexOf(evt.which) === -1) {
+        return;
+      }
+
+      // if there's nothing selected (i.e. focusFirst) and enter or tab is hit, clear the results
+      if (scope.activeIdx === -1 && (evt.which === 9 || evt.which === 13)) {
+        resetMatches();
+        scope.$digest();
+        return;
+      }
+
+      evt.preventDefault();
+
+      if (evt.which === 40) {
+        scope.activeIdx = (scope.activeIdx + 1) % scope.matches.length;
+        scope.$digest();
+      } else if (evt.which === 38) {
+        scope.activeIdx = (scope.activeIdx > 0 ? scope.activeIdx : scope.matches.length) - 1;
+        scope.$digest();
+      } else if (evt.which === 13 || evt.which === 9) {
+        scope.$apply(function () {
+          scope.select(scope.activeIdx);
+        });
+      } else if (evt.which === 27) {
+        evt.stopPropagation();
+
+        resetMatches();
+        scope.$digest();
+      }
+    });
+
+    element.bind('blur', function() {
+      if (isSelectOnBlur && scope.matches.length && scope.activeIdx !== -1 && !selected) {
+        selected = true;
+        scope.$apply(function() {
+          scope.select(scope.activeIdx);
+        });
+      }
+      hasFocus = false;
+      selected = false;
+    });
+
+    // Keep reference to click handler to unbind it.
+    var dismissClickHandler = function(evt) {
+      // Issue #3973
+      // Firefox treats right click as a click on document
+      if (element[0] !== evt.target && evt.which !== 3 && scope.matches.length !== 0) {
+        resetMatches();
+        if (!$rootScope.$$phase) {
+          scope.$digest();
+        }
+      }
+    };
+
+    $document.bind('click', dismissClickHandler);
+
+    originalScope.$on('$destroy', function() {
+      $document.unbind('click', dismissClickHandler);
+      if (appendToBody || appendToElementId) {
+        $popup.remove();
+      }
+      // Prevent jQuery cache memory leak
+      popUpEl.remove();
+    });
+
+    var $popup = $compile(popUpEl)(scope);
+
+    if (appendToBody) {
+      $document.find('body').append($popup);
+    } else if (appendToElementId !== false) {
+      angular.element($document[0].getElementById(appendToElementId)).append($popup);
+    } else {
+      element.after($popup);
+    }
+
+    this.init = function(_modelCtrl, _ngModelOptions) {
+      modelCtrl = _modelCtrl;
+      ngModelOptions = _ngModelOptions;
+
+      //plug into $parsers pipeline to open a typeahead on view changes initiated from DOM
+      //$parsers kick-in on all the changes coming from the view as well as manually triggered by $setViewValue
+      modelCtrl.$parsers.unshift(function(inputValue) {
+        hasFocus = true;
+
+        if (minLength === 0 || inputValue && inputValue.length >= minLength) {
+          if (waitTime > 0) {
+            cancelPreviousTimeout();
+            scheduleSearchWithTimeout(inputValue);
+          } else {
+            getMatchesAsync(inputValue);
+          }
+        } else {
+          isLoadingSetter(originalScope, false);
+          cancelPreviousTimeout();
+          resetMatches();
+        }
+
+        if (isEditable) {
+          return inputValue;
+        } else {
+          if (!inputValue) {
+            // Reset in case user had typed something previously.
+            modelCtrl.$setValidity('editable', true);
+            return null;
+          } else {
+            modelCtrl.$setValidity('editable', false);
+            return undefined;
+          }
+        }
+      });
+
+      modelCtrl.$formatters.push(function(modelValue) {
+        var candidateViewValue, emptyViewValue;
+        var locals = {};
+
+        // The validity may be set to false via $parsers (see above) if
+        // the model is restricted to selected values. If the model
+        // is set manually it is considered to be valid.
+        if (!isEditable) {
+          modelCtrl.$setValidity('editable', true);
+        }
+
+        if (inputFormatter) {
+          locals.$model = modelValue;
+          return inputFormatter(originalScope, locals);
+        } else {
+          //it might happen that we don't have enough info to properly render input value
+          //we need to check for this situation and simply return model value if we can't apply custom formatting
+          locals[parserResult.itemName] = modelValue;
+          candidateViewValue = parserResult.viewMapper(originalScope, locals);
+          locals[parserResult.itemName] = undefined;
+          emptyViewValue = parserResult.viewMapper(originalScope, locals);
+
+          return candidateViewValue !== emptyViewValue ? candidateViewValue : modelValue;
+        }
+      });
+    };
+  }])
+
+  .directive('uibTypeahead', function() {
+    return {
+      controller: 'UibTypeaheadController',
+      require: ['ngModel', '^?ngModelOptions', 'uibTypeahead'],
+      link: function(originalScope, element, attrs, ctrls) {
+        ctrls[2].init(ctrls[0], ctrls[1]);
+      }
+    };
+  })
+
+  .directive('uibTypeaheadPopup', function() {
+    return {
+      scope: {
+        matches: '=',
+        query: '=',
+        active: '=',
+        position: '&',
+        moveInProgress: '=',
+        select: '&'
+      },
+      replace: true,
+      templateUrl: function(element, attrs) {
+        return attrs.popupTemplateUrl || 'template/typeahead/typeahead-popup.html';
+      },
+      link: function(scope, element, attrs) {
+        scope.templateUrl = attrs.templateUrl;
+
+        scope.isOpen = function() {
+          return scope.matches.length > 0;
+        };
+
+        scope.isActive = function(matchIdx) {
+          return scope.active == matchIdx;
+        };
+
+        scope.selectActive = function(matchIdx) {
+          scope.active = matchIdx;
+        };
+
+        scope.selectMatch = function(activeIdx) {
+          scope.select({activeIdx:activeIdx});
+        };
+      }
+    };
+  })
+
+  .directive('uibTypeaheadMatch', ['$templateRequest', '$compile', '$parse', function($templateRequest, $compile, $parse) {
     return {
-      require: 'ngModel',
-      link: function(originalScope, element, attrs, modelCtrl) {
+      scope: {
+        index: '=',
+        match: '=',
+        query: '='
+      },
+      link:function(scope, element, attrs) {
+        var tplUrl = $parse(attrs.templateUrl)(scope.$parent) || 'template/typeahead/typeahead-match.html';
+        $templateRequest(tplUrl).then(function(tplContent) {
+          $compile(tplContent.trim())(scope, function(clonedElement) {
+            element.replaceWith(clonedElement);
+          });
+        });
+      }
+    };
+  }])
+
+  .filter('uibTypeaheadHighlight', ['$sce', '$injector', '$log', function($sce, $injector, $log) {
+    var isSanitizePresent;
+    isSanitizePresent = $injector.has('$sanitize');
 
+    function escapeRegexp(queryToEscape) {
+      // Regex: capture the whole query string and replace it with the string that will be used to match
+      // the results, for example if the capture is "a" the result will be \a
+      return queryToEscape.replace(/([.?*+^$[\]\\(){}|-])/g, '\\$1');
+    }
+
+    function containsHtml(matchItem) {
+      return /<.*>/g.test(matchItem);
+    }
+
+    return function(matchItem, query) {
+      if (!isSanitizePresent && containsHtml(matchItem)) {
+        $log.warn('Unsafe use of typeahead please use ngSanitize'); // Warn the user about the danger
+      }
+      matchItem = query? ('' + matchItem).replace(new RegExp(escapeRegexp(query), 'gi'), '<strong>$&</strong>') : matchItem; // Replaces the capture string with a the same string inside of a "strong" tag
+      if (!isSanitizePresent) {
+        matchItem = $sce.trustAsHtml(matchItem); // If $sanitize is not present we pack the string in a $sce object for the ng-bind-html directive
+      }
+      return matchItem;
+    };
+  }]);
+
+/* Deprecated typeahead below */
+  
+angular.module('ui.bootstrap.typeahead')
+  .value('$typeaheadSuppressWarning', false)
+  .service('typeaheadParser', ['$parse', 'uibTypeaheadParser', '$log', '$typeaheadSuppressWarning', function($parse, uibTypeaheadParser, $log, $typeaheadSuppressWarning) {
+    if (!$typeaheadSuppressWarning) {
+      $log.warn('typeaheadParser is now deprecated. Use uibTypeaheadParser instead.');
+    }
+
+    return uibTypeaheadParser;
+  }])
+
+  .directive('typeahead', ['$compile', '$parse', '$q', '$timeout', '$document', '$window', '$rootScope', '$uibPosition', 'typeaheadParser', '$log', '$typeaheadSuppressWarning',
+    function($compile, $parse, $q, $timeout, $document, $window, $rootScope, $position, typeaheadParser, $log, $typeaheadSuppressWarning) {
+    var HOT_KEYS = [9, 13, 27, 38, 40];
+    var eventDebounceTime = 200;
+    return {
+      require: ['ngModel', '^?ngModelOptions'],
+      link: function(originalScope, element, attrs, ctrls) {
+        if (!$typeaheadSuppressWarning) {
+          $log.warn('typeahead is now deprecated. Use uib-typeahead instead.');
+        }
+        var modelCtrl = ctrls[0];
+        var ngModelOptions = ctrls[1];
         //SUPPORTED ATTRIBUTES (OPTIONS)
 
         //minimal no of characters that needs to be entered before typeahead kicks-in
@@ -67,6 +581,8 @@ angular.module('ui.bootstrap.typeahead', ['ui.bootstrap.position', 'ui.bootstrap
 
         var appendToBody =  attrs.typeaheadAppendToBody ? originalScope.$eval(attrs.typeaheadAppendToBody) : false;
 
+        var appendToElementId =  attrs.typeaheadAppendToElementId || false;
+
         var focusFirst = originalScope.$eval(attrs.typeaheadFocusFirst) !== false;
 
         //If input matches an item of the list exactly, select it automatically
@@ -75,7 +591,16 @@ angular.module('ui.bootstrap.typeahead', ['ui.bootstrap.position', 'ui.bootstrap
         //INTERNAL VARIABLES
 
         //model setter executed upon match selection
-        var $setModelValue = $parse(attrs.ngModel).assign;
+        var parsedModel = $parse(attrs.ngModel);
+        var invokeModelSetter = $parse(attrs.ngModel + '($$$p)');
+        var $setModelValue = function(scope, newValue) {
+          if (angular.isFunction(parsedModel(originalScope)) &&
+            ngModelOptions && ngModelOptions.$options && ngModelOptions.$options.getterSetter) {
+            return invokeModelSetter(scope, {$$$p: newValue});
+          } else {
+            return parsedModel.assign(scope, newValue);
+          }
+        };
 
         //expressions used by typeahead
         var parserResult = typeaheadParser.parse(attrs.typeahead);
@@ -90,9 +615,10 @@ angular.module('ui.bootstrap.typeahead', ['ui.bootstrap.position', 'ui.bootstrap
         //create a child scope for the typeahead directive so we are not polluting original scope
         //with typeahead-specific data (matches, query etc.)
         var scope = originalScope.$new();
-        originalScope.$on('$destroy', function() {
-          scope.$destroy();
+        var offDestroy = originalScope.$on('$destroy', function() {
+			    scope.$destroy();
         });
+        scope.$on('$destroy', offDestroy);
 
         // WAI-ARIA
         var popupId = 'typeahead-' + scope.$id + '-' + Math.floor(Math.random() * 10000);
@@ -118,6 +644,10 @@ angular.module('ui.bootstrap.typeahead', ['ui.bootstrap.position', 'ui.bootstrap
           popUpEl.attr('template-url', attrs.typeaheadTemplateUrl);
         }
 
+        if (angular.isDefined(attrs.typeaheadPopupTemplateUrl)) {
+          popUpEl.attr('popup-template-url', attrs.typeaheadPopupTemplateUrl);
+        }
+
         var resetMatches = function() {
           scope.matches = [];
           scope.activeIdx = -1;
@@ -156,13 +686,12 @@ angular.module('ui.bootstrap.typeahead', ['ui.bootstrap.position', 'ui.bootstrap
             var onCurrentRequest = (inputValue === modelCtrl.$viewValue);
             if (onCurrentRequest && hasFocus) {
               if (matches && matches.length > 0) {
-
                 scope.activeIdx = focusFirst ? 0 : -1;
                 isNoResultsSetter(originalScope, false);
                 scope.matches.length = 0;
 
                 //transform labels
-                for(var i=0; i<matches.length; i++) {
+                for (var i = 0; i < matches.length; i++) {
                   locals[parserResult.itemName] = matches[i];
                   scope.matches.push({
                     id: getMatchId(i),
@@ -229,7 +758,6 @@ angular.module('ui.bootstrap.typeahead', ['ui.bootstrap.position', 'ui.bootstrap
             }
 
             scope.moveInProgress = false;
-            scope.$digest();
           }, eventDebounceTime);
         }
 
@@ -314,7 +842,7 @@ angular.module('ui.bootstrap.typeahead', ['ui.bootstrap.position', 'ui.bootstrap
             locals[parserResult.itemName] = undefined;
             emptyViewValue = parserResult.viewMapper(originalScope, locals);
 
-            return candidateViewValue!== emptyViewValue ? candidateViewValue : modelValue;
+            return candidateViewValue !== emptyViewValue ? candidateViewValue : modelValue;
           }
         });
 
@@ -340,12 +868,13 @@ angular.module('ui.bootstrap.typeahead', ['ui.bootstrap.position', 'ui.bootstrap
 
           //return focus to the input element if a match was selected via a mouse click event
           // use timeout to avoid $rootScope:inprog error
-          $timeout(function() { element[0].focus(); }, 0, false);
+          if (scope.$eval(attrs.typeaheadFocusOnSelect) !== false) {
+            $timeout(function() { element[0].focus(); }, 0, false);
+          }
         };
 
         //bind keyboard events: arrows up(38) / down(40), enter(13) and tab(9), esc(27)
         element.bind('keydown', function(evt) {
-
           //typeahead is open and an "interesting" key was pressed
           if (scope.matches.length === 0 || HOT_KEYS.indexOf(evt.which) === -1) {
             return;
@@ -363,16 +892,13 @@ angular.module('ui.bootstrap.typeahead', ['ui.bootstrap.position', 'ui.bootstrap
           if (evt.which === 40) {
             scope.activeIdx = (scope.activeIdx + 1) % scope.matches.length;
             scope.$digest();
-
           } else if (evt.which === 38) {
             scope.activeIdx = (scope.activeIdx > 0 ? scope.activeIdx : scope.matches.length) - 1;
             scope.$digest();
-
           } else if (evt.which === 13 || evt.which === 9) {
             scope.$apply(function () {
               scope.select(scope.activeIdx);
             });
-
           } else if (evt.which === 27) {
             evt.stopPropagation();
 
@@ -408,7 +934,7 @@ angular.module('ui.bootstrap.typeahead', ['ui.bootstrap.position', 'ui.bootstrap
 
         originalScope.$on('$destroy', function() {
           $document.unbind('click', dismissClickHandler);
-          if (appendToBody) {
+          if (appendToBody || appendToElementId) {
             $popup.remove();
           }
           // Prevent jQuery cache memory leak
@@ -419,17 +945,17 @@ angular.module('ui.bootstrap.typeahead', ['ui.bootstrap.position', 'ui.bootstrap
 
         if (appendToBody) {
           $document.find('body').append($popup);
+        } else if (appendToElementId !== false) {
+          angular.element($document[0].getElementById(appendToElementId)).append($popup);
         } else {
           element.after($popup);
         }
       }
     };
-
   }])
-
-  .directive('typeaheadPopup', function() {
+  
+  .directive('typeaheadPopup', ['$typeaheadSuppressWarning', '$log', function($typeaheadSuppressWarning, $log) {
     return {
-      restrict: 'EA',
       scope: {
         matches: '=',
         query: '=',
@@ -439,8 +965,14 @@ angular.module('ui.bootstrap.typeahead', ['ui.bootstrap.position', 'ui.bootstrap
         select: '&'
       },
       replace: true,
-      templateUrl: 'template/typeahead/typeahead-popup.html',
+      templateUrl: function(element, attrs) {
+        return attrs.popupTemplateUrl || 'template/typeahead/typeahead-popup.html';
+      },
       link: function(scope, element, attrs) {
+        
+        if (!$typeaheadSuppressWarning) {
+          $log.warn('typeahead-popup is now deprecated. Use uib-typeahead-popup instead.');
+        }
         scope.templateUrl = attrs.templateUrl;
 
         scope.isOpen = function() {
@@ -460,9 +992,9 @@ angular.module('ui.bootstrap.typeahead', ['ui.bootstrap.position', 'ui.bootstrap
         };
       }
     };
-  })
-
-  .directive('typeaheadMatch', ['$templateRequest', '$compile', '$parse', function($templateRequest, $compile, $parse) {
+  }])
+  
+  .directive('typeaheadMatch', ['$templateRequest', '$compile', '$parse', '$typeaheadSuppressWarning', '$log', function($templateRequest, $compile, $parse, $typeaheadSuppressWarning, $log) {
     return {
       restrict: 'EA',
       scope: {
@@ -471,6 +1003,10 @@ angular.module('ui.bootstrap.typeahead', ['ui.bootstrap.position', 'ui.bootstrap
         query: '='
       },
       link:function(scope, element, attrs) {
+        if (!$typeaheadSuppressWarning) {
+          $log.warn('typeahead-match is now deprecated. Use uib-typeahead-match instead.');
+        }
+
         var tplUrl = $parse(attrs.templateUrl)(scope.$parent) || 'template/typeahead/typeahead-match.html';
         $templateRequest(tplUrl).then(function(tplContent) {
           $compile(tplContent.trim())(scope, function(clonedElement) {
@@ -480,13 +1016,35 @@ angular.module('ui.bootstrap.typeahead', ['ui.bootstrap.position', 'ui.bootstrap
       }
     };
   }])
+  
+  .filter('typeaheadHighlight', ['$sce', '$injector', '$log', '$typeaheadSuppressWarning', function($sce, $injector, $log, $typeaheadSuppressWarning) {
+    var isSanitizePresent;
+    isSanitizePresent = $injector.has('$sanitize');
 
-  .filter('typeaheadHighlight', function() {
     function escapeRegexp(queryToEscape) {
+      // Regex: capture the whole query string and replace it with the string that will be used to match
+      // the results, for example if the capture is "a" the result will be \a
       return queryToEscape.replace(/([.?*+^$[\]\\(){}|-])/g, '\\$1');
     }
 
+    function containsHtml(matchItem) {
+      return /<.*>/g.test(matchItem);
+    }
+
     return function(matchItem, query) {
-      return query ? ('' + matchItem).replace(new RegExp(escapeRegexp(query), 'gi'), '<strong>$&</strong>') : matchItem;
+      if (!$typeaheadSuppressWarning) {
+        $log.warn('typeaheadHighlight is now deprecated. Use uibTypeaheadHighlight instead.');
+      }
+
+      if (!isSanitizePresent && containsHtml(matchItem)) {
+        $log.warn('Unsafe use of typeahead please use ngSanitize'); // Warn the user about the danger
+      }
+
+      matchItem = query? ('' + matchItem).replace(new RegExp(escapeRegexp(query), 'gi'), '<strong>$&</strong>') : matchItem; // Replaces the capture string with a the same string inside of a "strong" tag
+      if (!isSanitizePresent) {
+        matchItem = $sce.trustAsHtml(matchItem); // If $sanitize is not present we pack the string in a $sce object for the ng-bind-html directive
+      }
+
+      return matchItem;
     };
-  });
+  }]);
diff --git a/template/accordion/accordion-group.html b/template/accordion/accordion-group.html
index 0b6274e233..1dc4c8e785 100644
--- a/template/accordion/accordion-group.html
+++ b/template/accordion/accordion-group.html
@@ -1,10 +1,10 @@
-<div class="panel panel-default" ng-class="{'panel-open': isOpen}">
-  <div class="panel-heading">
+<div class="panel {{panelClass || 'panel-default'}}">
+  <div class="panel-heading" ng-keypress="toggleOpen($event)">
     <h4 class="panel-title">
-      <a href tabindex="0" class="accordion-toggle" ng-click="toggleOpen()" accordion-transclude="heading"><span ng-class="{'text-muted': isDisabled}">{{heading}}</span></a>
+      <a href tabindex="0" class="accordion-toggle" ng-click="toggleOpen()" uib-accordion-transclude="heading"><span ng-class="{'text-muted': isDisabled}">{{heading}}</span></a>
     </h4>
   </div>
-  <div class="panel-collapse collapse" collapse="!isOpen">
+  <div class="panel-collapse collapse" uib-collapse="!isOpen">
 	  <div class="panel-body" ng-transclude></div>
   </div>
 </div>
diff --git a/template/alert/alert.html b/template/alert/alert.html
index fc46b61cd3..0885587d98 100644
--- a/template/alert/alert.html
+++ b/template/alert/alert.html
@@ -1,5 +1,5 @@
 <div class="alert" ng-class="['alert-' + (type || 'warning'), closeable ? 'alert-dismissible' : null]" role="alert">
-    <button ng-show="closeable" type="button" class="close" ng-click="close($event)">
+    <button ng-show="closeable" type="button" class="close" ng-click="close({$event: $event})">
         <span aria-hidden="true">&times;</span>
         <span class="sr-only">Close</span>
     </button>
diff --git a/template/carousel/carousel.html b/template/carousel/carousel.html
index 6577b73f45..372c5473b7 100644
--- a/template/carousel/carousel.html
+++ b/template/carousel/carousel.html
@@ -1,8 +1,16 @@
 <div ng-mouseenter="pause()" ng-mouseleave="play()" class="carousel" ng-swipe-right="prev()" ng-swipe-left="next()">
-    <ol class="carousel-indicators" ng-show="slides.length > 1">
-        <li ng-repeat="slide in slides | orderBy:indexOfSlide track by $index" ng-class="{active: isActive(slide)}" ng-click="select(slide)"></li>
-    </ol>
-    <div class="carousel-inner" ng-transclude></div>
-    <a class="left carousel-control" ng-click="prev()" ng-show="slides.length > 1"><span class="glyphicon glyphicon-chevron-left"></span></a>
-    <a class="right carousel-control" ng-click="next()" ng-show="slides.length > 1"><span class="glyphicon glyphicon-chevron-right"></span></a>
-</div>
+  <div class="carousel-inner" ng-transclude></div>
+  <a role="button" href class="left carousel-control" ng-click="prev()" ng-show="slides.length > 1">
+    <span aria-hidden="true" class="glyphicon glyphicon-chevron-left"></span>
+    <span class="sr-only">previous</span>
+  </a>
+  <a role="button" href class="right carousel-control" ng-click="next()" ng-show="slides.length > 1">
+    <span aria-hidden="true" class="glyphicon glyphicon-chevron-right"></span>
+    <span class="sr-only">next</span>
+  </a>
+  <ol class="carousel-indicators" ng-show="slides.length > 1">
+    <li ng-repeat="slide in slides | orderBy:indexOfSlide track by $index" ng-class="{ active: isActive(slide) }" ng-click="select(slide)">
+      <span class="sr-only">slide {{ $index + 1 }} of {{ slides.length }}<span ng-if="isActive(slide)">, currently active</span></span>
+    </li>
+  </ol>
+</div>
\ No newline at end of file
diff --git a/template/datepicker/datepicker.html b/template/datepicker/datepicker.html
index 1ecb3c50b4..d515832e53 100644
--- a/template/datepicker/datepicker.html
+++ b/template/datepicker/datepicker.html
@@ -1,5 +1,5 @@
 <div ng-switch="datepickerMode" role="application" ng-keydown="keydown($event)">
-  <daypicker ng-switch-when="day" tabindex="0"></daypicker>
-  <monthpicker ng-switch-when="month" tabindex="0"></monthpicker>
-  <yearpicker ng-switch-when="year" tabindex="0"></yearpicker>
+  <uib-daypicker ng-switch-when="day" tabindex="0"></uib-daypicker>
+  <uib-monthpicker ng-switch-when="month" tabindex="0"></uib-monthpicker>
+  <uib-yearpicker ng-switch-when="year" tabindex="0"></uib-yearpicker>
 </div>
\ No newline at end of file
diff --git a/template/datepicker/popup.html b/template/datepicker/popup.html
index 13b29a155f..e3dda67f28 100644
--- a/template/datepicker/popup.html
+++ b/template/datepicker/popup.html
@@ -1,8 +1,8 @@
-<ul class="dropdown-menu" ng-if="isOpen" style="display: block" ng-style="{top: position.top+'px', left: position.left+'px'}" ng-keydown="keydown($event)" ng-click="$event.stopPropagation()">
+<ul class="dropdown-menu" dropdown-nested ng-if="isOpen" style="display: block" ng-style="{top: position.top+'px', left: position.left+'px'}" ng-keydown="keydown($event)" ng-click="$event.stopPropagation()">
 	<li ng-transclude></li>
 	<li ng-if="showButtonBar" style="padding:10px 9px 2px">
 		<span class="btn-group pull-left">
-			<button type="button" class="btn btn-sm btn-info" ng-click="select('today')">{{ getText('current') }}</button>
+			<button type="button" class="btn btn-sm btn-info" ng-click="select('today')" ng-disabled="isDisabled('today')">{{ getText('current') }}</button>
 			<button type="button" class="btn btn-sm btn-danger" ng-click="select(null)">{{ getText('clear') }}</button>
 		</span>
 		<button type="button" class="btn btn-sm btn-success pull-right" ng-click="close()">{{ getText('close') }}</button>
diff --git a/template/datepicker/year.html b/template/datepicker/year.html
index 1a885bfeda..8606f0d48a 100644
--- a/template/datepicker/year.html
+++ b/template/datepicker/year.html
@@ -8,7 +8,7 @@
   </thead>
   <tbody>
     <tr ng-repeat="row in rows track by $index">
-      <td ng-repeat="dt in row track by dt.date" class="text-center" role="gridcell" id="{{::dt.uid}}">
+      <td ng-repeat="dt in row track by dt.date" class="text-center" role="gridcell" id="{{::dt.uid}}" ng-class="::dt.customClass">
         <button type="button" style="min-width:100%;" class="btn btn-default" ng-class="{'btn-info': dt.selected, active: isActive(dt)}" ng-click="select(dt.date)" ng-disabled="dt.disabled" tabindex="-1"><span ng-class="::{'text-info': dt.current}">{{::dt.label}}</span></button>
       </td>
     </tr>
diff --git a/template/modal/backdrop.html b/template/modal/backdrop.html
index 5b6c49f201..214273e953 100644
--- a/template/modal/backdrop.html
+++ b/template/modal/backdrop.html
@@ -1,5 +1,4 @@
-<div class="modal-backdrop"
-     modal-animation-class="fade"
+<div uib-modal-animation-class="fade"
      modal-in-class="in"
      ng-style="{'z-index': 1040 + (index && 1 || 0) + index*10}"
 ></div>
diff --git a/template/modal/window.html b/template/modal/window.html
index 0bb4f964b6..ae17e400bb 100644
--- a/template/modal/window.html
+++ b/template/modal/window.html
@@ -1,6 +1,6 @@
 <div modal-render="{{$isRendered}}" tabindex="-1" role="dialog" class="modal"
-    modal-animation-class="fade"
+    uib-modal-animation-class="fade"
     modal-in-class="in"
-	ng-style="{'z-index': 1050 + index*10, display: 'block'}" ng-click="close($event)">
-    <div class="modal-dialog" ng-class="size ? 'modal-' + size : ''"><div class="modal-content" modal-transclude></div></div>
+    ng-style="{'z-index': 1050 + index*10, display: 'block'}">
+    <div class="modal-dialog" ng-class="size ? 'modal-' + size : ''"><div class="modal-content" uib-modal-transclude></div></div>
 </div>
diff --git a/template/pagination/pager.html b/template/pagination/pager.html
index ee7eff53ba..46f227faac 100644
--- a/template/pagination/pager.html
+++ b/template/pagination/pager.html
@@ -1,4 +1,4 @@
 <ul class="pager">
-  <li ng-class="{disabled: noPrevious(), previous: align}"><a href ng-click="selectPage(page - 1, $event)">{{::getText('previous')}}</a></li>
-  <li ng-class="{disabled: noNext(), next: align}"><a href ng-click="selectPage(page + 1, $event)">{{::getText('next')}}</a></li>
-</ul>
\ No newline at end of file
+  <li ng-class="{disabled: noPrevious()||ngDisabled, previous: align}"><a href ng-click="selectPage(page - 1, $event)">{{::getText('previous')}}</a></li>
+  <li ng-class="{disabled: noNext()||ngDisabled, next: align}"><a href ng-click="selectPage(page + 1, $event)">{{::getText('next')}}</a></li>
+</ul>
diff --git a/template/popover/popover-html.html b/template/popover/popover-html.html
index 0655274f35..3751ca820f 100644
--- a/template/popover/popover-html.html
+++ b/template/popover/popover-html.html
@@ -1,6 +1,5 @@
-<div class="popover"
-  tooltip-animation-class="fade"
-  tooltip-classes
+<div tooltip-animation-class="fade"
+  uib-tooltip-classes
   ng-class="{ in: isOpen() }">
   <div class="arrow"></div>
 
diff --git a/template/popover/popover-template.html b/template/popover/popover-template.html
index 91c12e143d..914d1d4f2d 100644
--- a/template/popover/popover-template.html
+++ b/template/popover/popover-template.html
@@ -1,13 +1,12 @@
-<div class="popover"
-  tooltip-animation-class="fade"
-  tooltip-classes
+<div tooltip-animation-class="fade"
+  uib-tooltip-classes
   ng-class="{ in: isOpen() }">
   <div class="arrow"></div>
 
   <div class="popover-inner">
       <h3 class="popover-title" ng-bind="title" ng-if="title"></h3>
       <div class="popover-content"
-        tooltip-template-transclude="contentExp()"
+        uib-tooltip-template-transclude="contentExp()"
         tooltip-template-transclude-scope="originScope()"></div>
   </div>
 </div>
diff --git a/template/popover/popover.html b/template/popover/popover.html
index fa536fd230..91a788388c 100644
--- a/template/popover/popover.html
+++ b/template/popover/popover.html
@@ -1,6 +1,5 @@
-<div class="popover"
-  tooltip-animation-class="fade"
-  tooltip-classes
+<div tooltip-animation-class="fade"
+  uib-tooltip-classes
   ng-class="{ in: isOpen() }">
   <div class="arrow"></div>
 
diff --git a/template/progressbar/bar.html b/template/progressbar/bar.html
index a507f8e240..b5b61e03a4 100644
--- a/template/progressbar/bar.html
+++ b/template/progressbar/bar.html
@@ -1 +1 @@
-<div class="progress-bar" ng-class="type && 'progress-bar-' + type" role="progressbar" aria-valuenow="{{value}}" aria-valuemin="0" aria-valuemax="{{max}}" ng-style="{width: (percent < 100 ? percent : 100) + '%'}" aria-valuetext="{{percent | number:0}}%" style="min-width: 0;" ng-transclude></div>
+<div class="progress-bar" ng-class="type && 'progress-bar-' + type" role="progressbar" aria-valuenow="{{value}}" aria-valuemin="0" aria-valuemax="{{max}}" ng-style="{width: (percent < 100 ? percent : 100) + '%'}" aria-valuetext="{{percent | number:0}}%" aria-labelledby="{{::title}}" style="min-width: 0;" ng-transclude></div>
diff --git a/template/progressbar/progress.html b/template/progressbar/progress.html
index 1968537006..38ee9f79aa 100644
--- a/template/progressbar/progress.html
+++ b/template/progressbar/progress.html
@@ -1 +1 @@
-<div class="progress" ng-transclude></div>
\ No newline at end of file
+<div class="progress" ng-transclude aria-labelledby="{{::title}}"></div>
\ No newline at end of file
diff --git a/template/progressbar/progressbar.html b/template/progressbar/progressbar.html
index 18abd71fba..dbfa5aaf13 100644
--- a/template/progressbar/progressbar.html
+++ b/template/progressbar/progressbar.html
@@ -1,3 +1,3 @@
 <div class="progress">
-  <div class="progress-bar" ng-class="type && 'progress-bar-' + type" role="progressbar" aria-valuenow="{{value}}" aria-valuemin="0" aria-valuemax="{{max}}" ng-style="{width: (percent < 100 ? percent : 100) + '%'}" aria-valuetext="{{percent | number:0}}%" style="min-width: 0;" ng-transclude></div>
+  <div class="progress-bar" ng-class="type && 'progress-bar-' + type" role="progressbar" aria-valuenow="{{value}}" aria-valuemin="0" aria-valuemax="{{max}}" ng-style="{width: (percent < 100 ? percent : 100) + '%'}" aria-valuetext="{{percent | number:0}}%" aria-labelledby="{{::title}}" style="min-width: 0;" ng-transclude></div>
 </div>
diff --git a/template/rating/rating.html b/template/rating/rating.html
index 601a80f31b..5543b03d9c 100644
--- a/template/rating/rating.html
+++ b/template/rating/rating.html
@@ -1,4 +1,4 @@
 <span ng-mouseleave="reset()" ng-keydown="onKeydown($event)" tabindex="0" role="slider" aria-valuemin="0" aria-valuemax="{{range.length}}" aria-valuenow="{{value}}">
     <span ng-repeat-start="r in range track by $index" class="sr-only">({{ $index < value ? '*' : ' ' }})</span>
-    <i ng-repeat-end ng-mouseenter="enter($index + 1)" ng-click="rate($index + 1)" class="glyphicon" ng-class="$index < value && (r.stateOn || 'glyphicon-star') || (r.stateOff || 'glyphicon-star-empty')" ng-attr-title="{{r.title}}" ></i>
+    <i ng-repeat-end ng-mouseenter="enter($index + 1)" ng-click="rate($index + 1)" class="glyphicon" ng-class="$index < value && (r.stateOn || 'glyphicon-star') || (r.stateOff || 'glyphicon-star-empty')" ng-attr-title="{{r.title}}" aria-valuetext="{{r.title}}"></i>
 </span>
diff --git a/template/tabs/tab.html b/template/tabs/tab.html
index d76dd67caf..0d8a42ed6b 100644
--- a/template/tabs/tab.html
+++ b/template/tabs/tab.html
@@ -1,3 +1,3 @@
 <li ng-class="{active: active, disabled: disabled}">
-  <a href ng-click="select()" tab-heading-transclude>{{heading}}</a>
+  <a href ng-click="select()" uib-tab-heading-transclude>{{heading}}</a>
 </li>
diff --git a/template/tabs/tabset.html b/template/tabs/tabset.html
index b953a49161..294c86a78b 100644
--- a/template/tabs/tabset.html
+++ b/template/tabs/tabset.html
@@ -4,7 +4,7 @@
     <div class="tab-pane" 
          ng-repeat="tab in tabs" 
          ng-class="{active: tab.active}"
-         tab-content-transclude="tab">
+         uib-tab-content-transclude="tab">
     </div>
   </div>
 </div>
diff --git a/template/timepicker/timepicker.html b/template/timepicker/timepicker.html
index f09963333d..d9f887f075 100644
--- a/template/timepicker/timepicker.html
+++ b/template/timepicker/timepicker.html
@@ -1,25 +1,25 @@
 <table>
   <tbody>
     <tr class="text-center" ng-show="::showSpinners">
-      <td><a ng-click="incrementHours()" ng-class="{disabled: noIncrementHours()}" class="btn btn-link"><span class="glyphicon glyphicon-chevron-up"></span></a></td>
+      <td><a ng-click="incrementHours()" ng-class="{disabled: noIncrementHours()}" class="btn btn-link" ng-disabled="noIncrementHours()" tabindex="{{::tabindex}}"><span class="glyphicon glyphicon-chevron-up"></span></a></td>
       <td>&nbsp;</td>
-      <td><a ng-click="incrementMinutes()" ng-class="{disabled: noIncrementMinutes()}" class="btn btn-link"><span class="glyphicon glyphicon-chevron-up"></span></a></td>
+      <td><a ng-click="incrementMinutes()" ng-class="{disabled: noIncrementMinutes()}" class="btn btn-link" ng-disabled="noIncrementMinutes()" tabindex="{{::tabindex}}"><span class="glyphicon glyphicon-chevron-up"></span></a></td>
       <td ng-show="showMeridian"></td>
     </tr>
     <tr>
       <td class="form-group" ng-class="{'has-error': invalidHours}">
-        <input style="width:50px;" type="text" ng-model="hours" ng-change="updateHours()" class="form-control text-center" ng-readonly="::readonlyInput" maxlength="2">
+        <input style="width:50px;" type="text" placeholder="HH" ng-model="hours" ng-change="updateHours()" class="form-control text-center" ng-readonly="::readonlyInput" maxlength="2" tabindex="{{::tabindex}}">
       </td>
       <td>:</td>
       <td class="form-group" ng-class="{'has-error': invalidMinutes}">
-        <input style="width:50px;" type="text" ng-model="minutes" ng-change="updateMinutes()" class="form-control text-center" ng-readonly="::readonlyInput" maxlength="2">
+        <input style="width:50px;" type="text" placeholder="MM" ng-model="minutes" ng-change="updateMinutes()" class="form-control text-center" ng-readonly="::readonlyInput" maxlength="2" tabindex="{{::tabindex}}">
       </td>
-      <td ng-show="showMeridian"><button type="button" ng-class="{disabled: noToggleMeridian()}" class="btn btn-default text-center" ng-click="toggleMeridian()">{{meridian}}</button></td>
+      <td ng-show="showMeridian"><button type="button" ng-class="{disabled: noToggleMeridian()}" class="btn btn-default text-center" ng-click="toggleMeridian()" ng-disabled="noToggleMeridian()" tabindex="{{::tabindex}}">{{meridian}}</button></td>
     </tr>
     <tr class="text-center" ng-show="::showSpinners">
-      <td><a ng-click="decrementHours()" ng-class="{disabled: noDecrementHours()}" class="btn btn-link"><span class="glyphicon glyphicon-chevron-down"></span></a></td>
+      <td><a ng-click="decrementHours()" ng-class="{disabled: noDecrementHours()}" class="btn btn-link" ng-disabled="noDecrementHours()" tabindex="{{::tabindex}}"><span class="glyphicon glyphicon-chevron-down"></span></a></td>
       <td>&nbsp;</td>
-      <td><a ng-click="decrementMinutes()" ng-class="{disabled: noDecrementMinutes()}" class="btn btn-link"><span class="glyphicon glyphicon-chevron-down"></span></a></td>
+      <td><a ng-click="decrementMinutes()" ng-class="{disabled: noDecrementMinutes()}" class="btn btn-link" ng-disabled="noDecrementMinutes()" tabindex="{{::tabindex}}"><span class="glyphicon glyphicon-chevron-down"></span></a></td>
       <td ng-show="showMeridian"></td>
     </tr>
   </tbody>
diff --git a/template/tooltip/tooltip-html-popup.html b/template/tooltip/tooltip-html-popup.html
index 23f60fb55d..dae22b7d4b 100644
--- a/template/tooltip/tooltip-html-popup.html
+++ b/template/tooltip/tooltip-html-popup.html
@@ -1,6 +1,6 @@
-<div class="tooltip"
+<div
   tooltip-animation-class="fade"
-  tooltip-classes
+  uib-tooltip-classes
   ng-class="{ in: isOpen() }">
   <div class="tooltip-arrow"></div>
   <div class="tooltip-inner" ng-bind-html="contentExp()"></div>
diff --git a/template/tooltip/tooltip-html-unsafe-popup.html b/template/tooltip/tooltip-html-unsafe-popup.html
deleted file mode 100644
index 34639f4cef..0000000000
--- a/template/tooltip/tooltip-html-unsafe-popup.html
+++ /dev/null
@@ -1,7 +0,0 @@
-<div class="tooltip"
-  tooltip-animation-class="fade"
-  tooltip-classes
-  ng-class="{ in: isOpen() }">
-  <div class="tooltip-arrow"></div>
-  <div class="tooltip-inner" bind-html-unsafe="content"></div>
-</div>
diff --git a/template/tooltip/tooltip-popup.html b/template/tooltip/tooltip-popup.html
index f43b9adad3..711fc561f1 100644
--- a/template/tooltip/tooltip-popup.html
+++ b/template/tooltip/tooltip-popup.html
@@ -1,6 +1,6 @@
-<div class="tooltip"
+<div
   tooltip-animation-class="fade"
-  tooltip-classes
+  uib-tooltip-classes
   ng-class="{ in: isOpen() }">
   <div class="tooltip-arrow"></div>
   <div class="tooltip-inner" ng-bind="content"></div>
diff --git a/template/tooltip/tooltip-template-popup.html b/template/tooltip/tooltip-template-popup.html
index ba4a9407e3..e83bff314e 100644
--- a/template/tooltip/tooltip-template-popup.html
+++ b/template/tooltip/tooltip-template-popup.html
@@ -1,9 +1,9 @@
-<div class="tooltip"
+<div
   tooltip-animation-class="fade"
-  tooltip-classes
+  uib-tooltip-classes
   ng-class="{ in: isOpen() }">
   <div class="tooltip-arrow"></div>
   <div class="tooltip-inner"
-    tooltip-template-transclude="contentExp()"
+    uib-tooltip-template-transclude="contentExp()"
     tooltip-template-transclude-scope="originScope()"></div>
 </div>
diff --git a/template/typeahead/typeahead-match.html b/template/typeahead/typeahead-match.html
index 0711518d9f..c64462bc48 100644
--- a/template/typeahead/typeahead-match.html
+++ b/template/typeahead/typeahead-match.html
@@ -1 +1 @@
-<a href tabindex="-1" bind-html-unsafe="match.label | typeaheadHighlight:query"></a>
+<a href tabindex="-1" ng-bind-html="match.label | uibTypeaheadHighlight:query"></a>
diff --git a/template/typeahead/typeahead-popup.html b/template/typeahead/typeahead-popup.html
index 43693ac35e..20a362bd6c 100644
--- a/template/typeahead/typeahead-popup.html
+++ b/template/typeahead/typeahead-popup.html
@@ -1,5 +1,5 @@
 <ul class="dropdown-menu" ng-show="isOpen() && !moveInProgress" ng-style="{top: position().top+'px', left: position().left+'px'}" style="display: block;" role="listbox" aria-hidden="{{!isOpen()}}">
     <li ng-repeat="match in matches track by $index" ng-class="{active: isActive($index) }" ng-mouseenter="selectActive($index)" ng-click="selectMatch($index)" role="option" id="{{::match.id}}">
-        <div typeahead-match index="$index" match="match" query="query" template-url="templateUrl"></div>
+        <div uib-typeahead-match index="$index" match="match" query="query" template-url="templateUrl"></div>
     </li>
 </ul>