chore(release): cutting 1.0.0rc9 eggplant-teleportation

docs(changelog): release notes for 1.0.0rc9 eggplant-teleportation
fix(jqLite): .data()/.bind() memory leak
2012-05-14 22:13:15 -07:00 · 2012-05-14 22:00:18 -07:00 · 2012-05-14 21:56:22 -07:00 · 2012-05-14 21:56:22 -07:00 · 2012-05-14 15:12:51 -07:00 · 2012-05-14 14:45:56 -07:00
739 changed files with 53752 additions and 36463 deletions
@@ -1,5 +1,755 @@
- The Latest Stable Release: <a href="#0.9.19">0.9.19 canine-psychokinesis</a>
- The Latest Unstable Release: <a href="#0.10.4">0.10.4 human-torch</a>
+<a name="1.0.0rc9"></a>
+# 1.0.0rc9 eggplant-teleportation (2012-05-14)
+
+
+## Bug Fixes
+
+- **$location:**
+  - single quote in url causes infinite digest in FF
+    ([679cb8a7](https://github.com/angular/angular.js/commit/679cb8a74a684454fe38fa9e1ddad396bb598c52),
+     [#920](https://github.com/angular/angular.js/issues/920))
+  - support urls with any protocol
+    ([c1533ef5](https://github.com/angular/angular.js/commit/c1533ef5762199bea18d3bf3bcba7fcf89272931))
+  - don't use buggy history.pushState api on Android < 4
+    ([7b739c97](https://github.com/angular/angular.js/commit/7b739c97028be2a5d5aef679ef1f8064cd10d386),
+     [#904](https://github.com/angular/angular.js/issues/904))
+  - work around Opera's base href issue
+    ([b99f65f6](https://github.com/angular/angular.js/commit/b99f65f64d1e54315b3210d78a9a9adbcf34c96c),
+     [#938](https://github.com/angular/angular.js/issues/938))
+- **docs app:** get docs app to work on IE8
+  ([aa025348](https://github.com/angular/angular.js/commit/aa02534865c8e43dcef9e218b12c8c717c837205))
+
+
+
+<a name="1.0.0rc8"></a>
+# 1.0.0rc8 blooming-touch (2012-05-06)
+
+## Features
+
+- **jqLite:** support data() getter and data(obj) setter
+  ([ee579a07](https://github.com/angular/angular.js/commit/ee579a071a91cbade729d3cb97e097568e71f8fc))
+
+
+## Bug Fixes
+
+- **$compile:**
+  - have $observe return registration function
+    ([7f0eb151](https://github.com/angular/angular.js/commit/7f0eb1516165fcb73f1c9953018b7c9b70acfae1))
+  - ignore ws when checking if template has single root
+    ([9c0418cf](https://github.com/angular/angular.js/commit/9c0418cf1abd609bf0ffbe71fbdfa75905cf8e0f),
+     [#910](https://github.com/angular/angular.js/issues/910))
+  - fix replaceWith
+    ([b431ee38](https://github.com/angular/angular.js/commit/b431ee38509724ba9098a7be7a8d6c5dcded4fe9))
+  - attach scope to the directive element when templateUrl and replace=true
+    ([705f4bbf](https://github.com/angular/angular.js/commit/705f4bbf115d2408e33b25f56edbf1f383aabb82))
+  - prevent duplicate directive controller instantiation
+    ([843f762c](https://github.com/angular/angular.js/commit/843f762c573e38a044f920c5575c6feb46bc7226),
+     [#876](https://github.com/angular/angular.js/issues/876))
+- **$parse:** support methods on falsy primitive types
+  ([499a76a0](https://github.com/angular/angular.js/commit/499a76a08cc7a7604dab5e1dd9cca675b8e29333))
+- **ngModel:** use keydown/change events on IE9 instead of input
+  ([49dfdf8f](https://github.com/angular/angular.js/commit/49dfdf8f0238ef8c473fcb44694f6b5696ecde70),
+   [#879](https://github.com/angular/angular.js/issues/879))
+- **ngSrc,ngHref:** binding should set element prop as well as attr
+  ([b24cc63b](https://github.com/angular/angular.js/commit/b24cc63bcbd45741d21757653f05d54db09e0f20),
+   [#935](https://github.com/angular/angular.js/issues/935))
+- **scenario:** make browser().location() working if ng-app on other than <html>
+  ([5bcb749a](https://github.com/angular/angular.js/commit/5bcb749abb91dba0847cb9bc900777a67fd55aa8))
+- **select:** don't interfere with selection if not databound
+  ([3bd3cc57](https://github.com/angular/angular.js/commit/3bd3cc571dcd721f9d71f971aefee23115a5e458),
+   [#926](https://github.com/angular/angular.js/issues/926))
+
+
+## Docs
+
+- Brand new bootstrap-based skin for api docs: <http://docs.angularjs.org/>
+
+
+<a name="1.0.0rc7"></a>
+# 1.0.0rc7 rc-generation (2012-04-30)
+
+## Features
+
+- **$parse:** CSP compatibility
+  ([2b87c814](https://github.com/angular/angular.js/commit/2b87c814ab70eaaff6359ce1a118f348c8bd2197),
+   [#893](https://github.com/angular/angular.js/issues/893))
+
+
+## Bug Fixes
+
+- **jqlite:**
+  - correctly reset event properties in IE8
+  ([a18926f9](https://github.com/angular/angular.js/commit/a18926f986166048a21097636f03ab29f107b154))
+  - mouseenter on FF no longer throws exceptions
+  ([43d15f83](https://github.com/angular/angular.js/commit/43d15f830f9d419c41c41f0682e47e86839e3917))
+
+
+## Docs
+
+- Tutorial has been finally updated to AngularJS v1.0! Check it out and provide feedback to make it
+  even better: <http://docs.angularjs.org/tutorial>
+- <http://docs-next.angularjs.org> now redirects to <http://docs.angularjs.org>
+
+
+
+<a name="v1.0.0rc6"></a>
+# v1.0.0rc6 runny-nose (2012-04-20)
+
+
+## Bug Fixes
+
+- **select:** properly handle empty & unknown options without ngOptions
+  ([904b69c7](https://github.com/angular/angular.js/commit/904b69c745ea4afc1d6ecd2a5f3138c6f947b157))
+- **compiler:** reading comment throws error in ie
+  ([46bb08a9](https://github.com/angular/angular.js/commit/46bb08a9d0780fafef6dc5c1140c71912462887a))
+- **document:** accidental clobbering of document.getAttribute
+  ([eafe15f5](https://github.com/angular/angular.js/commit/eafe15f54c686d5c83f777fd319f4c568e209432),
+   [#877](https://github.com/angular/angular.js/issues/877))
+- **script:** Incorrectly reading script text on ie
+  ([94dd6857](https://github.com/angular/angular.js/commit/94dd68570952f6f31abfa351b1159afcd3588a57))
+
+
+## Features
+
+- **$resource:** support HTTP PATCH method
+  ([e61fd1b4](https://github.com/angular/angular.js/commit/e61fd1b43a55496c11c63da7ca2fc05b88d44043),
+   [#887](https://github.com/angular/angular.js/issues/887))
+- **jquery:** jquery 1.7.2 support
+  ([8ebe5ccd](https://github.com/angular/angular.js/commit/8ebe5ccd9ace7807bedc7317d605370fe82b773d))
+
+
+
+<a name="1.0.0rc5"></a>
+# 1.0.0rc5 reality-distortion (2012-04-12)
+
+
+## Bug Fixes
+
+- **$location:** properly rewrite urls in html5 mode with base url set + don't rewrite links to
+  different base paths
+  ([6d7e7fde](https://github.com/angular/angular.js/commit/6d7e7fdea6c3d6551ff40c150aa42e1375d2cb5f),
+   [0a5050eb](https://github.com/angular/angular.js/commit/0a5050eb3c1f1ed84134f23a44b97a7261114060))
+- **e2eRunner:** $browser.location should delegate to apps $location
+  ([df72852f](https://github.com/angular/angular.js/commit/df72852f3496d7640bb4f70837338e464b7ed69f))
+- **input.radio:** support 2-way binding in a repeater
+  ([93d62860](https://github.com/angular/angular.js/commit/93d62860e988a09fb64e594f50f6cd55a1fc5748),
+   [#869](https://github.com/angular/angular.js/issues/869))
+- **ngBindHtml:** clear contents when model is falsy
+  ([10daefc6](https://github.com/angular/angular.js/commit/10daefc6f466a21d9418437666461c80cf24fcfe),
+   [#864](https://github.com/angular/angular.js/issues/864))
+- lots of doc fixes
+
+
+## Features
+
+- **$http:** expose the defaults config as $http.defaults
+  ([dceafd32](https://github.com/angular/angular.js/commit/dceafd32ee140c8af5c7a0ca6cb808395fffeed3))
+- **docs:** steps 0-4 of the Tutorial have been updated and improved
+
+
+## Breaking Changes
+
+- `ng-ext-link` directive was removed because it's unnecessary
+  ([6d7e7fde](https://github.com/angular/angular.js/commit/6d7e7fdea6c3d6551ff40c150aa42e1375d2cb5f))
+
+    apps that relied on ng-ext-link should simply replace it with `target="_self"`
+
+- `$browser.addCss` was removed - it was never meant to be a public api
+  ([13d5528a](https://github.com/angular/angular.js/commit/13d5528a5f5a2f0feee5c742788a914d2371841e))
+
+    apps the depend on this functionality should write a simple utility function specific to the app
+    (see this diff for hints).
+
+- `$browser.addJs` method was removed - it was never meant to be a public api
+  ([fbaa1968](https://github.com/angular/angular.js/commit/fbaa1968b7c596ccb63ea8b4be1d3bd92eda50d8))
+
+    apps that depended on this functionality should either use many of the existing script loaders or
+    create a simple helper method specific to the app.
+
+- `$sanitize` service, `ngBindHtml` directive and `linky` filter were moved to the `ngSanitize` module
+  ([5bcd7198](https://github.com/angular/angular.js/commit/5bcd7198664dca2bf85ddf8b3a89f417cd4e4796))
+
+    apps that depend on any of these will need to load `angular-sanitize.js` and include `ngSanitize`
+    in their dependency list: `var myApp = angular.module('myApp', ['ngSanitize']);`
+
+
+
+
+
+
+<a name="1.0.0rc4"></a>
+# 1.0.0rc4 insomnia-induction (2012-04-05)
+
+
+## Bug Fixes
+
+- **$compile:** relax the restriction that directives can not add siblings
+  ([7e86eacf](https://github.com/angular/angular.js/commit/7e86eacf301934335c22908ec6dbd1a083d88fab))
+- **$location:** search setter should not double-encode the value
+  ([59fa40ec](https://github.com/angular/angular.js/commit/59fa40ec0e851759d35fb0ea5fd01019d1403049),
+   [#751](https://github.com/angular/angular.js/issues/751))
+- **$q:** $q.reject should forward callbacks if missing
+  ([c0b78478](https://github.com/angular/angular.js/commit/c0b78478a0e64942a69aba7c1bfa4eb01c0e9a5e),
+   [#845](https://github.com/angular/angular.js/issues/845))
+- **build:** move `'use strict';` flag into the angular closure
+  ([637817e3](https://github.com/angular/angular.js/commit/637817e3ba48d149e7a9628533d21e81c650d988))
+- **Directives**:
+  - **ngModel:** update model on each key stroke (revert ngModelInstant)
+    ([06d09550](https://github.com/angular/angular.js/commit/06d0955074f79de553cc34fbf945045dc458e064))
+  - **booleanAttrs:** always convert the model to boolean before setting the element property
+    ([dcb8e076](https://github.com/angular/angular.js/commit/dcb8e0767fbf0a7a55f3b0045fd01b2532ea5441))
+  - **form:** preperly clean up when invalid widget is removed
+    ([21b77ad5](https://github.com/angular/angular.js/commit/21b77ad5c231ab0e05eb89f22005f7ed8d40a6c1))
+  - **ngHref:** copy even if no binding
+    ([2f5dba48](https://github.com/angular/angular.js/commit/2f5dba488e855bcdbb9304aa809efcb9de7b43e9))
+  - **ngInclude:** fire $includeContentLoaded on proper (child) scope
+    ([199ac269](https://github.com/angular/angular.js/commit/199ac269869a57bb63d60c9b3f510d546bf0c9b2))
+
+
+## Features
+
+- **$http:** add `withCredentials` config option
+  ([86182a94](https://github.com/angular/angular.js/commit/86182a9415b9209662b16c25c180b958ba7e6cf9))
+- **$route:** allow chaining of whens and otherwise
+  ([15ecc6f3](https://github.com/angular/angular.js/commit/15ecc6f3668885ebc5c7130dd34e00059ddf79ae))
+- **ngInclude:** allow ngInclude as css class
+  ([428f2b56](https://github.com/angular/angular.js/commit/428f2b563663315df4f235ca19cef4bdcf82e2ab))
+
+
+## Docs
+- reintroduced the tutorial docs - currently only steps 0-3 are up to date and the code is not split
+  up into step specific commits yet. See
+  [this branch](https://github.com/angular/angular-phonecat/tree/v1.0-update) instead.
+- various other doc fixes
+
+
+## Breaking Changes
+
+We removed two useless features:
+
+- $routeProvider.when used to return the route definition object but now it returns self
+  ([15ecc6f3](https://github.com/angular/angular.js/commit/15ecc6f3668885ebc5c7130dd34e00059ddf79ae))
+- ngInclude does not have scope attribute anymore
+  ([5f70d615](https://github.com/angular/angular.js/commit/5f70d615a5f7e102424c6adc15d7a6f697870b6e))
+- ngModelInstant directive is no more and ngModel behaves just as ngModelInstant used to. This
+  doesn't really break anything, just remember to remove all ngModelInstant references from your
+  template as they serve no purpose now.
+  ([06d09550](https://github.com/angular/angular.js/commit/06d0955074f79de553cc34fbf945045dc458e064))
+
+
+
+<a name="1.0.0rc3"></a>
+# 1.0.0rc3 barefoot-telepathy (2012-03-29)
+
+
+## Bug Fixes
+
+- **$compile:**
+  - properly clone attr.$observers in ng-repeat
+    ([f2106692](https://github.com/angular/angular.js/commit/f2106692b1ebf00aa5f8b2accd75f014b6cd4faa))
+  - create new (isolate) scopes for directives on root elements
+    ([5390fb37](https://github.com/angular/angular.js/commit/5390fb37d2c01937922613fc57df4986af521787),
+      [#817](https://github.com/angular/angular.js/issues/817))
+- **angular.forEach:** should ignore prototypically inherited properties
+  ([8d7e6948](https://github.com/angular/angular.js/commit/8d7e6948496ff26ef1da8854ba02fcb8eebfed61),
+   [#813](https://github.com/angular/angular.js/issues/813))
+- **initialization:** use jQuery#ready for initialization if available
+  ([cb2ad9ab](https://github.com/angular/angular.js/commit/cb2ad9abf24e6f855cc749efe3155bd7987ece9d),
+   [#818](https://github.com/angular/angular.js/issues/818))
+- **$q:** resolve all of nothing to nothing
+  ([ac75079e](https://github.com/angular/angular.js/commit/ac75079e2113949d5d64adbcf23d56f3cf295d41))
+
+
+## Features
+
+- **$compile:** do not interpolate boolean attribute directives, rather evaluate them
+  ([a08cbc02](https://github.com/angular/angular.js/commit/a08cbc02e78e789a66e9af771c410e8ad1646e25))
+- **$controller:** support controller registration via $controllerProvider
+  ([d54dfecb](https://github.com/angular/angular.js/commit/d54dfecb00fba41455536c5ddd55310592fdaf84))
+- **$http:**
+  - make the `transformRequest` and `transformResponse` default to an array
+    ([a8a750ab](https://github.com/angular/angular.js/commit/a8a750ab05bdff73ba3af0b98f3f284ff8d1e743))
+  - added `params` parameter
+    ([73c85930](https://github.com/angular/angular.js/commit/73c8593077155a9f2e8ef42efd4c497eba0bef4f))
+- **TzDate:** add support for toISOString method
+  ([da9f4dfc](https://github.com/angular/angular.js/commit/da9f4dfcf4f3d0c21821d8474ac0bb19a3c51415))
+- **jqLite:** make injector() and scope() work with the document object
+  ([5fdab52d](https://github.com/angular/angular.js/commit/5fdab52dd7c269f99839f4fa6b5854d9548269fa))
+- **ngValue:** directive that allows radio inputs to have non string values
+  ([09e175f0](https://github.com/angular/angular.js/commit/09e175f02cca0f4a295fd0c9b980cd8f432e722b),
+   [#816](https://github.com/angular/angular.js/issues/816))
+
+
+## Breaking Changes
+
+- `$resource`, `$cookies` and `$cookieStore` services are now distributed as separate modules, see
+  `angular-resource.js` and `angular-cookies.js`.
+  ([798bca62](https://github.com/angular/angular.js/commit/798bca62c6f64775b85deda3713e7b6bcc7a4b4d),
+   [7b22d59b](https://github.com/angular/angular.js/commit/7b22d59b4a16d5c50c2eee054178ba17f8038880))
+- angular.fromJson doesn't deserialize date strings into date objects.
+  ([ac4318a2](https://github.com/angular/angular.js/commit/ac4318a2fa5c6d306dbc19466246292a81767fca))
+- angular.toJson always use native JSON.parse and JSON.stringify - this might break code that
+  consumes the output in whitespace-sensitive way
+  ([35125d25](https://github.com/angular/angular.js/commit/35125d25137ac2da13ed1ca3e652ec8f2c945053))
+- IE7 and older have are now required to polyfill the JSON global object
+  ([87f5c6e5](https://github.com/angular/angular.js/commit/87f5c6e5b716100e203ec59c5874c3e927f83fa0))
+- boolean attr directives (ng-disabled, ng-required, etc) are evaluated rather than interpolated
+  ([a08cbc02](https://github.com/angular/angular.js/commit/a08cbc02e78e789a66e9af771c410e8ad1646e25))
+- `ng-bind-attr` directive removed
+  ([55027132](https://github.com/angular/angular.js/commit/55027132f3d57e5dcf94683e6e6bd7b0aae0087d))
+- any app that depends on $sniffer service should use Modernizr instead
+  ([aaedefb9](https://github.com/angular/angular.js/commit/aaedefb92e6bec6626e173e5155072c91471596a))
+
+
+
+<a name="1.0.0rc2"></a>
+# 1.0.0rc2 silence-absorption (2012-03-20)
+
+## Features
+
+- **$route:** when matching consider trailing slash as optional
+  ([a4fe51da](https://github.com/angular/angular.js/commit/a4fe51da3ba0dc297ecd389e230d6664f250c9a6))
+- **jqLite:** add .controller() method
+  ([6c5a05ad](https://github.com/angular/angular.js/commit/6c5a05ad49a1e083570c3dfe331403398f899dbe))
+- **scope.$eval:** allow passing locals to the expression
+  ([192ff61f](https://github.com/angular/angular.js/commit/192ff61f5d61899e667c6dbce4d3e6e399429d8b))
+- **input[type=radio]:** allow the value attribute to be interpolated
+  ([ade6c452](https://github.com/angular/angular.js/commit/ade6c452753145c84884d17027a7865bf4b34b0c))
+
+
+## Bug Fixes
+
+- **$http:** don't send Content-Type header when no data
+  ([1a5bebd9](https://github.com/angular/angular.js/commit/1a5bebd927ecd22f9c34617642fdf58fe3f62efb),
+   [#749](https://github.com/angular/angular.js/issues/749))
+- **$resource:** support escaping of ':' in resource url
+  ([6d6f8753](https://github.com/angular/angular.js/commit/6d6f875345e01f2c6c63ef95164f6f39e923da15))
+- **$compile:**
+  - don't touch static element attributes
+    ([9cb2195e](https://github.com/angular/angular.js/commit/9cb2195e61a78e99020ec19d687a221ca88b5900))
+  - merge interpolated css class when replacing an element
+    ([f49eaf8b](https://github.com/angular/angular.js/commit/f49eaf8bf2df5f4e0e82d6c89e849a4f82c8d414))
+  - allow transclusion of root elements
+    ([9918b748](https://github.com/angular/angular.js/commit/9918b748be01266eb10db39d51b4d3098d54ab66))
+- **$log:** avoid console.log.apply calls in IE
+  ([15213ec2](https://github.com/angular/angular.js/commit/15213ec212769837cb2b7e781ffc5bfd598d27ca),
+    [#805](https://github.com/angular/angular.js/issues/805))
+- **json:** added support for iso8061 timezone
+  ([5ac14f63](https://github.com/angular/angular.js/commit/5ac14f633a69f49973b5512780c6ec7752405967))
+- **e2e runner:** fix typo that caused errors on IE8
+  ([ee5a5352](https://github.com/angular/angular.js/commit/ee5a5352fd4b94cedee6ef20d4bf2d43ce77e00b),
+   [#806](https://github.com/angular/angular.js/issues/806))
+- **directives:**
+  - **select:** multiselect failes to update view on selection insert
+    ([6ecac8e7](https://github.com/angular/angular.js/commit/6ecac8e71a84792a434d21db2c245b3648c55f18))
+  - **ngForm:** alias name||ngForm
+    ([823adb23](https://github.com/angular/angular.js/commit/823adb231995e917bc060bfa49453e2a96bac2b6))
+  - **ngView:** publish the controller
+    ([21e74c2d](https://github.com/angular/angular.js/commit/21e74c2d2e8e985b23711785287feb59965cbd90))
+  - **ngRepeat:** correct variable reference in error message
+    ([935c1018](https://github.com/angular/angular.js/commit/935c1018da05dbf3124b2dd33619c4a3c82d7a2a))
+  - various doc fixes (some contributed by Daniel Zen)
+
+
+
+<a name="1.0.0rc1"></a>
+# 1.0.0rc1 moiré-vision (2012-03-13)
+
+## $compile rewrite
+
+The compiler was completely rewritten from scratch using ideas from this
+[design document](https://docs.google.com/document/d/1PNh4lxlYpSRK2RhEwD4paJLMwdcnddcYJn3rsDsdayc/edit).
+Please check out the [$compile] and
+[$compileProvider.directive](http://docs-next.angularjs.org/api/angular.module.ng.$compileProvider.directive)
+docs. The biggest improvements and changes are listed below.
+
+- the compiler now transparently supports several directive syntaxes. For example while before there
+  was just one way to use `ng:include` directive: `<ng:include src="someSrc"></ng:include>`. The new
+  compiler treats all of the following as equivalent:
+
+  - `<ng:include src="someSrc"></ng:include>`
+  - `<ng-include src="someSrc"></ng-include>`
+  - `<x-ng-include src="someSrc"></x-ng-include>`
+  - `<div ng:include src="someSrc"></div>`
+  - `<div ng-include src="someSrc"></div>`
+  - `<div data-ng-include src="someSrc"></div>`
+  - `<div ng:include="someSrc"></div>`
+  - `<div ng-include="someSrc"></div>`
+  - `<div data-ng-include="someSrc"></div>`
+  - `<div class="ng-include: someSrc"></div>`
+
+  This will give template creators great flexibility to consider the tradeoffs between html code
+  validity and code conciseness and pick the syntax that works the best for them.
+
+- we are switching all of our code/docs/examples to use `ng-foo` directive name style instead of
+  `ng:foo`. The new compiler doesn't distinguish between these and other name styles (all of them
+  are [equally supported](http://docs-next.angularjs.org/api/angular.module.ng.$compileProvider.directive)),
+  the main difference is that `ng-foo` is easier to select with css selectors. Check out the
+  [Internet Explorer Compatibility](http://docs-next.angularjs.org/guide/ie)
+  doc to learn about various IE-related requirements for different directive naming styles.
+
+- `angular.directive`, `angular.widget`, `angular.attrWidget` were merged into a single concept: a
+  `directive` which is registered via
+  [myModule.directive](http://docs-next.angularjs.org/api/angular.Module#directive) or
+  [$compileProvider.directive](http://docs-next.angularjs.org/api/angular.module.ng.$compileProvider.directive).
+  You can control execution priority of multiple directives on the same element (previously the main
+  difference between a attribute widget and a directive) via a directive priority setting.
+
+- previously the linking functions of directives were called top to bottom following the DOM tree,
+  to enable a linking fn to work child DOM nodes that were already processed by child linking fns
+  the order was changed as follows: compile functions run top to bottom following the DOM tree, but
+  linking functions run bottom-up following the DOM tree. In some rare cases it is desirable for
+  linking fns to be called top to bottom and for these it is possible to register "prelinking"
+  functions (check out
+  [the docs](http://docs-next.angularjs.org/api/angular.module.ng.$compileProvider.directive)
+  for the return value of the compile function).
+
+- `angular.markup` and `angular.attrMarkup` were replaced with interpolation via `$interpolate`
+  service.
+
+  - In the past `{{foo}}` markup was getting translated to `<span ng-bind="foo"></span>` during the
+    early stage of template compilation. Addition of this extra node was in some cases undesirable
+    and caused problems. The new compiler with the help of the $interpolate service removes the need
+    for these artificial nodes.
+
+  - As a side-effect of not using artificial nodes available for all bindings, the `html` filter
+    which used to innerHTML (sanitized) html into the artificial node was converted into a directive.
+    So instead of `{{ someRawHtml | html }}` use `<div ng-bind-html="someRawHtml"></div>` and
+    instead of `{{ someRawHtml | html:"unsafe" }}` use `<div ng-bind-html-unsafe="someRawHtml"></div>`.
+    Please check out the
+    [ng-bind-html](http://docs-next.angularjs.org/api/angular.module.ng.$compileProvider.directive.ngBindHtml)
+    and
+    [ng-bind-html-unsafe](http://docs-next.angularjs.org/api/angular.module.ng.$compileProvider.directive.ngBindHtmlUnsafe)
+    directive docs.
+
+  - Custom markup has been used by developers only to switch from `{{ }}` markup to `(( ))` or
+    something similar in order to avoid conflicts with server-side templating libraries. We made it
+    easier to do this kind of customization by making the start and end symbol of the interpolation
+    configurable via [$interpolateProvider](http://docs-next.angularjs.org/api/angular.module.ng.$interpolateProvider).
+
+- [template loader](http://docs-next.angularjs.org/api/angular.module.ng.$compileProvider.directive.script)
+  loads template fragments from script elements and populates the $templateCache with them. Templates
+  loaded in this way can be then used with `ng-include`, `ng-view` as well as directive templates
+  (see the `templateUrl` property of the
+  [directive config object](http://docs-next.angularjs.org/api/angular.module.ng.$compileProvider.directive)).
+
+
+## Forms / input controls / two-way data binding
+
+The implementation of forms and input bindings was modified to address issues around composability,
+ease of adding custom validation and formatting. Please check out the
+[forms dev guide article](http://docs-next.angularjs.org/guide/dev_guide.forms) to learn about forms,
+form control bindings and input validation. The biggest changes are listed below.
+
+- any directive can add formatter/parser (validators, convertors) to an input type. This allows
+  better composability of input types with custom validators and formatters. So instead of creating
+  new custom input type for everything, it's now possible to take existing input type and add an
+  additional formatter and/or validator to it via a custom directive.
+
+- inputs propagates changes only on the blur event by default (use new `ng-model-instant` directive
+  if you want to propagate changes on each keystroke).
+
+- no more custom input types, use directives to customize existing types.
+
+- removed $formFactory.
+
+- removed parallel scope hierarchy (forms, widgets).
+
+- removed `list` input type (use `ng-list` directive instead).
+
+- removed integer input type.
+
+
+## Controller-scope separation
+
+Controllers are now standalone objects, created using the "new" operator, and not mixed with scope
+object anymore. This addresses many issues including:
+[#321](https://github.com/angular/angular.js/issues/321) and
+[#425](https://github.com/angular/angular.js/issues/425).
+
+The [design doc](https://docs.google.com/document/pub?id=1SsgVj17ec6tnZEX3ugsvg0rVVR11wTso5Md-RdEmC0k)
+explains the reasoning for this major change and how it solves many issues.
+
+### Before:
+
+<pre>
+function MyCtrl() {
+  var self = this;
+
+  this.model = 'some model of any type';
+
+  this.fnUsedFromTemplate = function() {
+    someApiThatTakesCallback(function callbackFn() {
+      self.model = 'updatedModel';
+    });
+  };
+}
+</pre>
+
+### After:
+
+<pre>
+function MyCtrl($scope) {
+  $scope.model = 'some model of any type';
+
+  $scope.fnUsedFromTemplate = function() {
+    someApiThatTakesCallback(function() {
+      $scope.model = 'updatedModel';
+    });
+  }
+}
+</pre>
+
+Temporary backwards compatibility: Load the following module in your app to recreate the previous
+behavior and migrate your controllers one at a time: <https://gist.github.com/1649788>
+
+
+## $route service changes
+
+- As advertised in the past we moved the $route configuration from the run phase of the application
+  to the config phase. This means that instead of defining routes via `$route.when`/`$route.otherwise`
+  you should use `$routeProvider.when`/`$routeProvider.otherwise` instead.
+
+- route scope is now being created by the `ng-view` rather than by `$route`, this resolved many
+  issues we've previously faced. For more info, read the
+  [commit message](https://github.com/angular/angular.js/commit/60743fc52aea9eabee58258a31f4ba465013cb4e).
+
+- removed `$route.parent()` - it's unnecessary because the scope is properly created in the scope
+  hierarchy by `ng-view`.
+
+- new `$viewContentLoaded` and `$includeContentLoaded` events which directives can use to be
+  notified when a template content is (re)loaded.
+
+- `ng-view` now has `onload` attribute which behaves similarly to the one on `ng-include`.
+
+
+## Directives
+
+- `ng-model` binding on select[multiple] element should support binding to an array
+  ([commit](https://github.com/angular/angular.js/commit/85b2084f578652cc0dcba46c689683fc550554fe))
+- event object is now accessible as `$event` in `ng-click` and other directives
+  ([commit](https://github.com/angular/angular.js/commit/1752c8c44a7058e974ef208e583683eac8817789),
+   issue [#259](https://github.com/angular/angular.js/issues/259)
+- `ng-class` directive now support map of classnames and conditions
+  e.g. `<div ng-class="{'hide': !visible, 'warning': isAlert()}"...` (contributed by Kai Groner)
+  ([commit](https://github.com/angular/angular.js/commit/56bcc04c54ed24c19204f68de52b8c30c00e08f0))
+
+
+## Scope changes
+
+- `scope.$emit`/`$broadcast` return the event object, add cancelled property
+  ([commit](https://github.com/angular/angular.js/commit/6e635012fb30905e5fe659a024864e275f1c14b5))
+
+- `scope.$new()` takes one argument - a boolean indicating if the newly-created child scope should be
+  isolated (not prototypically inheriting from the current scope). Previously the first argument was
+  reference to the controller constructor, but because of the scope/controller separation the
+  controllers should be instantiated via the `$controller` service.
+  ([commit](https://github.com/angular/angular.js/commit/78656fe0dfc99c341ce02d71e7006e9c05b1fe3f))
+
+- fn signature change for change listener functions registered via `scope.$watch` - this means that
+  the scope object can be listed in the arguments list only if its needed and skipped otherwise.
+  ([commit](https://github.com/angular/angular.js/commit/0196411dbe179afe24f4faa6d6503ff3f69472da))
+
+  - before: `scope.$watch('someModel', function(scope, newVal, oldVal) {})`
+  - after: `scope.$watch('someModel', function(newVal, oldVal, scope) {})`
+
+- `scope.$watch` now compares object by reference and only if extra boolean flag is passed
+  comparison by equality is used. This was done to avoid unintended performance issues.
+  ([commit](https://github.com/angular/angular.js/commit/d6e3e1baabc3acc930e4fda387b62cbd03e64577))
+
+  - before: `scope.$watch('expression', function(scope, newVal, oldVal) {})`
+  - after: `scope.$watch('expression', function(newVal, oldVal, scope) {}, true)`
+
+- `scope.$destroy` doesn't cause the `$destroy` event to be emitted any more - this event was
+   primarily used by the old forms implementation and is not needed any more. We are considering
+   broadcasting this event in the future, which could then be used by directives and child scopes to
+   be notified of their scope destruction.
+
+
+## New directives:
+
+- [ng-mouseleave](http://docs-next.angularjs.org/api/angular.module.ng.$compileProvider.directive.ngMouseleave)
+- [ng-mousemove](http://docs-next.angularjs.org/api/angular.module.ng.$compileProvider.directive.ngMousemove)
+- [ng-mouseover](http://docs-next.angularjs.org/api/angular.module.ng.$compileProvider.directive.ngMouseover)
+- [ng-mouseup](http://docs-next.angularjs.org/api/angular.module.ng.$compileProvider.directive.ngMouseup)
+- [ng-mousedown](http://docs-next.angularjs.org/api/angular.module.ng.$compileProvider.directive.ngMousedown)
+- [ng-dblclick](http://docs-next.angularjs.org/api/angular.module.ng.$compileProvider.directive.ngDblclick)
+- [ng-model-instant](http://docs-next.angularjs.org/api/angular.module.ng.$compileProvider.directive.ngModelInstant)
+
+
+## $injector / modules
+
+- `$injector.instantiate` should return the object returned from constructor if one was returned
+  ([commit](https://github.com/angular/angular.js/commit/776739299b698a965ef818eeda75d4eddd10c491))
+- `$injector.instantiate` should support array annotations for Type argument (e.g. instantiate(['dep1', 'dep2', Type]))
+  ([commit](https://github.com/angular/angular.js/commit/eb92735c9ea3e5ddc747b66d8e895b6187a5f9e0))
+- quickly fail if circular dependencies are detected during instantiation
+  ([commit](https://github.com/angular/angular.js/commit/fbcb7fdd141c277d326dc3ed34545210c4d5628f))
+- added [$provide.constant](http://docs-next.angularjs.org/api/angular.module.AUTO.$provide#constant)
+  to enable registration of constants that are available in both the config and run phase
+  ([commit](https://github.com/angular/angular.js/commit/80edcadb1dd418dcf5adf85704c6693940c8bb28))
+- `$provide.service` was renamed to $provide.provider
+  ([commit](https://github.com/angular/angular.js/commit/00d4427388eeec81d434f9ee96bb7ccc70190923))
+- `$provide.service` takes a constructor fn and creates a service instance by using $injector.instantiate
+
+
+## New services:
+
+- [$sanitize](http://docs-next.angularjs.org/api/angular.module.ng.$sanitize)
+- [$interpolate](http://docs-next.angularjs.org/api/angular.module.ng.$interpolate)
+
+
+## jqLite (angular.element)
+
+- added `contents()` ([commit](https://github.com/angular/angular.js/commit/97dae0d0a0226ee527771578bfad1342d51bf4dd))
+- added `wrap()` ([commit](https://github.com/angular/angular.js/commit/4a051efb89cf33e30d56f1227d1f6084ead4cd42))
+- fix memory leaking in IE8 (remove monkey patched methods on Event)
+  ([commit](https://github.com/angular/angular.js/commit/3173d8603db4ae1c2373e13a7a490988126bb1e7),
+   [commit](https://github.com/angular/angular.js/commit/230f29d0a78a04a6963514da8b1e34cc03e553d0))
+
+
+## Docs
+
+- new [Modules dev guide article](http://docs-next.angularjs.org/guide/module)
+
+
+## Small bug fixes
+
+- fix incorrect comparison of dates by angular.equals
+  ([commit](https://github.com/angular/angular.js/commit/ffa84418862a9f768ce5b9b681916438f14a0d79))
+- `scope.$watch` support watching functions
+  ([commit](https://github.com/angular/angular.js/commit/7da2bdb82a72dffc8c72c1becf6f62aae52d32ce),
+   [commit](https://github.com/angular/angular.js/commit/39b3297fc34b6b15bb3487f619ad1e93c4480741))
+- `$http` should not json-serialize File objects, instead just send them raw
+  ([commit](https://github.com/angular/angular.js/commit/5b0d0683584e304db30462f3448d9f090120c444))
+- `$compile` should ignore content of style and script elements
+  ([commit](https://github.com/angular/angular.js/commit/4c1c50fd9bfafaa89cdc66dfde818a3f8f4b0c6b),
+   [commit](https://github.com/angular/angular.js/commit/d656d11489a0dbce0f549b20006052b215c4b500))
+- `TzDate#getDay()` should take into account the timezone offset (contributed by Stephane Bisson)
+  ([commit](https://github.com/angular/angular.js/commit/e86bafecd212789cde61050073a69c1e49ffd011))
+
+
+## Small features
+
+- `$parse` service now supports local vars in expressions
+  ([commit](https://github.com/angular/angular.js/commit/761b2ed85ad9685c35f85513e17363abf17ce6b3))
+
+
+
+<a name="0.10.6"></a>
+# 0.10.6 bubblewrap-cape (2012-01-17) #
+
+## Features:
+
+- [Dependency injection subsystem][guide2.di] rewrite. This is a huge change to the Angular core
+  that was necessary for many reasons. Please read the full
+  [design doc](https://docs.google.com/document/d/1hJnIqWhSt7wCacmWBB01Bmc6faZ8XdXJAEeiJwjZmqs/edit?hl=en_US)
+  to understand the changes and reasoning behind them.
+- Added [angular.bootstrap] for manual bootstrapping of the app. Also see
+  [Initializing Angular App][bootstrapping] doc.
+- Helper functions [inject] and [module] that make testing with DI and jasmine a lot easier.
+- [jqLite][jqLite2] and jQuery were extended with helper method `injector()` that simplifies the
+  access to the application injector during debugging.
+- Rewrite of $xhr service and its dependencies, which was replaced with [$http] service.
+  The $browser.xhr and its mock were replaced by [$httpBackend] and its
+  [unit testing][unit-testing $httpBackend] and [end-to-end testing][e2e-testing $httpBackend]
+  mocks. The $resource service api and functionality was preserved, with the exception of caching,
+  which is not happening automatically as it used it in the past (verifyCache has no effect).
+- [$q] - Q-like deferred/promise implementation
+  ([commit](https://github.com/angular/angular.js/commit/1cdfa3b9601c199ec0b45096b38e26350eca744f))
+- Transparent data-binding to promises in templates. [Example](http://jsfiddle.net/IgorMinar/aNSWu/)
+  ([commit](https://github.com/angular/angular.js/commit/78b6e8a446c0e38075c14b724f3cdf345c01fa06))
+- New [$anchorScroll] service that watches url hash and navigates to the html anchor even if the
+  content was loaded via [ng:view]  (for [ng:include] you have to opt into this behavior using
+  autoscroll attribute)
+- New LRU cache factory - [$cacheFactory] service
+- jQuery 1.7 compatibility
+
+
+## Bug Fixes:
+
+- Directive names are now case insensitive
+  ([commit](https://github.com/angular/angular.js/commit/1e00db8daa5c09e7f8f9134f5c94b9a18c7dc425))
+- $location#url setter fix (Issue [#648](https://github.com/angular/angular.js/issues/648))
+- [ng:include] - prevent race conditions by ignoring stale http callbacks
+  ([commit](https://github.com/angular/angular.js/commit/1d14760c6d3eefb676f5670bc323b2a7cadcdbfa))
+- [ng:repeat] - support repeating over array with null
+  ([commit](https://github.com/angular/angular.js/commit/cd9a7b9608707c34bec2316ee8c789a617d22a7b))
+- [angular.copy] - throw Error if source and destination are identical
+  ([commit](https://github.com/angular/angular.js/commit/08029c7b72a857ffe52f302ed79ae12db9efcc08))
+- Forms should not prevent POST submission if the action attribute is present
+  ([commit](https://github.com/angular/angular.js/commit/c9f2b1eec5e8a9eaf10faae8a8accf0b771096e0))
+
+
+## Breaking Changes:
+
+- App bootstrapping works differently (see [angular.bootstrap] and [ng:app] and [bootstrapping])
+- scope.$service is no more (because injector creates scope and not the other way around),
+  if you really can't get services injected and need to fetch them manually then, get hold of
+  [$injector] service and call $injector.get('serviceId')
+- angular.service style service registration was replaced with module system, please see
+  [angular.module] api and [DI documentation][guide2.di] for more info.
+- the $xhr service was replaced with [$http] with promise based apis.
+- [unit-testing $httpBackend]'s expect method (the replacement for $browser.xhr.expect) is stricter -
+  the order of requests matters and a single request expectation can handle only a single request.
+- compiler
+  - compiler is a service, so use [$compile] instead of angular.compile to compile templates
+  - $compile (nee angular.compile) returns the linking function which takes one mandatory argument -
+    the scope. previously this argument was optional and if missing, the compiler would create a new
+    root scope, this was a source of bugs and was removed
+- filters
+  - filters need to be registered either via [moduleName.filter][angular.Module] or
+    [$filterProvider.filter][$filterProvider]
+  - filters don't have access to the dom element
+  - currency filter doesn't make negative values red
+  - json filter doesn't print out stuff in monospace
+- type augmentation via angular.Array, and angular.Object is gone. As a replacement use filters
+  ([filter], [limitTo], [orderBy]), ES5 apis (e.g. Array#indexOf), or create custom filters (e.g.
+  as a replacement for $count and $sum).
+- [$browser.defer.flush] now throws an exception when queue is empty
+  ([commit](https://github.com/angular/angular.js/commit/63cca9afbcf7a772086eb4582d2f409c39e0ed12))
+- scope.$apply and scope.$digest throws an exception if called while $apply or $digest is already
+  in progress (this is a programming error, you should never need to do this)
+  ([commit](https://github.com/angular/angular.js/commit/0bf611087b2773fd36cf95c938d1cda8e65ffb2b))
+
+
+<a name="0.10.5"></a>
+# 0.10.5 steel-fist (11-11-08) #
+
+## Features:
+
+- [ng:autobind]: drop angular.js file name restrictions
+  ([commit](https://github.com/angular/angular.js/commit/d7ba5bc83ba9a8937384ea677331c5156ed6772d))
+- [Scope]: better logging of infinite digest error
+  ([commit](https://github.com/angular/angular.js/commit/ef875ad0cf4349144cb4674e050dd160564f6dd9),
+  issue [#621](https://github.com/angular/angular.js/issues/621))
+- enable [widget] styling in IE8 and below using
+  [html5shiv](http://code.google.com/p/html5shiv/)-like approach
+  ([commit](https://github.com/angular/angular.js/commit/163c799effd5cfadc57990f4d4127651bae3fbdb),
+  issue [#584](https://github.com/angular/angular.js/issues/584))
+- [ng:style]: compatibility + perf improvements
+  ([commit](https://github.com/angular/angular.js/commit/e2663f62b0fbb8b9ce2e706b821a135e0bc7e885))
+
+
+## Bug Fixes:
+- [ng:view]: ignore stale xhr callbacks - fixes issues caused by race-conditions which occured when
+  user navigated to a new route before the current route finished loading
+  (issue [#619](https://github.com/angular/angular.js/issues/619))
+- [ng:form] should always be a block level (css) element
+  ([commit](https://github.com/angular/angular.js/commit/02dc81bae0011b7ae4190363be5fdd5db420aca9))
+- Fixes for [e2e test runner]'s `$location` dsl
+  ([commit](https://github.com/angular/angular.js/commit/dc8ffa51b7ebe5fb9bc1c89087c8b3c9e65d1006))
+- [ng:repeat] when iterating over arrays ignore non-array properties + when iterating over objects
+  sort keys alphabetically
+  ([commit](https://github.com/angular/angular.js/commit/3945f884c5777e629b57c9ab0e93b9d02b9840d0))
+
+## Docs:
+- experimental [disqus.com](http://disqus.com/) integration for all docs-next.angularjs.org pages
+  ([commit](https://github.com/angular/angular.js/commit/28ed5ba46595a371bd734b92a6e4bb40d1013741),
+  contributed by Dan Doyon)
+- [e2e test runner] docs were moved to the dev guide
+
+

 <a name="0.10.4"></a>
 # 0.10.4 human-torch (2011-10-22) #
@@ -161,7 +911,7 @@

 - complete rewrite of the $location service with HTML5 support, many API and semantic changes.
  Please see:
-  - [$location service API docs](http://docs-next.angularjs.org/#!/api/angular.service.$location)
+  - [$location service API docs](http://docs-next.angularjs.org/#!/api/angular.module.ng.$location)
  - [$location service dev guide article](http://docs-next.angularjs.org/#!/guide/dev_guide.services.$location)
  - [location.js source file](https://github.com/angular/angular.js/blob/master/src/service/location.js)
  - breaking changes section of this changelog
@@ -472,7 +1222,7 @@

 ### New Features
 - Added XSRF protection for the [$xhr] service. (commit c578f8c3)
- Targeted auto-bootstrap ‚Äî [ng:autobind] now takes an optional value which specifies an element id
+- Targeted auto-bootstrap – [ng:autobind] now takes an optional value which specifies an element id
  to be compiled instead of compiling the entire html document. (commit 9d5c5337)


@@ -586,7 +1336,7 @@
 # <angular/> 0.9.10 flea-whisperer  (2011-01-26) #

 ### Features
- new [`ng:view`](http://docs.angularjs.org/#!/api/angular.widget.ng:view) widget to simplify integration
+- new [`ng:view`](http://docs.angularjs.org/#!/api/angular.widget.ng-view) widget to simplify integration
 with the `$route` service
 - the content of all standard HTML widgets is now being processed
  (e.g. `<button>{{foo}}</button>` works now) (commit 1d7b9d56)
@@ -907,31 +1657,32 @@ with the `$route` service
 [element]: http://docs.angularjs.org/#!/api/angular.element
 [widget]: http://docs.angularjs.org/#!/api/angular.widget
 [ng:repeat]: http://docs.angularjs.org/#!/api/angular.widget.@ng:repeat
-[ng:view]: http://docs.angularjs.org/#!/api/angular.widget.ng:view
-[ng:include]: http://docs.angularjs.org/#!/api/angular.widget.ng:include
-[ng:options]: http://docs.angularjs.org/#!/api/angular.directive.ng:options
-[ng:disabled]: http://docs.angularjs.org/#!/api/angular.directive.ng:disabled
-[ng:selected]: http://docs.angularjs.org/#!/api/angular.directive.ng:selected
-[ng:checked]: http://docs.angularjs.org/#!/api/angular.directive.ng:checked
-[ng:multiple]: http://docs.angularjs.org/#!/api/angular.directive.ng:multiple
-[ng:readonly]: http://docs.angularjs.org/#!/api/angular.directive.ng:readonly
-[ng:show]: http://docs.angularjs.org/#!/api/angular.directive.ng:show
-[ng:hide]: http://docs.angularjs.org/#!/api/angular.directive.ng:hide
-[ng:class]: http://docs.angularjs.org/#!/api/angular.directive.ng:class
-[ng:src]: http://docs.angularjs.org/#!/api/angular.directive.ng:src
-[ng:href]: http://docs.angularjs.org/#!/api/angular.directive.ng:href
-[$defer]: http://docs.angularjs.org/#!/api/angular.service.$defer
-[$cookies]: http://docs.angularjs.org/#!/api/angular.service.$cookies
-[$xhr]: http://docs.angularjs.org/#!/api/angular.service.$xhr
-[$xhr.cache]: http://docs.angularjs.org/#!/api/angular.service.$xhr.cache
-[$resource]: http://docs.angularjs.org/#!/api/angular.service.$resource
-[$route]: http://docs.angularjs.org/#!/api/angular.service.$route
+[ng:view]: http://docs.angularjs.org/#!/api/angular.widget.ng-view
+[ng:include]: http://docs.angularjs.org/#!/api/angular.widget.ng-include
+[ng:options]: http://docs.angularjs.org/#!/api/angular.directive.ng-options
+[ng:disabled]: http://docs.angularjs.org/#!/api/angular.directive.ng-disabled
+[ng:selected]: http://docs.angularjs.org/#!/api/angular.directive.ng-selected
+[ng:checked]: http://docs.angularjs.org/#!/api/angular.directive.ng-checked
+[ng:multiple]: http://docs.angularjs.org/#!/api/angular.directive.ng-multiple
+[ng:readonly]: http://docs.angularjs.org/#!/api/angular.directive.ng-readonly
+[ng:show]: http://docs.angularjs.org/#!/api/angular.directive.ng-show
+[ng:hide]: http://docs.angularjs.org/#!/api/angular.directive.ng-hide
+[ng:class]: http://docs.angularjs.org/#!/api/angular.directive.ng-class
+[ng:src]: http://docs.angularjs.org/#!/api/angular.directive.ng-src
+[ng:href]: http://docs.angularjs.org/#!/api/angular.directive.ng-href
+[ng:style]: http://docs.angularjs.org/#!/api/angular.directive.ng-style
+[$defer]: http://docs.angularjs.org/#!/api/angular.module.ng.$defer
+[$cookies]: http://docs.angularjs.org/#!/api/angular.module.ng.$cookies
+[$xhr]: http://docs.angularjs.org/#!/api/angular.module.ng.$xhr
+[$xhr.cache]: http://docs.angularjs.org/#!/api/angular.module.ng.$xhr.cache
+[$resource]: http://docs.angularjs.org/#!/api/angular.module.ng.$resource
+[$route]: http://docs.angularjs.org/#!/api/angular.module.ng.$route
 [$orderBy]: http://docs.angularjs.org/#!/api/angular.Array.orderBy
 [date]: http://docs.angularjs.org/#!/api/angular.filter.date
 [number]: http://docs.angularjs.org/#!/api/angular.filter.number
 [currency]: http://docs.angularjs.org/#!/api/angular.filter.currency
 [directive]: http://docs.angularjs.org/#!/api/angular.directive
-[ng:autobind]: http://docs.angularjs.org/#!/api/angular.directive.ng:autobind
+[ng:autobind]: http://docs.angularjs.org/#!/api/angular.directive.ng-autobind
 [guide.di]: http://docs.angularjs.org/#!/guide/dev_guide.di
 [downloading]: http://docs.angularjs.org/#!/misc/downloading
 [contribute]: http://docs.angularjs.org/#!/misc/contribute
@@ -939,10 +1690,36 @@ with the `$route` service
 [angular.version]: http://docs.angularjs.org/#!/api/angular.version
 [Jstd Scenario Adapter]: https://github.com/angular/angular.js/blob/master/src/jstd-scenario-adapter/Adapter.js
 [i18n]: http://docs-next.angularjs.org/#!/guide/dev_guide.i18n
-[ng:pluralize]: http://docs-next.angularjs.org/#!/api/angular.widget.ng:pluralize
-[ng:cloak]: http://docs-next.angularjs.org/#!/api/angular.directive.ng:cloak
+[ng:pluralize]: http://docs-next.angularjs.org/#!/api/angular.widget.ng-pluralize
+[ng:form]: http://docs-next.angularjs.org/api/angular.widget.form
+[ng:cloak]: http://docs-next.angularjs.org/#!/api/angular.directive.ng-cloak
 [$on]: http://docs-next.angularjs.org/#!/api/angular.scope.$on
 [$emit]: http://docs-next.angularjs.org/#!/api/angular.scope.$emit
 [$broadcast]: http://docs-next.angularjs.org/#!/api/angular.scope.$broadcast
 [$limitTo]: http://docs-next.angularjs.org/api/angular.Array.limitTo
 [$location]: http://docs-next.angularjs.org/api/angular.service.$location
+[e2e test runner]: http://docs-next.angularjs.org/guide/dev_guide.e2e-testing
+[$injector]: http://docs-next.angularjs.org/api/angular.module.AUTO.$injector
+[$http]: http://docs-next.angularjs.org/api/angular.module.ng.$http
+[$httpBackend]: http://docs-next.angularjs.org/api/angular.module.ng.$httpBackend
+[unit-testing $httpBackend]: http://docs-next.angularjs.org/api/angular.module.ngMock.$httpBackend
+[e2e-testing $httpBackend]: http://docs-next.angularjs.org/api/angular.module.ngMockE2E.$httpBackend
+[$q]: http://docs-next.angularjs.org/api/angular.module.ng.$q
+[angular.bootstrap]: http://docs-next.angularjs.org/api/angular.bootstrap
+[$anchorScroll]: http://docs-next.angularjs.org/api/angular.module.ng.$anchorScroll
+[$cacheFactory]: http://docs-next.angularjs.org/api/angular.module.ng.$cacheFactory
+[bootstrapping]: http://docs-next.angularjs.org/guide/dev_guide.bootstrap
+[angular.copy]: http://docs-next.angularjs.org/api/angular.copy
+[ng:app]: http://docs-next.angularjs.org/api/angular.directive.ng-app
+[$compile]: http://docs-next.angularjs.org/api/angular.module.ng.$compile
+[$filterProvider]: http://docs-next.angularjs.org/api/angular.module.ng.$filterProvider
+[angular.Module]: http://docs-next.angularjs.org/api/angular.Module
+[angular.module]: http://docs-next.angularjs.org/api/angular.module
+[filter]: http://docs-next.angularjs.org/api/angular.module.ng.$filter.filter
+[limitTo]: http://docs-next.angularjs.org/api/angular.module.ng.$filter.limitTo
+[orderBy]: http://docs-next.angularjs.org/api/angular.module.ng.$filter.orderBy
+[$browser.defer.flush]: http://docs-next.angularjs.org/api/angular.module.ngMock.$browser#defer.flush
+[inject]: http://docs-next.angularjs.org/api/angular.mock.inject
+[module]: http://docs-next.angularjs.org/api/angular.mock.module
+[guide2.di]: http://docs-next.angularjs.org/guide/dev_guide.di
+[jqLite2]: http://docs.angularjs.org/#!/api/angular.element
@@ -1,6 +1,6 @@
 The MIT License

-Copyright (c) 2010 Adam Abrons and Misko Hevery http://getangular.com
+Copyright (c) 2010-2012 Google, Inc. http://angularjs.org

 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal
@@ -1,5 +1,10 @@
-Angular
-======
+AngularJS
+=========
+
+* Web site: http://angularjs.org
+* Tutorial: http://docs.angularjs.org/#!/tutorial
+* API Docs: http://docs.angularjs.org
+* Developer Guide: http://docs.angularjs.org/#!/guide

 Compiling
 ---------
@@ -7,6 +12,8 @@ Compiling

 Running Tests
 -------------
-    rake server:start
-    rake test
+    ./server.sh                          # start the server
+    open http://localhost:9876/capture   # capture browser
+    ./test.sh                            # run all unit tests
+

@@ -2,7 +2,10 @@ require 'yaml'
 include FileUtils

 content = File.open('angularFiles.js', 'r') {|f| f.read }
-files = eval(content.gsub(/angularFiles = /, '').gsub(/:/, '=>'));
+files = eval(content.gsub(/\};(\s|\S)*/, '}').
+            gsub(/angularFiles = /, '').
+            gsub(/:/, '=>').
+            gsub(/\/\//, '#'));

 BUILD_DIR = 'build'

@@ -20,7 +23,7 @@ task :init do
                      new(match[1] + (match[2] ? ('-' + %x(git rev-parse HEAD)[0..7]) : ''),
                          match[1].split('.')[0],
                          match[1].split('.')[1],
-                          match[1].split('.')[2],
+                          match[1].split('.')[2].sub(/\D+.*$/, ''),
                          v['codename'])
 end

@@ -35,37 +38,23 @@ end
 desc 'Compile Scenario'
 task :compile_scenario => :init do

-  deps = [
+  concat_file('angular-scenario.js', [
      'lib/jquery/jquery.js',
-      'src/scenario/angular.prefix',
+      'src/ngScenario/angular.prefix',
      files['angularSrc'],
      files['angularScenario'],
-      'src/scenario/angular.suffix',
-  ]
-
-  concat = 'cat ' + deps.flatten.join(' ')
-
-  File.open(path_to('angular-scenario.js'), 'w') do |f|
-    f.write(%x{#{concat}}.gsub('"NG_VERSION_FULL"', NG_VERSION.full))
-    f.write(gen_css('css/angular.css') + "\n")
-    f.write(gen_css('css/angular-scenario.css'))
-  end
+      'src/ngScenario/angular.suffix',
+  ], gen_css('css/angular.css') + "\n" + gen_css('css/angular-scenario.css'))
 end

 desc 'Compile JSTD Scenario Adapter'
 task :compile_jstd_scenario_adapter => :init do

-  deps = [
-      'src/jstd-scenario-adapter/angular.prefix',
-      'src/jstd-scenario-adapter/Adapter.js',
-      'src/jstd-scenario-adapter/angular.suffix',
-  ]
-
-  concat = 'cat ' + deps.flatten.join(' ')
-
-  File.open(path_to('jstd-scenario-adapter.js'), 'w') do |f|
-    f.write(%x{#{concat}}.gsub('"NG_VERSION_FULL"', NG_VERSION.full))
-  end
+  concat_file('jstd-scenario-adapter.js', [
+      'src/ngScenario/jstd-scenario-adapter/angular.prefix',
+      'src/ngScenario/jstd-scenario-adapter/Adapter.js',
+      'src/ngScenario/jstd-scenario-adapter/angular.suffix',
+  ])

  # TODO(vojta) use jstd configuration when implemented
  # (instead of including jstd-adapter-config.js)
@@ -80,46 +69,51 @@ end
 desc 'Compile JavaScript'
 task :compile => [:init, :compile_scenario, :compile_jstd_scenario_adapter] do

-  deps = [
-      'src/angular.prefix',
-      files['angularSrc'],
-      'src/angular.suffix',
-  ]
+  concat_file('angular.js', [
+        'src/angular.prefix',
+        files['angularSrc'],
+        'src/angular.suffix',
+      ], gen_css('css/angular.css', true))

-  File.open(path_to('angular.js'), 'w') do |f|
-    concat = 'cat ' + deps.flatten.join(' ')
+  FileUtils.cp_r 'src/ngLocale', path_to('i18n')

-    content = %x{#{concat}}.
-              gsub('"NG_VERSION_FULL"', NG_VERSION.full).
-              gsub('"NG_VERSION_MAJOR"', NG_VERSION.major).
-              gsub('"NG_VERSION_MINOR"', NG_VERSION.minor).
-              gsub('"NG_VERSION_DOT"', NG_VERSION.dot).
-              gsub('"NG_VERSION_CODENAME"', NG_VERSION.codename).
-              gsub(/^\s*['"]use strict['"];?\s*$/, ''). # remove all file-specific strict mode flags
-              gsub(/'USE STRICT'/, "'use strict'")      # rename the placeholder in angular.prefix
+  concat_file('angular-loader.js', [
+      'src/loader.prefix',
+      'src/loader.js',
+      'src/loader.suffix'])

-    f.write(content)
-    f.write(gen_css('css/angular.css', true))
-  end

-  %x(java -jar lib/closure-compiler/compiler.jar \
-        --compilation_level SIMPLE_OPTIMIZATIONS \
-        --language_in ECMASCRIPT5_STRICT \
-        --js #{path_to('angular.js')} \
-        --js_output_file #{path_to('angular.min.js')})
+  concat_module('sanitize', [
+      'src/ngSanitize/sanitize.js',
+      'src/ngSanitize/directive/ngBindHtml.js',
+      'src/ngSanitize/filter/linky.js'])
+
+  concat_module('resource', ['src/ngResource/resource.js'])
+  concat_module('cookies', ['src/ngCookies/cookies.js'])
+  concat_module('bootstrap', ['src/bootstrap/bootstrap.js'])
+  concat_module('bootstrap-prettify', ['src/bootstrap/bootstrap-prettify.js',
+                                       'src/bootstrap/google-prettify/prettify.js'],
+                               gen_css('src/bootstrap/google-prettify/prettify.css', true))
+
+
+  FileUtils.cp 'src/ngMock/angular-mocks.js', path_to('angular-mocks.js')
+
+  closure_compile('angular.js')
+  closure_compile('angular-cookies.js')
+  closure_compile('angular-loader.js')
+  closure_compile('angular-resource.js')
+  closure_compile('angular-sanitize.js')
+  closure_compile('angular-bootstrap.js')
+  closure_compile('angular-bootstrap-prettify.js')

-  FileUtils.cp_r 'i18n/locale', path_to('i18n')
 end


 desc 'Generate docs'
 task :docs => [:init] do
  `node docs/src/gen-docs.js`
-  File.open(path_to('docs/.htaccess'), File::RDWR) do |f|
-    text = f.read
-    f.truncate 0
-    f.rewind
-    f.write text.sub('"NG_VERSION_FULL"', NG_VERSION.full)
+  rewrite_file(path_to('docs/.htaccess')) do |content|
+    content.sub!('"NG_VERSION_FULL"', NG_VERSION.full)
  end
 end

@@ -132,94 +126,62 @@ task :package => [:clean, :compile, :docs] do
  FileUtils.rm_r(path_to('pkg'), :force => true)
  FileUtils.mkdir_p(pkg_dir)

-  ['src/angular-mocks.js',
-    path_to('angular.js'),
+  [ path_to('angular.js'),
    path_to('angular.min.js'),
+    path_to('angular-loader.js'),
+    path_to('angular-loader.min.js'),
+    path_to('angular-bootstrap.js'),
+    path_to('angular-bootstrap.min.js'),
+    path_to('angular-bootstrap-prettify.js'),
+    path_to('angular-bootstrap-prettify.min.js'),
+    path_to('angular-mocks.js'),
+    path_to('angular-cookies.js'),
+    path_to('angular-cookies.min.js'),
+    path_to('angular-resource.js'),
+    path_to('angular-resource.min.js'),
+    path_to('angular-sanitize.js'),
+    path_to('angular-sanitize.min.js'),
    path_to('angular-scenario.js'),
    path_to('jstd-scenario-adapter.js'),
    path_to('jstd-scenario-adapter-config.js'),
  ].each do |src|
-    dest = src.gsub(/^[^\/]+\//, '').gsub(/((\.min)?\.js)$/, "-#{NG_VERSION.full}\\1")
+    dest = src.gsub(/^.*\//, '').gsub(/((\.min)?\.js)$/, "-#{NG_VERSION.full}\\1")
    FileUtils.cp(src, pkg_dir + '/' + dest)
  end

  FileUtils.cp_r path_to('i18n'), "#{pkg_dir}/i18n-#{NG_VERSION.full}"
  FileUtils.cp_r path_to('docs'), "#{pkg_dir}/docs-#{NG_VERSION.full}"

-  File.open("#{pkg_dir}/docs-#{NG_VERSION.full}/index.html", File::RDWR) do |f|
-    text = f.read
-    f.truncate 0
-    f.rewind
-    f.write text.sub('angular.min.js', "angular-#{NG_VERSION.full}.min.js").
-                 sub('/build/docs/', "/#{NG_VERSION.full}/docs-#{NG_VERSION.full}/")
+  rewrite_file("#{pkg_dir}/angular-mocks-#{NG_VERSION.full}.js") do |content|
+    content.sub!('"NG_VERSION_FULL"', NG_VERSION.full)
  end


-  File.open("#{pkg_dir}/docs-#{NG_VERSION.full}/index-jq.html", File::RDWR) do |f|
-    text = f.read
-    f.truncate 0
-    f.rewind
-    f.write text.sub('angular.min.js', "angular-#{NG_VERSION.full}.min.js").
-                 sub('/build/docs/', "/#{NG_VERSION.full}/docs-#{NG_VERSION.full}/")
+  [ "#{pkg_dir}/docs-#{NG_VERSION.full}/index.html",
+    "#{pkg_dir}/docs-#{NG_VERSION.full}/index-jq.html",
+    "#{pkg_dir}/docs-#{NG_VERSION.full}/index-nocache.html",
+    "#{pkg_dir}/docs-#{NG_VERSION.full}/index-jq-nocache.html",
+    "#{pkg_dir}/docs-#{NG_VERSION.full}/index-debug.html",
+    "#{pkg_dir}/docs-#{NG_VERSION.full}/index-jq-debug.html"
+  ].each do |src|
+    rewrite_file(src) do |content|
+      content.gsub!(/'angular(.*)\.js/, '\'angular\1-' + NG_VERSION.full + '.js')
+    end
  end


-  File.open("#{pkg_dir}/docs-#{NG_VERSION.full}/index-nocache.html", File::RDWR) do |f|
-    text = f.read
-    f.truncate 0
-    f.rewind
-    f.write text.sub('angular.min.js', "angular-#{NG_VERSION.full}.min.js").
-                 sub('/build/docs/', "/#{NG_VERSION.full}/docs-#{NG_VERSION.full}/")
+  rewrite_file("#{pkg_dir}/docs-#{NG_VERSION.full}/docs-scenario.html") do |content|
+    content.sub!('angular-scenario.js', "angular-scenario-#{NG_VERSION.full}.js")
  end


-  File.open("#{pkg_dir}/docs-#{NG_VERSION.full}/index-jq-nocache.html", File::RDWR) do |f|
-    text = f.read
-    f.truncate 0
-    f.rewind
-    f.write text.sub('angular.min.js', "angular-#{NG_VERSION.full}.min.js").
-                 sub('/build/docs/', "/#{NG_VERSION.full}/docs-#{NG_VERSION.full}/")
-  end
-
-
-  File.open("#{pkg_dir}/docs-#{NG_VERSION.full}/index-debug.html", File::RDWR) do |f|
-    text = f.read
-    f.truncate 0
-    f.rewind
-    f.write text.sub('../angular.js', "../angular-#{NG_VERSION.full}.js").
-                 sub('/build/docs/', "/#{NG_VERSION.full}/docs-#{NG_VERSION.full}/")
-  end
-
-
-  File.open("#{pkg_dir}/docs-#{NG_VERSION.full}/index-jq-debug.html", File::RDWR) do |f|
-    text = f.read
-    f.truncate 0
-    f.rewind
-    f.write text.sub('../angular.js', "../angular-#{NG_VERSION.full}.js").
-                 sub('/build/docs/', "/#{NG_VERSION.full}/docs-#{NG_VERSION.full}/")
-  end
-
-  File.open("#{pkg_dir}/docs-#{NG_VERSION.full}/docs-scenario.html", File::RDWR) do |f|
-    text = f.read
-    f.truncate 0
-    f.rewind
-    f.write text.sub('angular-scenario.js', "angular-scenario-#{NG_VERSION.full}.js")
-  end
-
-  File.open("#{pkg_dir}/docs-#{NG_VERSION.full}/appcache.manifest", File::RDWR) do |f|
-    text = f.read
-    f.truncate 0
-    f.rewind
-    f.write text.sub('angular.min.js', "angular-#{NG_VERSION.full}.min.js").
-                 sub('/build/docs/', "/#{NG_VERSION.full}/docs-#{NG_VERSION.full}/")
-  end
-
-  File.open("#{pkg_dir}/docs-#{NG_VERSION.full}/appcache-offline.manifest", File::RDWR) do |f|
-    text = f.read
-    f.truncate 0
-    f.rewind
-    f.write text.sub('angular.min.js', "angular-#{NG_VERSION.full}.min.js").
-                 sub('/build/docs/', "/#{NG_VERSION.full}/docs-#{NG_VERSION.full}/")
+  [ "#{pkg_dir}/docs-#{NG_VERSION.full}/appcache.manifest",
+    "#{pkg_dir}/docs-#{NG_VERSION.full}/appcache-offline.manifest"
+  ].each do |src|
+    rewrite_file(src) do |content|
+      content.sub!('../angular.min.js', "angular-#{NG_VERSION.full}.min.js").
+              sub!('/build/docs/', "/#{NG_VERSION.full}/docs-#{NG_VERSION.full}/")
+    end
  end


@@ -306,3 +268,61 @@ end
 def path_to(filename)
  return File.join(BUILD_DIR, *filename)
 end
+
+
+def closure_compile(filename)
+  puts "Compiling #{filename} ..."
+
+  min_path = path_to(filename.gsub(/\.js$/, '.min.js'))
+
+  %x(java -jar lib/closure-compiler/compiler.jar \
+        --compilation_level SIMPLE_OPTIMIZATIONS \
+        --language_in ECMASCRIPT5_STRICT \
+        --js #{path_to(filename)} \
+        --js_output_file #{min_path})
+
+  rewrite_file(min_path) do |content|
+    content.sub!("'use strict';", "").
+            sub!(/\(function\([^)]*\)\{/, "\\0'use strict';")
+  end
+end
+
+
+def concat_file(filename, deps, footer='')
+  puts "Building #{filename} ..."
+  File.open(path_to(filename), 'w') do |f|
+    concat = 'cat ' + deps.flatten.join(' ')
+
+    content = %x{#{concat}}.
+              gsub('"NG_VERSION_FULL"', NG_VERSION.full).
+              gsub('"NG_VERSION_MAJOR"', NG_VERSION.major).
+              gsub('"NG_VERSION_MINOR"', NG_VERSION.minor).
+              gsub('"NG_VERSION_DOT"', NG_VERSION.dot).
+              gsub('"NG_VERSION_CODENAME"', NG_VERSION.codename).
+              gsub(/^\s*['"]use strict['"];?\s*$/, ''). # remove all file-specific strict mode flags
+              sub(/\(function\([^)]*\)\s*\{/, "\\0\n'use strict';") # add single strict mode flag
+
+    f.write(content)
+    f.write(footer)
+  end
+end
+
+
+def concat_module(name, files, footer='')
+  concat_file('angular-' + name + '.js', ['src/module.prefix'] + files + ['src/module.suffix'], footer)
+end
+
+
+def rewrite_file(filename)
+  File.open(filename, File::RDWR) do |f|
+    content = f.read
+
+    content = yield content
+
+    raise "File rewrite failed - No content!" unless content
+
+    f.truncate 0
+    f.rewind
+    f.write content
+  end
+end
@@ -1,59 +1,113 @@
 angularFiles = {
  'angularSrc': [
    'src/Angular.js',
-    'src/JSON.js',
-    'src/Compiler.js',
-    'src/Scope.js',
-    'src/Injector.js',
-    'src/parser.js',
-    'src/Resource.js',
-    'src/Browser.js',
-    'src/sanitizer.js',
+    'src/loader.js',
+    'src/AngularPublic.js',
    'src/jqLite.js',
    'src/apis.js',
-    'src/filters.js',
-    'src/service/cookieStore.js',
-    'src/service/cookies.js',
-    'src/service/defer.js',
-    'src/service/document.js',
-    'src/service/exceptionHandler.js',
-    'src/service/formFactory.js',
-    'src/service/location.js',
-    'src/service/log.js',
-    'src/service/resource.js',
-    'src/service/route.js',
-    'src/service/routeParams.js',
-    'src/service/sniffer.js',
-    'src/service/window.js',
-    'src/service/xhr.bulk.js',
-    'src/service/xhr.cache.js',
-    'src/service/xhr.error.js',
-    'src/service/xhr.js',
-    'src/service/locale.js',
-    'src/directives.js',
-    'src/markups.js',
-    'src/widgets.js',
-    'src/widget/form.js',
-    'src/widget/input.js',
-    'src/widget/select.js',
-    'src/AngularPublic.js',
+
+    'src/auto/injector.js',
+
+    'src/ng/anchorScroll.js',
+    'src/ng/browser.js',
+    'src/ng/cacheFactory.js',
+    'src/ng/compile.js',
+    'src/ng/controller.js',
+    'src/ng/defer.js',
+    'src/ng/document.js',
+    'src/ng/exceptionHandler.js',
+    'src/ng/interpolate.js',
+    'src/ng/location.js',
+    'src/ng/log.js',
+    'src/ng/parse.js',
+    'src/ng/q.js',
+    'src/ng/route.js',
+    'src/ng/routeParams.js',
+    'src/ng/rootScope.js',
+    'src/ng/sniffer.js',
+    'src/ng/window.js',
+    'src/ng/http.js',
+    'src/ng/httpBackend.js',
+    'src/ng/locale.js',
+
+    'src/ng/filter.js',
+    'src/ng/filter/filter.js',
+    'src/ng/filter/filters.js',
+    'src/ng/filter/limitTo.js',
+    'src/ng/filter/orderBy.js',
+
+    'src/ng/directive/directives.js',
+    'src/ng/directive/a.js',
+    'src/ng/directive/booleanAttrs.js',
+    'src/ng/directive/form.js',
+    'src/ng/directive/input.js',
+    'src/ng/directive/ngBind.js',
+    'src/ng/directive/ngClass.js',
+    'src/ng/directive/ngCloak.js',
+    'src/ng/directive/ngController.js',
+    'src/ng/directive/ngCsp.js',
+    'src/ng/directive/ngEventDirs.js',
+    'src/ng/directive/ngInclude.js',
+    'src/ng/directive/ngInit.js',
+    'src/ng/directive/ngNonBindable.js',
+    'src/ng/directive/ngPluralize.js',
+    'src/ng/directive/ngRepeat.js',
+    'src/ng/directive/ngShowHide.js',
+    'src/ng/directive/ngStyle.js',
+    'src/ng/directive/ngSwitch.js',
+    'src/ng/directive/ngTransclude.js',
+    'src/ng/directive/ngView.js',
+    'src/ng/directive/script.js',
+    'src/ng/directive/select.js',
+    'src/ng/directive/style.js'
+  ],
+
+  'angularSrcModules': [
+    'src/ngCookies/cookies.js',
+    'src/ngResource/resource.js',
+    'src/ngSanitize/sanitize.js',
+    'src/ngSanitize/directive/ngBindHtml.js',
+    'src/ngSanitize/filter/linky.js',
+    'src/ngMock/angular-mocks.js',
+
+    'src/bootstrap/bootstrap.js'
  ],

  'angularScenario': [
-    'src/scenario/Scenario.js',
-    'src/scenario/Application.js',
-    'src/scenario/Describe.js',
-    'src/scenario/Future.js',
-    'src/scenario/ObjectModel.js',
-    'src/scenario/Describe.js',
-    'src/scenario/Runner.js',
-    'src/scenario/SpecRunner.js',
-    'src/scenario/dsl.js',
-    'src/scenario/matchers.js',
-    'src/scenario/output/Html.js',
-    'src/scenario/output/Json.js',
-    'src/scenario/output/Xml.js',
-    'src/scenario/output/Object.js'
+    'src/ngScenario/Scenario.js',
+    'src/ngScenario/Application.js',
+    'src/ngScenario/Describe.js',
+    'src/ngScenario/Future.js',
+    'src/ngScenario/ObjectModel.js',
+    'src/ngScenario/Describe.js',
+    'src/ngScenario/Runner.js',
+    'src/ngScenario/SpecRunner.js',
+    'src/ngScenario/dsl.js',
+    'src/ngScenario/matchers.js',
+    'src/ngScenario/output/Html.js',
+    'src/ngScenario/output/Json.js',
+    'src/ngScenario/output/Xml.js',
+    'src/ngScenario/output/Object.js'
+  ],
+
+  'angularTest': [
+    'test/testabilityPatch.js',
+    'test/matchers.js',
+    'test/ngScenario/*.js',
+    'test/ngScenario/output/*.js',
+    'test/ngScenario/jstd-scenario-adapter/*.js',
+    'test/*.js',
+    'test/auto/*.js',
+    'test/bootstrap/*.js',
+    'test/ng/*.js',
+    'test/ng/directive/*.js',
+    'test/ng/filter/*.js',
+    'test/ngCookies/*.js',
+    'test/ngResource/*.js',
+    'test/ngSanitize/*.js',
+    'test/ngSanitize/directive/*.js',
+    'test/ngSanitize/filter/*.js',
+    'test/ngMock/*.js'
  ],

  'jstd': [
@@ -62,28 +116,19 @@ angularFiles = {
    'lib/jquery/jquery.js',
    'test/jquery_remove.js',
    '@angularSrc',
+    'src/publishExternalApis.js',
+    '@angularSrcModules',
+    '@angularScenario',
+    'src/ngScenario/jstd-scenario-adapter/Adapter.js',
+    '@angularTest',
    'example/personalLog/*.js',
-    'test/testabilityPatch.js',
-    'src/scenario/Scenario.js',
-    'src/scenario/output/*.js',
-    'src/jstd-scenario-adapter/*.js',
-    'src/scenario/*.js',
-    'src/angular-mocks.js',
-    'test/mocks.js',
-    'test/scenario/*.js',
-    'test/scenario/output/*.js',
-    'test/jstd-scenario-adapter/*.js',
-    'test/*.js',
-    'test/service/*.js',
-    'test/widget/*.js',
    'example/personalLog/test/*.js'
  ],

  'jstdExclude': [
    'test/jquery_alias.js',
    'src/angular-bootstrap.js',
-    'src/scenario/angular-bootstrap.js',
-    'src/AngularPublic.js'
+    'src/ngScenario/angular-bootstrap.js'
  ],

  'jstdScenario': [
@@ -93,20 +138,39 @@ angularFiles = {
    'build/docs/docs-scenario.js'
  ],

+  "jstdModules": [
+    'lib/jasmine/jasmine.js',
+    'lib/jasmine-jstd-adapter/JasmineAdapter.js',
+    'build/angular.js',
+    'src/ngMock/angular-mocks.js',
+    'src/ngCookies/cookies.js',
+    'src/ngResource/resource.js',
+    'src/ngSanitize/sanitize.js',
+    'src/ngSanitize/directive/ngBindHtml.js',
+    'src/ngSanitize/filter/linky.js',
+    'test/matchers.js',
+    'test/ngMock/*.js',
+    'test/ngCookies/*.js',
+    'test/ngResource/*.js',
+    'test/ngSanitize/*.js',
+    'test/ngSanitize/directive/*.js',
+    'test/ngSanitize/filter/*.js'
+  ],
+
  'jstdPerf': [
   'lib/jasmine/jasmine.js',
   'lib/jasmine-jstd-adapter/JasmineAdapter.js',
-   'angularSrc',
-   'src/angular-mocks.js',
+   '@angularSrc',
+   '@angularSrcModules',
+   'src/ngMock/angular-mocks.js',
   'perf/data/*.js',
   'perf/testUtils.js',
   'perf/*.js'
  ],

  'jstdPerfExclude': [
-    'src/angular-bootstrap.js',
-    'src/scenario/angular-bootstrap.js',
-    'src/AngularPublic.js'
+    'src/ng/angular-bootstrap.js',
+    'src/ngScenario/angular-bootstrap.js'
  ],

  'jstdJquery': [
@@ -115,27 +179,53 @@ angularFiles = {
    'lib/jquery/jquery.js',
    'test/jquery_alias.js',
    '@angularSrc',
+    'src/publishExternalApis.js',
+    '@angularSrcModules',
+    '@angularScenario',
+    'src/ngScenario/jstd-scenario-adapter/Adapter.js',
+    '@angularTest',
    'example/personalLog/*.js',
-    'test/testabilityPatch.js',
-    'src/scenario/Scenario.js',
-    'src/scenario/output/*.js',
-    'src/jstd-scenario-adapter/*.js',
-    'src/scenario/*.js',
-    'src/angular-mocks.js',
-    'test/mocks.js',
-    'test/scenario/*.js',
-    'test/scenario/output/*.js',
-    'test/jstd-scenario-adapter/*.js',
-    'test/*.js',
-    'test/service/*.js',
-    'test/widget/*.js',
+
    'example/personalLog/test/*.js'
  ],

  'jstdJqueryExclude': [
    'src/angular-bootstrap.js',
-    'src/AngularPublic.js',
-    'src/scenario/angular-bootstrap.js',
+    'src/ngScenario/angular-bootstrap.js',
    'test/jquery_remove.js'
  ]
+};
+
+// Execute only in slim-jim
+if (typeof JASMINE_ADAPTER !== 'undefined') {
+  // Testacular config
+  var mergedFiles = [];
+  angularFiles.jstd.forEach(function(file) {
+    // replace @ref
+    var match = file.match(/^\@(.*)/);
+    if (match) {
+      var deps = angularFiles[match[1]];
+      if (!deps) {
+        console.log('No dependency:' + file)
+      }
+      mergedFiles = mergedFiles.concat(deps);
+    } else {
+      mergedFiles.push(file);
+    }
+  });
+
+  files = [JASMINE, JASMINE_ADAPTER];
+
+  mergedFiles.forEach(function(file){
+    if (/jstd|jasmine/.test(file)) return;
+    files.push(file);
+  });
+
+
+  exclude = angularFiles.jstdExclude;
+
+  autoWatch = true;
+  autoWatchInterval = 1;
+  logLevel = LOG_INFO;
+  logColors = true;
 }
@@ -0,0 +1,205 @@
+#!/usr/bin/env node
+
+// TODO(vojta): pre-commit hook for validating messages
+// TODO(vojta): report errors, currently Q silence everything which really sucks
+
+var child = require('child_process');
+var fs = require('fs');
+var util = require('util');
+var q = require('qq');
+
+var GIT_LOG_CMD = 'git log --grep="%s" -E --format=%s %s..HEAD';
+var GIT_TAG_CMD = 'git describe --tags --abbrev=0';
+
+var HEADER_TPL = '<a name="%s"></a>\n# %s (%s)\n\n';
+var LINK_ISSUE = '[#%s](https://github.com/angular/angular.js/issues/%s)';
+var LINK_COMMIT = '[%s](https://github.com/angular/angular.js/commit/%s)';
+
+var EMPTY_COMPONENT = '$$';
+var MAX_SUBJECT_LENGTH = 80;
+
+
+var warn = function() {
+  console.log('WARNING:', util.format.apply(null, arguments));
+};
+
+
+var parseRawCommit = function(raw) {
+  if (!raw) return null;
+
+  var lines = raw.split('\n');
+  var msg = {}, match;
+
+  msg.hash = lines.shift();
+  msg.subject = lines.shift();
+  msg.closes = [];
+  msg.breaks = [];
+
+  lines.forEach(function(line) {
+    match = line.match(/Closes\s#(\d+)/);
+    if (match) msg.closes.push(parseInt(match[1]));
+  });
+  
+  match = raw.match(/BREAKING CHANGE:([\s\S]*)/);
+  if (match) {
+    console.log('found!!!')
+    msg.breaks.push(match[1]);
+  }
+  
+
+  msg.body = lines.join('\n');
+  match = msg.subject.match(/^(.*)\((.*)\)\:\s(.*)$/);
+
+  if (!match || !match[1] || !match[3]) {
+    warn('Incorrect message: %s %s', msg.hash, msg.subject);
+    return null;
+  }
+
+  if (match[3].length > MAX_SUBJECT_LENGTH) {
+    warn('Too long subject: %s %s', msg.hash, msg.subject);
+    match[3] = match[3].substr(0, MAX_SUBJECT_LENGTH);
+  }
+
+  msg.type = match[1];
+  msg.component = match[2];
+  msg.subject = match[3];
+
+  return msg;
+};
+
+
+var linkToIssue = function(issue) {
+  return util.format(LINK_ISSUE, issue, issue);
+};
+
+
+var linkToCommit = function(hash) {
+  return util.format(LINK_COMMIT, hash.substr(0, 8), hash);
+};
+
+
+var currentDate = function() {
+  var now = new Date();
+  var pad = function(i) {
+    return ('0' + i).substr(-2);
+  };
+
+  return util.format('%d-%s-%s', now.getFullYear(), pad(now.getMonth() + 1), pad(now.getDate()));
+};
+
+
+var printSection = function(stream, title, section) {
+  var components = Object.getOwnPropertyNames(section).sort();
+
+  if (!components.length) return;
+
+  stream.write(util.format('\n## %s\n\n', title));
+
+  components.forEach(function(name) {
+    var prefix = '-';
+    var nested = section[name].length > 1;
+
+    if (name !== EMPTY_COMPONENT) {
+      if (nested) {
+        stream.write(util.format('- **%s:**\n', name));
+        prefix = '  -';
+      } else {
+        prefix = util.format('- **%s:**', name);
+      }
+    }
+
+    section[name].forEach(function(commit) {
+      stream.write(util.format('%s %s (%s', prefix, commit.subject, linkToCommit(commit.hash)));
+      if (commit.closes.length) {
+        stream.write(', closes ' + commit.closes.map(linkToIssue).join(', '));
+      }
+      stream.write(')\n');
+    });
+  });
+
+  stream.write('\n');
+};
+
+
+var readGitLog = function(grep, from) {
+  var deffered = q.defer();
+
+  // TODO(vojta): if it's slow, use spawn and stream it instead
+  child.exec(util.format(GIT_LOG_CMD, grep, '%H%n%s%n%b%n==END==', from), function(code, stdout, stderr) {
+    var commits = [];
+
+    stdout.split('\n==END==\n').forEach(function(rawCommit) {
+      var commit = parseRawCommit(rawCommit);
+      if (commit) commits.push(commit);
+    });
+
+    deffered.resolve(commits);
+  });
+
+  return deffered.promise;
+};
+
+
+var writeChangelog = function(stream, commits, version) {
+  var sections = {
+    fix: {},
+    feat: {},
+    breaks: {}
+  };
+
+  sections.breaks[EMPTY_COMPONENT] = [];
+
+  commits.forEach(function(commit) {
+    var section = sections[commit.type];
+    var component = commit.component || EMPTY_COMPONENT;
+
+    if (section) {
+      section[component] = section[component] || [];
+      section[component].push(commit);
+    }
+
+    commit.breaks.forEach(function(breakMsg) {
+      sections.breaks[EMPTY_COMPONENT].push({
+        subject: breakMsg,
+        hash: commit.hash,
+        closes: []
+      });
+    });
+  });
+
+  stream.write(util.format(HEADER_TPL, version, version, currentDate()));
+  printSection(stream, 'Bug Fixes', sections.fix);
+  printSection(stream, 'Features', sections.feat);
+  printSection(stream, 'Breaking Changes', sections.breaks);
+}
+
+
+var getPreviousTag = function() {
+  var deffered = q.defer();
+  child.exec(GIT_TAG_CMD, function(code, stdout, stderr) {
+    if (code) deffered.reject('Cannot get the previous tag.');
+    else deffered.resolve(stdout.replace('\n', ''));
+  });
+  return deffered.promise;
+};
+
+
+var generate = function(version, file) {
+  getPreviousTag().then(function(tag) {
+    console.log('Reading git log since', tag);
+    readGitLog('^fix|^feat|Breaks', tag).then(function(commits) {
+      console.log('Parsed', commits.length, 'commits');
+      console.log('Generating changelog to', file || 'stdout', '(', version, ')');
+      writeChangelog(file ? fs.createWriteStream(file) : process.stdout, commits, version);
+    });
+  });
+};
+
+
+// publish for testing
+exports.parseRawCommit = parseRawCommit;
+
+// hacky start if not run by jasmine :-D
+if (process.argv.join('').indexOf('jasmine-node') === -1) {
+  generate(process.argv[2], process.argv[3]);
+}
@@ -0,0 +1,43 @@
+describe('changelog.js', function() {
+  var ch = require('./changelog');
+
+  describe('parseRawCommit', function() {
+    it('should parse raw commit', function() {
+      var msg = ch.parseRawCommit(
+          '9b1aff905b638aa274a5fc8f88662df446d374bd\n' +
+          'feat(scope): broadcast $destroy event on scope destruction\n' +
+          'perf testing shows that in chrome this change adds 5-15% overhead\n' +
+          'when destroying 10k nested scopes where each scope has a $destroy listener\n');
+
+      expect(msg.type).toBe('feat');
+      expect(msg.hash).toBe('9b1aff905b638aa274a5fc8f88662df446d374bd');
+      expect(msg.subject).toBe('broadcast $destroy event on scope destruction');
+      expect(msg.body).toBe('perf testing shows that in chrome this change adds 5-15% overhead\n' +
+          'when destroying 10k nested scopes where each scope has a $destroy listener\n')
+      expect(msg.component).toBe('scope');
+    });
+
+
+    it('should parse closed issues', function() {
+      var msg = ch.parseRawCommit(
+          '13f31602f396bc269076ab4d389cfd8ca94b20ba\n' +
+          'feat(ng-list): Allow custom separator\n' +
+          'bla bla bla\n\n' +
+          'Closes #123\nCloses #25\n');
+
+      expect(msg.closes).toEqual([123, 25]);
+    });
+
+
+    it('should parse breaking changes', function() {
+      var msg = ch.parseRawCommit(
+          '13f31602f396bc269076ab4d389cfd8ca94b20ba\n' +
+          'feat(ng-list): Allow custom separator\n' +
+          'bla bla bla\n\n' +
+          'Breaks first breaking change\nsomething else\n' +
+          'Breaks another breaking change\n');
+
+      expect(msg.breaks).toEqual(['first breaking change', 'another breaking change']);
+    });
+  });
+});
@@ -0,0 +1,80 @@
+<a name="v1.0.0rc3"></a>
+# v1.0.0rc3 (2012-03-27)
+
+
+## Bug Fixes
+
+- **$compile:**
+  - create new (isolate) scopes for directives on root elements ([5390fb37](https://github.com/angular/angular.js/commit/5390fb37d2c01937922613fc57df4986af521787), closes [#817](https://github.com/angular/angular.js/issues/817))
+  - don't touch static element attributes ([9cb2195e](https://github.com/angular/angular.js/commit/9cb2195e61a78e99020ec19d687a221ca88b5900))
+  - Merge interpolated css class when replacing an element ([f49eaf8b](https://github.com/angular/angular.js/commit/f49eaf8bf2df5f4e0e82d6c89e849a4f82c8d414))
+- **$http:**
+  - don't send Content-Type header when no data ([1a5bebd9](https://github.com/angular/angular.js/commit/1a5bebd927ecd22f9c34617642fdf58fe3f62efb), closes [#749](https://github.com/angular/angular.js/issues/749))
+- **$log:**
+  - avoid console.log.apply calls in IE ([15213ec2](https://github.com/angular/angular.js/commit/15213ec212769837cb2b7e781ffc5bfd598d27ca), closes [#805](https://github.com/angular/angular.js/issues/805))
+- **$resource:**
+  - support escaping of ':' in resource url ([6d6f8753](https://github.com/angular/angular.js/commit/6d6f875345e01f2c6c63ef95164f6f39e923da15))
+- **compiler:**
+  - allow transclusion of root elements ([9918b748](https://github.com/angular/angular.js/commit/9918b748be01266eb10db39d51b4d3098d54ab66))
+- **e2e runner:**
+  - fix typo that caused errors on IE8 ([ee5a5352](https://github.com/angular/angular.js/commit/ee5a5352fd4b94cedee6ef20d4bf2d43ce77e00b), closes [#806](https://github.com/angular/angular.js/issues/806))
+- **forEach:**
+  - should ignore prototypically inherited properties ([8d7e6948](https://github.com/angular/angular.js/commit/8d7e6948496ff26ef1da8854ba02fcb8eebfed61), closes [#813](https://github.com/angular/angular.js/issues/813))
+- **forms:**
+  - Remove double registering of form ([1faafa31](https://github.com/angular/angular.js/commit/1faafa31582c4e9413f48dc7d12f5b681f9fe9fd))
+  - Set ng-valid/ng-invalid correctly ([08bfea18](https://github.com/angular/angular.js/commit/08bfea183a850b29da270eac47f80b598cbe600f))
+- **init:**
+  - use jQuery#ready for init if available ([cb2ad9ab](https://github.com/angular/angular.js/commit/cb2ad9abf24e6f855cc749efe3155bd7987ece9d), closes [#818](https://github.com/angular/angular.js/issues/818))
+- **json:**
+  - added support for iso8061 timezone ([5ac14f63](https://github.com/angular/angular.js/commit/5ac14f633a69f49973b5512780c6ec7752405967))
+- **matchers.toHaveClass:**
+  - Correct reference to angular.mock.dump ([f701ce08](https://github.com/angular/angular.js/commit/f701ce08f9d63be05fc3b92f57ad473e1e749b2d))
+- **ng-switch:**
+  - properly destroy child scopes ([2315d9b3](https://github.com/angular/angular.js/commit/2315d9b3610994b36c44e4a97fb1427d59471ce8))
+- **ngDocSpec:**
+  - fix broken tests ([53b6f522](https://github.com/angular/angular.js/commit/53b6f522a56eea314cbd084816e08f24b2c7879f))
+- **ngForm:**
+  - alias name||ngForm ([823adb23](https://github.com/angular/angular.js/commit/823adb231995e917bc060bfa49453e2a96bac2b6))
+- **ngRepeat:**
+  - correct variable reference in error message ([935c1018](https://github.com/angular/angular.js/commit/935c1018da05dbf3124b2dd33619c4a3c82d7a2a))
+- **ngView:**
+  - controller not published ([21e74c2d](https://github.com/angular/angular.js/commit/21e74c2d2e8e985b23711785287feb59965cbd90))
+- **q:**
+  - resolve all of nothing to nothing ([ac75079e](https://github.com/angular/angular.js/commit/ac75079e2113949d5d64adbcf23d56f3cf295d41))
+- **select:**
+  - multiselect failes to update view on selection insert ([6ecac8e7](https://github.com/angular/angular.js/commit/6ecac8e71a84792a434d21db2c245b3648c55f18))
+
+
+## Features
+
+- **$compile:**
+  - do not interpolate boolean attributes, rather evaluate them ([a08cbc02](https://github.com/angular/angular.js/commit/a08cbc02e78e789a66e9af771c410e8ad1646e25))
+- **$controller:**
+  - support controller registration via $controllerProvider ([d54dfecb](https://github.com/angular/angular.js/commit/d54dfecb00fba41455536c5ddd55310592fdaf84))
+- **$route:**
+  - when matching consider trailing slash as optional ([a4fe51da](https://github.com/angular/angular.js/commit/a4fe51da3ba0dc297ecd389e230d6664f250c9a6), closes [#784](https://github.com/angular/angular.js/issues/784))
+- **assertArgFn:**
+  - should support array annotated fns ([4b8d9260](https://github.com/angular/angular.js/commit/4b8d926062eb4d4483555bdbdec4656f585ab40b))
+- **http:**
+  - added params parameter ([73c85930](https://github.com/angular/angular.js/commit/73c8593077155a9f2e8ef42efd4c497eba0bef4f))
+- **injector:**
+  - infer _foo_ as foo ([f13dd339](https://github.com/angular/angular.js/commit/f13dd3393dfb7a33565c9360342c193bc0bddcb6))
+- **input.radio:**
+  - Allow value attribute to be interpolated ([ade6c452](https://github.com/angular/angular.js/commit/ade6c452753145c84884d17027a7865bf4b34b0c))
+- **jqLite:**
+  - make injector() and scope() work with the document object ([5fdab52d](https://github.com/angular/angular.js/commit/5fdab52dd7c269f99839f4fa6b5854d9548269fa))
+  - add .controller() method ([6c5a05ad](https://github.com/angular/angular.js/commit/6c5a05ad49a1e083570c3dfe331403398f899dbe))
+- **ngValue:**
+  - allow radio inputs to have non string values ([09e175f0](https://github.com/angular/angular.js/commit/09e175f02cca0f4a295fd0c9b980cd8f432e722b), closes [#816](https://github.com/angular/angular.js/issues/816))
+- **scope:**
+  - broadcast $destroy event on scope destruction ([9b1aff90](https://github.com/angular/angular.js/commit/9b1aff905b638aa274a5fc8f88662df446d374bd))
+- **scope.$eval:**
+  - Allow passing locals to the expression ([192ff61f](https://github.com/angular/angular.js/commit/192ff61f5d61899e667c6dbce4d3e6e399429d8b))
+
+
+## Breaking Changes
+
+- boolean attrs are evaluated rather than interpolated ([a08cbc02](https://github.com/angular/angular.js/commit/a08cbc02e78e789a66e9af771c410e8ad1646e25))
+- ng-bind-attr directive removed ([55027132](https://github.com/angular/angular.js/commit/55027132f3d57e5dcf94683e6e6bd7b0aae0087d))
+- any app that depends on this service and its fallback to Modernizr, please ([aaedefb9](https://github.com/angular/angular.js/commit/aaedefb92e6bec6626e173e5155072c91471596a))
+
@@ -0,0 +1,5 @@
+#!/bin/bash
+
+rake compile
+gzip -c < build/angular.min.js > build/angular.min.js.gzip
+ls -l build/angular.min.*
@@ -1,9 +1,10 @@
@charset "UTF-8";

-[ng\:cloak], .ng-cloak {
+[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak],
+.ng-cloak, .x-ng-cloak {
  display: none;
 }

-.ng-format-negative {
-  color: red;
+ng\:form {
+  display: block;
 }
@@ -1,92 +0,0 @@
-@ngdoc overview
-@name angular.inputType
-@description
-
-Angular {@link guide/dev_guide.forms forms} allow you to build complex widgets. However for
-simple widget which are based on HTML input text element a simpler way of providing the validation
-and parsing is also provided. `angular.inputType` is a short hand for creating a widget which
-already has the DOM listeners and `$render` method supplied. The only thing which needs to
-be provided by the developer are the optional `$validate` listener and
-`$parseModel` or `$parseModel` methods.
-
-All `inputType` widgets support:
-
-  - CSS classes:
-    - **`ng-valid`**: when widget is valid.
-    - **`ng-invalid`**: when widget is invalid.
-    - **`ng-pristine`**: when widget has not been modified by user action.
-    - **`ng-dirty`**: when has been modified do to user action.
-
-  - Widget properties:
-    - **`$valid`**: When widget is valid.
-    - **`$invalid`**: When widget is invalid.
-    - **`$pristine`**: When widget has not been modified by user interaction.
-    - **`$dirty`**: When user has been modified do to user interaction.
-    - **`$required`**: When the `<input>` element has `required` attribute. This means that the
-       widget will have `REQUIRED` validation error if empty.
-    - **`$disabled`**: When the `<input>` element has `disabled` attribute.
-    - **`$readonly`**: When the `<input>` element has `readonly` attribute.
-
-  - Widget Attribute Validators:
-    - **`required`**: Sets `REQUIRED` validation error key if the input is empty
-    - **`ng:pattern`** Sets `PATTERN` validation error key if the value does not match the
-      RegExp pattern expression. Expected value is `/regexp/` for inline patterns or `regexp` for
-      patterns defined as scope expressions.
-
-
-
-# Example
-
-<doc:example>
-<doc:source>
-   <script>
-     angular.inputType('json', function() {
-       this.$parseView = function() {
-         try {
-           this.$modelValue = angular.fromJson(this.$viewValue);
-           if (this.$error.JSON) {
-             this.$emit('$valid', 'JSON');
-           }
-         } catch (e) {
-             this.$emit('$invalid', 'JSON');
-         }
-       }
-
-       this.$parseModel = function() {
-         this.$viewValue = angular.toJson(this.$modelValue);
-       }
-     });
-
-     function Ctrl() {
-       this.data = {
-         framework:'angular',
-         codenames:'supper-powers'
-       }
-       this.required = false;
-       this.disabled = false;
-       this.readonly = false;
-     }
-   </script>
-   <div ng:controller="Ctrl">
-     <form name="myForm">
-       <input type="json" ng:model="data" size="80"
-              ng:required="{{required}}" ng:disabled="{{disabled}}"
-              ng:readonly="{{readonly}}"/><br/>
-       Required: <input type="checkbox" ng:model="required"> <br/>
-       Disabled: <input type="checkbox" ng:model="disabled"> <br/>
-       Readonly: <input type="checkbox" ng:model="readonly"> <br/>
-      <pre>data={{data}}</pre>
-       <pre>myForm={{myForm}}</pre>
-     </form>
-   </div>
-</doc:source>
-<doc:scenario>
-  it('should invalidate on wrong input', function() {
-    expect(element('form[name=myForm]').prop('className')).toMatch('ng-valid');
-    input('data').enter('{}');
-    expect(binding('data')).toEqual('data={\n  }');
-    input('data').enter('{');
-    expect(element('form[name=myForm]').prop('className')).toMatch('ng-invalid');
-  });
-</doc:scenario>
-</doc:example>
@@ -0,0 +1,5 @@
+@ngdoc overview
+@name angular.module.ng
+@description
+
+The `ng` is an angular module which contains all of the core angular services.
@@ -1,25 +0,0 @@
-@ngdoc overview
-@name angular.service
-@description
-
-The services API provides objects for carrying out common web app tasks.  Service objects are
-managed by angular's {@link guide/dev_guide.di dependency injection system}.
-
-* {@link angular.service.$browser $browser } - Provides an instance of a browser object
-* {@link angular.service.$cookieStore $cookieStore } - Provides key / value storage backed by
-session cookies
-* {@link angular.service.$cookies $cookies } - Provides read / write access to browser cookies
-* {@link angular.service.$defer $defer } - Defers function execution and try / catch block
-* {@link angular.service.$document $document } - Provides reference to `window.document` element
-* {@link angular.service.$exceptionHandler $exceptionHandler } - Receives uncaught angular
-exceptions
-* {@link angular.service.$location $location } - Parses the browser location URL
-* {@link angular.service.$log $log } - Provides logging service
-* {@link angular.service.$resource $resource } - Creates objects for interacting with RESTful
-server-side data sources
-* {@link angular.service.$route $route } - Provides deep-linking services
-* {@link angular.service.$window $window } - References the browsers `window` object
-* {@link angular.service.$xhr $xhr} - Generates an XHR request.
-
-For information on how angular services work and how to write your own services, see {@link
-guide/dev_guide.services Angular Services} in the angular Developer Guide.
@@ -2,71 +2,6 @@
@name API Reference
@description

-## Angular Compiler API
-
-* {@link angular.widget Widgets} - Angular custom DOM element
-* {@link angular.directive Directives} - Angular DOM element attributes
-* {@link angular.markup Markup} and {@link angular.attrMarkup Attribute Markup}
-* {@link angular.filter Filters} - Angular output filters
-* {@link angular.compile angular.compile()} - Template compiler
-
-## Angular Scope API
-
-* {@link angular.scope Scope Object} - Angular scope object
-
-
-## Angular Services & Dependency Injection API
-
-* {@link angular.service Angular Services}
-* {@link angular.injector angular.injector() }
-
-
-## Angular Testing API
-
-* {@link angular.mock Testing Mocks API} - Mock objects for testing
-* {@link
-https://docs.google.com/document/d/11L8htLKrh6c92foV71ytYpiKkeKpM4_a5-9c3HywfIc/edit?hl=en_US
-Angular Scenario Runner} - Automated scenario testing documentation
-
-
-## Angular Utility Functions
-
-### HTML & DOM Manipulation
-
-* {@link angular.element angular.element()}
-
-### Misc
-
-* {@link angular.bind angular.bind() }
-* {@link angular.extend angular.extend() }
-* {@link angular.forEach angular.forEach() }
-* {@link angular.identity angular.identity() }
-* {@link angular.noop angular.noop() }
-
-
-## Type Identification
-
-* {@link angular.isArray angular.isArray() }
-* {@link angular.isDate angular.isDate() }
-* {@link angular.isDefined angular.isDefined() }
-* {@link angular.isFunction angular.isFunction() }
-* {@link angular.isNumber angular.isNumber() }
-* {@link angular.isObject angular.isObject() }
-* {@link angular.isString angular.isString() }
-* {@link angular.isUndefined angular.isUndefined() }
-
-## Strings
-
-* {@link angular.lowercase angular.lowercase() }
-* {@link angular.uppercase angular.uppercase() }
-
-### JSON
-
-* {@link angular.fromJson angular.fromJson() }
-* {@link angular.toJson angular.toJson() }
-
-
-
-## Utility methods for JavaScript types
-* {@link angular.Object Object API} - Utility functions for JavaScript objects
-* {@link angular.Array Array API} - Utility functions for JavaScript arrays
+Use the API Refference documentation when you need more information about a specific feature. Check out
+{@link guide/ Developer Guide} for AngularJS concepts. If you are new to AngularJS we recomend the
+{@link tutorial/ Tutorial}.
@@ -8,10 +8,8 @@ detection, and preventing invalid form submission.
 <doc:example>
 <doc:source>
   <script>
-   function UserForm() {
-     this.state = /^\w\w$/;
-     this.zip = /^\d\d\d\d\d$/;
-     this.master = {
+   function UserForm($scope) {
+     var master = {
       name: 'John Smith',
       address:{
         line1: '123 Main St.',
@@ -23,55 +21,77 @@ detection, and preventing invalid form submission.
         {type:'phone', value:'1(234) 555-1212'}
       ]
     };
-     this.cancel();
+
+     $scope.state = /^\w\w$/;
+     $scope.zip = /^\d\d\d\d\d$/;
+
+     $scope.cancel = function() {
+       $scope.form = angular.copy(master);
+     };
+
+     $scope.save = function() {
+       master = $scope.form;
+       $scope.cancel();
+     };
+
+     $scope.addContact = function() {
+       $scope.form.contacts.push({type:'', value:''});
+     };
+
+     $scope.removeContact = function(contact) {
+       var contacts = $scope.form.contacts;
+       for (var i = 0, ii = contacts.length; i < ii; i++) {
+         if (contact === contacts[i]) {
+           contacts.splice(i, 1);
+         }
+       }
+     };
+
+     $scope.isCancelDisabled = function() {
+       return angular.equals(master, $scope.form);
+     };
+
+     $scope.isSaveDisabled = function() {
+       return $scope.myForm.$invalid || angular.equals(master, $scope.form);
+     };
+
+     $scope.cancel();
   }
-
-   UserForm.prototype = {
-     cancel: function() {
-       this.form = angular.copy(this.master);
-     },
-
-     save: function() {
-       this.master = this.form;
-       this.cancel();
-     }
-   };
   </script>
-   <div ng:controller="UserForm">
+   <div ng-controller="UserForm">

     <form name="myForm">

       <label>Name:</label><br/>
-       <input type="text" ng:model="form.name" required/> <br/><br/>
+       <input type="text" ng-model="form.name" required/> <br/><br/>

       <label>Address:</label> <br/>
-       <input type="text" ng:model="form.address.line1" size="33" required/> <br/>
-       <input type="text" ng:model="form.address.city" size="12" required/>,
-       <input type="text" ng:model="form.address.state" size="2"
-              ng:pattern="state" required/>
-       <input type="text" ng:model="form.address.zip" size="5"
-              ng:pattern="zip" required/><br/><br/>
+       <input type="text" ng-model="form.address.line1" size="33" required/> <br/>
+       <input type="text" ng-model="form.address.city" size="12" required/>,
+       <input type="text" ng-model="form.address.state" size="2"
+              ng-pattern="state" required/>
+       <input type="text" ng-model="form.address.zip" size="5"
+              ng-pattern="zip" required/><br/><br/>

       <label>Contacts:</label>
-       [ <a href="" ng:click="form.contacts.$add()">add</a> ]
-       <div ng:repeat="contact in form.contacts">
-         <select ng:model="contact.type">
+       [ <a href="" ng-click="addContact()">add</a> ]
+       <div ng-repeat="contact in form.contacts">
+         <select ng-model="contact.type">
           <option>email</option>
           <option>phone</option>
           <option>pager</option>
           <option>IM</option>
         </select>
-         <input type="text" ng:model="contact.value" required/>
-          [ <a href="" ng:click="form.contacts.$remove(contact)">X</a> ]
+         <input type="text" ng-model="contact.value" required/>
+          [ <a href="" ng-click="removeContact(contact)">X</a> ]
       </div>
-     <button ng:click="cancel()" ng:disabled="{{master.$equals(form)}}">Cancel</button>
-     <button ng:click="save()" ng:disabled="{{myForm.$invalid || master.$equals(form)}}">Save</button>
+     <button ng-click="cancel()" ng-disabled="isCancelDisabled()">Cancel</button>
+     <button ng-click="save()" ng-disabled="isSaveDisabled()">Save</button>
   </form>

   <hr/>
   Debug View:
-   <pre>form={{form}}
-   master={{master}}</pre>
+   <pre>form={{form}}</pre>
   </div>
 </doc:source>
 <doc:scenario>
@@ -18,8 +18,8 @@ to retrieve Buzz activity and comments.
     this.Activity = $resource(
      'https://www.googleapis.com/buzz/v1/activities/:userId/:visibility/:activityId/:comments',
      {alt: 'json', callback: 'JSON_CALLBACK'},
-      { get:     {method: 'JSON', params: {visibility: '@self'}},
-        replies: {method: 'JSON', params: {visibility: '@self', comments: '@comments'}}
+      { get:     {method: 'JSONP', params: {visibility: '@self'}},
+        replies: {method: 'JSONP', params: {visibility: '@self', comments: '@comments'}}
      });
    }
    BuzzController.prototype = {
@@ -31,22 +31,22 @@ to retrieve Buzz activity and comments.
     }
    };
    </script>
-    <div ng:controller="BuzzController">
-     <input ng:model="userId"/>
-     <button ng:click="fetch()">fetch</button>
+    <div ng-controller="BuzzController">
+     <input ng-model="userId"/>
+     <button ng-click="fetch()">fetch</button>
     <hr/>
-     <div class="buzz" ng:repeat="item in activities.data.items">
+     <div class="buzz" ng-repeat="item in activities.data.items">
      <h1 style="font-size: 15px;">
-       <img ng:src="{{item.actor.thumbnailUrl}}" style="max-height:30px;max-width:30px;"/>
-       <a ng:href="{{item.actor.profileUrl}}">{{item.actor.name}}</a>
-       <a href ng:click="expandReplies(item)" style="float: right;">
+       <img ng-src="{{item.actor.thumbnailUrl}}" style="max-height:30px;max-width:30px;"/>
+       <a ng-href="{{item.actor.profileUrl}}">{{item.actor.name}}</a>
+       <a href ng-click="expandReplies(item)" style="float: right;">
        Expand replies: {{item.links.replies[0].count}}
       </a>
      </h1>
      {{item.object.content | html}}
-      <div class="reply" ng:repeat="reply in item.replies.data.items" style="margin-left: 20px;">
-       <img ng:src="{{reply.actor.thumbnailUrl}}" style="max-height:30px;max-width:30px;"/>
-       <a ng:href="{{reply.actor.profileUrl}}">{{reply.actor.name}}</a>:
+      <div class="reply" ng-repeat="reply in item.replies.data.items" style="margin-left: 20px;">
+       <img ng-src="{{reply.actor.thumbnailUrl}}" style="max-height:30px;max-width:30px;"/>
+       <a ng-href="{{reply.actor.profileUrl}}">{{reply.actor.name}}</a>:
       {{reply.content | html}}
      </div>
     </div>
@@ -5,7 +5,7 @@
 Deep linking allows you to encode the state of the application in the URL so that it can be
 bookmarked and the application can be restored from the URL to the same state.

-While <angular/> does not force you to deal with bookmarks in any particular way, it has services
+While angular does not force you to deal with bookmarks in any particular way, it has services
 which make the common case described here very easy to implement.

 # Assumptions
@@ -30,87 +30,122 @@ In this example we have a simple app which consist of two screens:
 * Welcome: url `welcome` Show the user contact information.
 * Settings: url `settings` Show an edit screen for user contact information.

+<example module="deepLinking" deps="angular-sanitize.js">
+ <file name="script.js">
+   angular.module('deepLinking', ['ngSanitize'])
+     .config(function($routeProvider) {
+        $routeProvider.
+          when("/welcome",  {template:'welcome.html',  controller:WelcomeCntl}).
+          when("/settings", {template:'settings.html', controller:SettingsCntl});
+     });

-The two partials are defined in the following URLs:
+   AppCntl.$inject = ['$scope', '$route']
+   function AppCntl($scope, $route) {
+    $scope.$route = $route;

-* <a href="./examples/settings.html" ng:ext-link>./examples/settings.html</a>
-* <a href="./examples/welcome.html" ng:ext-link>./examples/welcome.html</a>
+    // initialize the model to something useful
+    $scope.person = {
+     name:'anonymous',
+     contacts:[{type:'email', url:'anonymous@example.com'}]
+    };
+   }

-<doc:example>
- <doc:source jsfiddle="false">
-    <script>
-     AppCntl.$inject = ['$route']
-     function AppCntl($route) {
-      // define routes
-      $route.when("/welcome",  {template:'./examples/welcome.html',  controller:WelcomeCntl});
-      $route.when("/settings", {template:'./examples/settings.html', controller:SettingsCntl});
-      $route.parent(this);
+   function WelcomeCntl($scope) {
+    $scope.greet = function() {
+     alert("Hello " + $scope.person.name);
+    };
+   }

-      // initialize the model to something useful
-      this.person = {
-       name:'anonymous',
-       contacts:[{type:'email', url:'anonymous@example.com'}]
-      };
-     }
+   function SettingsCntl($scope, $location) {
+    $scope.cancel = function() {
+     $scope.form = angular.copy($scope.person);
+    };

-     function WelcomeCntl($route){}
-     WelcomeCntl.prototype = {
-      greet: function() {
-       alert("Hello " + this.person.name);
-      }
-     };
+    $scope.save = function() {
+     angular.copy($scope.form, $scope.person);
+     $location.path('/welcome');
+    };

-     SettingsCntl.$inject = ['$location'];
-     function SettingsCntl($location){
-      this.$location = $location;
-      this.cancel();
-     }
-     SettingsCntl.prototype = {
-      cancel: function() {
-       this.form = angular.copy(this.person);
-      },
+    $scope.cancel();
+   }
+ </file>
+ <file name="style.css">
+   [ng-view] {
+     border: 1px solid blue;
+     margin: 0;
+     padding:1em;
+   }

-      save: function() {
-       angular.copy(this.form, this.person);
-       this.$location.path('/welcome');
-      }
-     };
-    </script>
-    <div ng:controller="AppCntl">
+   .partial-info {
+      background-color: blue;
+      color: white;
+      padding: 3px;
+    }
+ </file>
+ <file name="index.html">
+    <div ng-controller="AppCntl">
      <h1>Your App Chrome</h1>
      [ <a href="welcome">Welcome</a> | <a href="settings">Settings</a> ]
      <hr/>
-      <span style="background-color: blue; color: white; padding: 3px;">
+      <span class="partial-info">
        Partial: {{$route.current.template}}
      </span>
-      <ng:view style="border: 1px solid blue; margin: 0; display:block; padding:1em;"></ng:view>
+      <div ng-view></div>
      <small>Your app footer </small>
    </div>
- </doc:source>
- <doc:scenario>
+ </file>
+ <file name="settings.html">
+   <label>Name:</label>
+   <input type="text" ng:model="form.name" required>
+
+   <div ng:repeat="contact in form.contacts">
+     <select ng:model="contact.type">
+       <option>url</option>
+       <option>email</option>
+       <option>phone</option>
+     </select>
+     <input type="text" ng:model="contact.url">
+     [ <a href="" ng:click="form.contacts.$remove(contact)">X</a> ]
+   </div>
+   <div>
+     [ <a href="" ng:click="form.contacts.$add()">add</a> ]
+   </div>
+
+   <button ng:click="cancel()">Cancel</button>
+   <button ng:click="save()">Save</button>
+ </file>
+ <file name="welcome.html">
+   Hello {{person.name}},
+   <div>
+     Your contact information:
+     <div ng:repeat="contact in person.contacts">{{contact.type}}:
+       <span ng-bind-html="contact.url|linky"></span>
+     </div>
+   </div>
+ </file>
+ <file name="scenario.js">
   it('should navigate to URL', function() {
-    element('a:contains(Welcome)').click();
-    expect(element('ng\\:view').text()).toMatch(/Hello anonymous/);
-    element('a:contains(Settings)').click();
-    input('form.name').enter('yourname');
-    element(':button:contains(Save)').click();
-    element('a:contains(Welcome)').click();
-    expect(element('ng\\:view').text()).toMatch(/Hello yourname/);
+     element('a:contains(Welcome)').click();
+     expect(element('[ng-view]').text()).toMatch(/Hello anonymous/);
+     element('a:contains(Settings)').click();
+     input('form.name').enter('yourname');
+     element(':button:contains(Save)').click();
+     element('a:contains(Welcome)').click();
+     expect(element('[ng-view]').text()).toMatch(/Hello yourname/);
   });
- </doc:scenario>
-</doc:example>
+ </file>
+</example>



 # Things to notice

 * Routes are defined in the `AppCntl` class. The initialization of the controller causes the
-  initialization of the {@link api/angular.service.$route $route} service with the proper URL
-routes.
-* The  {@link api/angular.service.$route $route} service then watches the URL and instantiates the
+  initialization of the {@link api/angular.module.ng.$route $route} service with the proper URL
+  routes.
+* The  {@link api/angular.module.ng.$route $route} service then watches the URL and instantiates the
  appropriate controller when the URL changes.
-* The  {@link api/angular.widget.ng:view ng:view} widget loads the view when the URL changes. It
-also
-  sets the view scope to the newly instantiated controller.
+* The  {@link api/angular.module.ng.$compileProvider.directive.ngView ngView} widget loads the
+  view when the URL changes. It also sets the view scope to the newly instantiated controller.
 * Changing the URL is sufficient to change the controller and view. It makes no difference whether
  the URL is changed programatically or by the user.
@@ -10,44 +10,56 @@ allow a user to enter data.
 <doc:example>
 <doc:source>
  <script>
-    function FormController() {
-      this.user = {
+    function FormController($scope) {
+      $scope.user = {
        name: 'John Smith',
        address:{line1: '123 Main St.', city:'Anytown', state:'AA', zip:'12345'},
        contacts:[{type:'phone', value:'1(234) 555-1212'}]
      };
-      this.state = /^\w\w$/;
-      this.zip = /^\d\d\d\d\d$/;
+      $scope.state = /^\w\w$/;
+      $scope.zip = /^\d\d\d\d\d$/;
+
+      $scope.addContact = function() {
+         $scope.user.contacts.push({type:'email', value:''});
+      };
+
+      $scope.removeContact = function(contact) {
+        for (var i = 0, ii = this.user.contacts.length; i < ii; i++) {
+          if (contact === this.user.contacts[i]) {
+            $scope.user.contacts.splice(i, 1);
+          }
+        }
+      };
    }
  </script>
-  <div ng:controller="FormController" class="example">
+  <div ng-controller="FormController" class="example">

-    <label>Name:</label><br/>
-    <input type="text" ng:model="user.name" required/> <br/><br/>
+    <label>Name:</label><br>
+    <input type="text" ng-model="user.name" required/> <br><br>

-    <label>Address:</label><br/>
-    <input type="text" ng:model="user.address.line1" size="33" required> <br/>
-    <input type="text" ng:model="user.address.city" size="12" required>,
-    <input type="text" ng:model="user.address.state" size="2"
-           ng:pattern="state" required>
-    <input type="text" ng:model="user.address.zip" size="5"
-           ng:pattern="zip"  required><br/><br/>
+    <label>Address:</label><br>
+    <input type="text" ng-model="user.address.line1" size="33" required> <br>
+    <input type="text" ng-model="user.address.city" size="12" required>,
+    <input type="text" ng-model="user.address.state"
+           ng-pattern="state" size="2" required>
+    <input type="text" ng-model="user.address.zip" size="5"
+           ng-pattern="zip" required><br><br>

    <label>Phone:</label>
-    [ <a href="" ng:click="user.contacts.$add()">add</a> ]
-    <div ng:repeat="contact in user.contacts">
-      <select ng:model="contact.type">
+    [ <a href="" ng-click="addContact()">add</a> ]
+    <div ng-repeat="contact in user.contacts">
+      <select ng-model="contact.type">
        <option>email</option>
        <option>phone</option>
        <option>pager</option>
        <option>IM</option>
      </select>
-      <input type="text" ng:model="contact.value" required/>
-       [ <a href="" ng:click="user.contacts.$remove(contact)">X</a> ]
+      <input type="text" ng-model="contact.value" required>
+       [ <a href="" ng-click="removeContact(contact)">X</a> ]
    </div>
    <hr/>
    Debug View:
-    <pre>user={{user}}</pre>
+    <pre>user={{user | json}}</pre>
  </div>

 </doc:source>
@@ -90,12 +102,12 @@ allow a user to enter data.

 # Things to notice

-* The user data model is initialized {@link api/angular.directive.ng:controller controller} and is
-available in
-  the {@link api/angular.scope scope} with the initial data.
+* The user data model is initialized {@link api/angular.module.ng.$compileProvider.directive.ngController controller} and is
+  available in the {@link api/angular.module.ng.$rootScope.Scope scope} with the initial data.
 * For debugging purposes we have included a debug view of the model to better understand what
  is going on.
-* The {@link api/angular.widget.input input widgets} simply refer to the model and are data-bound.
+* The {@link api/angular.module.ng.$compileProvider.directive.input input directives} simply refer
+  to the model and are data-bound.
 * The inputs {@link guide/dev_guide.forms validate}. (Try leaving them blank or entering non digits
  in the zip field)
 * In your application you can simply read from or write to the model and the form will be updated.
@@ -5,12 +5,12 @@
 <doc:example>
 <doc:source>
  <script>
-    function HelloCntl() {
-      this.name = 'World';
+    function HelloCntl($scope) {
+      $scope.name = 'World';
    }
  </script>
-  <div ng:controller="HelloCntl">
-    Your name: <input type="text" ng:model="name" value="World"/>
+  <div ng-controller="HelloCntl">
+    Your name: <input type="text" ng-model="name" value="World"/>
    <hr/>
    Hello {{name}}!
  </div>
@@ -29,9 +29,10 @@
 Take a look through the source and note:

 * The script tag that {@link guide/dev_guide.bootstrap bootstraps} the angular environment.
-* The text {@link api/angular.widget.input input widget} which is bound to the greeting name text.
+* The text {@link api/angular.module.ng.$compileProvider.directive.input input widget} which is
+  bound to the greeting name text.
 * No need for listener registration and event firing on change events.
-* The implicit presence of the `name` variable which is in the root {@link api/angular.scope scope}.
+* The implicit presence of the `name` variable which is in the root {@link api/angular.module.ng.$rootScope.Scope scope}.
 * The double curly brace `{{markup}}`, which binds the name variable to the greeting text.
 * The concept of {@link guide/dev_guide.templates.databinding data binding}, which reflects any
 changes to the
@@ -44,7 +44,7 @@ allowing you to send links to specific screens in your app.

 # Services

-{@link api/angular.service Services}: Services are long lived objects in your applications that are
+{@link api/angular.module.ng Services}: Services are long lived objects in your applications that are
 available across controllers. A collection of useful services are pre-bundled with angular but you
 will likely add your own. Services are initialized using dependency injection, which resolves the
 order of initialization. This safeguards you from the perils of global state (a common way to
@@ -14,9 +14,8 @@ no connection between the controller and the view.
 <doc:example>
  <doc:source>
    <script>
-    function TicTacToeCntl($location){
-      this.$location = $location;
-      this.cellStyle= {
+    function TicTacToeCntl($scope, $location) {
+      $scope.cellStyle= {
        'height': '20px',
        'width': '20px',
        'border': '1px solid black',
@@ -24,30 +23,40 @@ no connection between the controller and the view.
        'vertical-align': 'middle',
        'cursor': 'pointer'
      };
-      this.reset();
-      this.$watch('$location.search().board', this.readUrl);
-    }
-    TicTacToeCntl.prototype = {
-      dropPiece: function(row, col) {
-        if (!this.winner && !this.board[row][col]) {
-          this.board[row][col] = this.nextMove;
-          this.nextMove = this.nextMove == 'X' ? 'O' : 'X';
-          this.setUrl();
-        }
-      },
-      reset: function() {
-        this.board = [
+
+      $scope.reset = function() {
+        $scope.board = [
          ['', '', ''],
          ['', '', ''],
          ['', '', '']
        ];
-        this.nextMove = 'X';
-        this.winner = '';
-        this.setUrl();
-      },
-      grade: function() {
-        var b = this.board;
-        this.winner =
+        $scope.nextMove = 'X';
+        $scope.winner = '';
+        setUrl();
+      };
+
+      $scope.dropPiece = function(row, col) {
+        if (!$scope.winner && !$scope.board[row][col]) {
+          $scope.board[row][col] = $scope.nextMove;
+          $scope.nextMove = $scope.nextMove == 'X' ? 'O' : 'X';
+          setUrl();
+        }
+      };
+
+      $scope.reset();
+      $scope.$watch(function() { return $location.search().board;}, readUrl);
+
+      function setUrl() {
+        var rows = [];
+        angular.forEach($scope.board, function(row) {
+          rows.push(row.join(','));
+        });
+        $location.search({board: rows.join(';') + '/' + $scope.nextMove});
+      }
+
+      function grade() {
+        var b = $scope.board;
+        $scope.winner =
          row(0) || row(1) || row(2) ||
          col(0) || col(1) || col(2) ||
          diagonal(-1) || diagonal(1);
@@ -55,38 +64,32 @@ no connection between the controller and the view.
        function col(col) { return same(b[0][col], b[1][col], b[2][col]);}
        function diagonal(i) { return same(b[0][1-i], b[1][1], b[2][1+i]);}
        function same(a, b, c) { return (a==b && b==c) ? a : '';};
-      },
-      setUrl: function() {
-        var rows = [];
-        angular.forEach(this.board, function(row){
-          rows.push(row.join(','));
-        });
-        this.$location.search({board: rows.join(';') + '/' + this.nextMove});
-      },
-      readUrl: function(scope, value) {
+      }
+
+      function readUrl(value) {
        if (value) {
          value = value.split('/');
-          this.nextMove = value[1];
+          $scope.nextMove = value[1];
          angular.forEach(value[0].split(';'), function(row, col){
-            this.board[col] = row.split(',');
-          }, this);
-          this.grade();
+            $scope.board[col] = row.split(',');
+          });
+          grade();
        }
      }
-    };
+    }
    </script>

    <h3>Tic-Tac-Toe</h3>
-    <div ng:controller="TicTacToeCntl">
+    <div ng-controller="TicTacToeCntl">
    Next Player: {{nextMove}}
-    <div class="winner" ng:show="winner">Player {{winner}} has won!</div>
+    <div class="winner" ng-show="winner">Player {{winner}} has won!</div>
      <table class="board">
-        <tr ng:repeat="row in board" style="height:15px;">
-          <td ng:repeat="cell in row" ng:style="cellStyle"
-              ng:click="dropPiece($parent.$index, $index)">{{cell}}</td>
+        <tr ng-repeat="row in board" style="height:15px;">
+          <td ng-repeat="cell in row" ng-style="cellStyle"
+              ng-click="dropPiece($parent.$index, $index)">{{cell}}</td>
        </tr>
      </table>
-      <button ng:click="reset()">reset board</button>
+      <button ng-click="reset()">reset board</button>
    </div>
  </doc:source>
  <doc:scenario>
@@ -121,4 +124,4 @@ board variable.
 * The view can call any controller function.
 * In this example, the `setUrl()` and `readUrl()` functions copy the game state to/from the URL's
 hash so the browser's back button will undo game steps. See deep-linking. This example calls {@link
-api/angular.scope.$watch $watch()} to set up a listener that invokes `readUrl()` when needed.
+api/angular.module.ng.$rootScope.Scope#$watch $watch()} to set up a listener that invokes `readUrl()` when needed.
@@ -2,99 +2,53 @@
@name Developer Guide: Initializing Angular: Automatic Initialization
@description

-Angular initializes automatically when you load the angular script into your page, specifying
-angular's `ng:autobind` attribute with no arguments:
-
-        <script src="angular.js" ng:autobind>
-
-From a high-level view, this is what happens during angular's automatic initialization process:
-
-1. The browser loads the page, and then runs the angular script.
-
-    The `ng:autobind` attribute tells angular to compile and manage the whole HTML document. The
-compilation phase is initiated in the page's `onLoad()` handler. Angular doesn't begin processing
-the page until after the page load is complete.
-
-2. Angular finds the root of the HTML document and creates the global variable `angular` in the
-global namespace. Everything that angular subsequently creates is bound to fields in this global
-object.
-
-3. Angular walks the DOM looking for angular widgets, directives, and markup (such as `ng:init` or
-`ng:repeat`). As angular encounters these, it creates child scopes as necessary and attaches them
-to the DOM, registers listeners on those scopes, associates any controller functions with their
-data and their part of the view, and ultimately constructs a runnable application. The resulting
-app features two-way data-binding and a nice separation between data, presentation, and business
-logic.
-
-4. For the duration of the application session (while the page is loaded), angular monitors the
-state of the application, and updates the view and the data model whenever the state of either one
-changes.
-
-For details on how the compiler works, see {@link dev_guide.compiler Angular HTML Compiler}.
-
-
-## Initialization Options
-
-The reason why `ng:autobind` exists is because angular should not assume that the entire HTML
-document should be processed just because the `angular.js` script is included. In order to compile
-only a part of the document, specify the ID of the element you want to use for angular's root
-element as the value of the `ng:autobind` attribute:
-
-        ng:autobind="angularContent"
-
-
-## Auto-bootstrap with `#autobind`
-
-In some rare cases you can't define the `ng:` prefix before the script tag's attribute  (for
-example,  in some CMS systems). In those situations it is possible to auto-bootstrap angular by
-appending `#autobind` to the `<script src=...>` URL, like in this snippet:
+For Angular to manage the DOM for your application, it needs to compile some or all of an HTML page.  Angular does this initialization automatically when you load the angular.js script into your page and insert an `ngApp` directive (attribute) into one of the page's elements.  For example, we can tell Angular to initialize the entire document:

 <pre>
-  <!doctype html>
-  <html>
-   <head>
-    <script type="text/javascript"
-            src="http://code.angularjs.org/angular.js#autobind"></script>
-   </head>
-   <body>
-     <div xmlns:ng="http://angularjs.org">
-       Hello {{'world'}}!
-     </div>
-   </body>
-  </html>
+<!doctype html>
+<html ng-app>
+  <head>
+    <script src="angular.js"></script>
+  </head>
+  <body>
+    I can add: {{ 1+2 }}.
+  </body>
+</html>
 </pre>

-As with `ng:autobind`, you can specify an element id that should be exclusively targeted for
-compilation as the value of the `#autobind`, for example: `#autobind=angularContent`.
+You can also tell Angular to manage only a portion of a page.  You would want to do this if you are using some other framework to manage other parts of the page.  You do this by placing the `ngApp` directive on one or more container elements in the document.  For example:

-## Filename Restrictions for Auto-bootstrap
+<pre>
+<div ng-app>
+  I can add: {{ 1+2 }}
+</div>
+</pre>

-In order for us to find the auto-bootstrap from a script attribute or URL fragment, the value of
-the `script` `src` attribute that loads the angular script must match one of these naming
-conventions:
+You can also ask `ngApp` to load additional {@link api/angular.module modules} containing services, directives or filers that you'll use on the page.

- `angular.js`
- `angular-min.js`
- `angular-x.x.x.js`
- `angular-x.x.x.min.js`
- `angular-x.x.x-xxxxxxxx.js` (dev snapshot)
- `angular-x.x.x-xxxxxxxx.min.js` (dev snapshot)
- `angular-bootstrap.js` (used for development of angular)
+<pre>
+<div ng-app="AwesomeModule">
+...
+</div>
+</pre

-Optionally, any of the filename formats above can be prepended with a relative or absolute URL that
-ends with `/`.

-## Global Angular Object
+From a high-level, here's what Angular does during the initialization process:

-The angular script creates a single global variable `angular` in the global namespace. All angular
-APIs are bound to fields of this global object.
+1. The browser loads the page, and then runs the Angular script. Angular then waits for the
+`DOMContentLoaded` (or 'Load') event to attempt to initialize.
+
+2. Angular looks for the `ngApp` directive. If found it compilies the DOM element containing `ngApp` and its children.
+
+3. Angular creates a global variable `angular` and binds all Angular APIs to this object's fields.


 ## Related Topics

+* {@link dev_guide.compiler Angular HTML Compiler}
 * {@link dev_guide.bootstrap Initializing Angular}
 * {@link dev_guide.bootstrap.manual_bootstrap Manual Initialization}

 ## Related API

-{@link api/angular.compile Compiler API}
+{@link api/angular.module.ng.$compile Compiler API}
@@ -2,38 +2,41 @@
@name  Developer Guide: Initializing Angular: Manual Initialization
@description

-Letting angular handle the initialization process (bootstrapping) is a handy way to start using
-angular, but advanced users who want more control over the initialization process can choose to use
-the manual bootstrapping method instead.
+In the vast majority of cases you'll want to let Angular handle initialization automatically.
+If, however, you need to delay Angular from managing the page right after the DOMContentLoaded
+event fires, you'll need to control this initialization manually.

-The best way to get started with manual bootstrapping is to look at the what happens when you use
-{@link api/angular.directive.ng:autobind ng:autobind}, by showing each step of the process
-explicitly.
+To initialize Angular -- after you've done your own special-purpose initialization -- just call
+the {@link api/angular.bootstrap bootstrap()} function with the HTML container node that you want
+Angular to manage.  In automatic initialization you'd do this by adding the `ngApp` attribute to
+the same node.  Now, you won't use `ngApp` anywhere in your document.
+
+To show the contrast of manual vs. automatic initialization, this automatic method:

 <pre>
 <!doctype html>
-<html xmlns:ng="http://angularjs.org">
+<html ng-app>
+<head>
+  <script src="http://code.angularjs.org/angular.js"></script>
+...
+</pre
+
+is the same as this manual method:
+
+<pre>
+<!doctype html>
+<html>
 <head>
  <script src="http://code.angularjs.org/angular.js"></script>
  <script>
     angular.element(document).ready(function() {
-       angular.compile(document)().$apply();
+       angular.bootstrap(document);
     });
  </script>
 </head>
-<body>
-Hello {{'World'}}!
-</body>
-</html>
+...
 </pre>

-This is the sequence that your code should follow if you bootstrap angular on your own:
-
-1. After the page is loaded, find the root of the HTML template, which is typically the root of
-the document.
-2. Run angular's {@link dev_guide.compiler Angular HTML compiler}, which converts a template into
-an executable, bi-directionally bound application.
-

 ## Related Topics

@@ -43,4 +46,4 @@ an executable, bi-directionally bound application.

 ## Related API

-{@link api/angular.compile Compiler API}
+{@link api/angular.module.ng.$compile Compiler API}
@@ -2,25 +2,25 @@
@name Developer Guide: Initializing Angular
@description

-Initializing angular consists of loading the `angular.js` script in your page, and specifying how
-angular should process and manage the page. To initialize angular you do the following:
+Initializing Angular consists of loading the `angular.js` script in your page, and specifying how
+Angular should process and manage the page. To initialize Angular you do the following:

-* Specify the angular namespace in the `<html>` page
-* Choose which flavor of angular script to load (debug or production)
-* Specify whether or not angular should process and manage the page automatically (`ng:autobind`)
+* Specify the Angular namespace in the `<html>` page
+* Choose which flavor of Angular script to load (debug or production)
+* Specify whether or not Angular should process and manage the page automatically (`ngApp`)

-The simplest way to initialize angular is to load the angular script and tell angular to compile
+The simplest way to initialize Angular is to load the Angular script and tell Angular to compile
 and manage the whole page. You do this as follows:

 <pre>
 <!doctype html>
-<html xmlns:ng="http://angularjs.org">
+<html ng-app>
  <head>
    ...
  </head>
  <body>
    ...
-    <script src="angular.js" ng:autobind>
+    <script src="angular.js">
  </body>
 </pre>

@@ -29,20 +29,21 @@ and manage the whole page. You do this as follows:

        <html xmlns:ng="http://angularjs.org">

-You need to declare the angular namespace declaration in the following cases:
-
-* For all types of browser if you are using XHTML.
-* For Internet Explorer older than version 9 (because older versions of IE do not render widgets
-properly for either HTML or XHTML).
+You need to add the Angular namespace declaration if you use `ng:something` style of declaring
+Angular directives and you write your templates as XHTML. Or when you are targeting Internet
+Explorer older than version 9 (because older versions of IE do not render namespace
+properly for either HTML or XHTML). For more info please read {@link ie Internet Explorer
+Compatibility} doc.


 ## Creating Your Own Namespaces

-When you are ready to define your own {@link dev_guide.compiler.widgets widgets}, you must create
-your own namespace in addition to specifying the angular namespace. You use your own namespace to
-form the fully qualified name for widgets that you create.
+When you are ready to define your own {@link guide/directive
+directive}, you may chose to create your own namespace in addition to specifying the Angular
+namespace. You use your own namespace to form the fully qualified name for directives that you
+create.

-For example, you could map the alias `my` to your domain, and create a widget called `my:widget`.
+For example, you could map the alias `my` to your domain, and create a directive called `my:directive`.
 To create your own namespace, simply add another `xmlns` tag to your page, create an alias, and set
 it to your unique domain:

@@ -51,7 +52,7 @@ it to your unique domain:

 ## Loading the Angular Bootstrap Script

-The angular bootstrap script comes in two flavors; a debug script, and a production script:
+The Angular bootstrap script comes in two flavors; a debug script, and a production script:

 * angular-[version].js - This is a human-readable file, suitable for development and debugging.
 * angular-[version].min.js - This is a compressed and obfuscated file, suitable for use in
@@ -1,38 +0,0 @@
-@ngdoc overview
-@name Developer Guide: Angular HTML Compiler: Directives: Creating Custom Angular Directives
-@description
-
-The following code snippet shows how to define a custom directive. You define a new directive by
-extending the {@link dev_guide.compiler Angular HTML compiler}. The code snippet below is a
-simplified definition of the built-in {@link api/angular.directive.ng:bind ng:bind} directive:
-
-<pre>
-angular.directive('ng:bind', function(expression, compiledElement) {
-    var compiler = this;
-    return function(linkElement) {
-        var currentScope = this;
-        currentScope.$watch(expression, function(value) {
-            linkElement.text(value);
-        });
-    };
-});
-</pre>
-
-# Additional Compiler Methods for Custom Directives
-
-The angular compiler exposes methods that you may need to use when writing your own widgets and
-directives.  For example, the `descend()` method lets you control whether the compiler ignores or
-processes child elements of the element it is compiling.  For information on this and other
-compiler methods, see the {@link api/angular.compile Compiler API doc}.
-
-
-## Related Docs
-
-* {@link dev_guide.compiler.directives Understanding Angular Directives}
-* {@link dev_guide.compiler.directives_widgets Comparing Directives and Widgets}
-* {@link dev_guide.compiler Angular HTML Compiler}
-
-
-## Related API
-
-* {@link api/angular.directive Angular Directive API}.
@@ -1,46 +0,0 @@
-@ngdoc overview
-@name Developer Guide: Angular HTML Compiler: Understanding Angular Directives
-@description
-
-An angular directive is a custom HTML attribute that angular knows how to process.  You add them to
-a template element like any other attribute.  Angular directives all have a `ng:` prefix.  In the
-following example, the angular directive (`ng:controller`) is  a div tag:
-
-        <div ng:controller>
-
-You use angular directives to modify DOM element properties. The element you modify can be an
-existing HTML element type or a custom DOM element type that you created. You can use any number of
-directives per element.
-
-You add angular directives to a standard HTML tag as in the following example, in which we have
-added the {@link api/angular.directive.ng:click ng:click} directive to a button tag:
-
-        <button ng:model="button1" ng:click="foo()">Click This</button>
-
-In the example above, `name` is the standard HTML attribute, and `ng:click` is the angular
-directive. The `ng:click` directive lets you implement custom behavior in an associated controller
-function.
-
-In the next example, we add the {@link api/angular.directive.ng:bind ng:bind} directive to a
-`<span>` tag:
-
-        <span ng:bind="1+2"></span>
-
-The `ng:bind` directive tells angular to set up {@link dev_guide.templates.databinding data
-binding} between the data model and the view for the specified expression.  When the angular {@link
-dev_guide.compiler compiler} encounters an `ng:bind` directive in a template, it passes the
-attribute value to the `ng:bind` function, which in turn sets up the data binding. On any change to
-the expression in the model, the view is updated to display the span text with the changed
-expression value.
-
-
-## Related Topics
-
-* {@link dev_guide.compiler Angular HTML Compiler}
-* {@link dev_guide.compiler.directives.creating_directives Creating Angular Directives}
-* {@link dev_guide.compiler.directives_widgets Comparing Directives and Widgets}
-
-## Related API:
-
-* {@link api/angular.directive Directive API}
-* {@link api/angular.widget Widget API}
@@ -1,47 +0,0 @@
-@ngdoc overview
-@name Developer Guide: Angular HTML Compiler: Comparing Directives and Attribute Widgets
-@description
-
-Although directives and {@link dev_guide.compiler.widgets attribute widgets} appear the same in a
-template (`ng:init` is a directive, `ng:repeat` is an attribute widget), there is a difference in
-the order in which they are evaluated.  The user of existing directives or widgets cannot determine
-the order of evaluation. The evaluation order is the responsibility of the developer creating
-custom directives and widgets.
-
-For example, consider this piece of HTML, which uses the `ng:repeat`, `ng:init`, and `ng:bind`
-widget and directives:
-
-<pre>
-<ul ng:init="people=['mike', 'mary']">
-<li ng:repeat="person in people"
-    ng:init="a=a+1"
-    ng:bind="person">
-</li>
-</ul>
-</pre>
-
-Notice that the order of execution matters here. Because we want to run the `ng:init="a=a+1` and
-`ng:bind="person"` once for each `person in people`, we need to execute {@link
-api/angular.widget.@ng:repeat ng:repeat} to make copies of the `<li>` element before we run the
-{@link api/angular.directive.ng:init ng:init}, and {@link api/angular.directive.ng:bind ng:bind}
-for each of the `<li>`copies.
-
-If you implemented `ng:repeat` as a directive, there would be no guarantee that the attributes
-`ng:repeat`, `ng:init`, and `ng:bind` would be evaluated in the order they are declared, because
-the order of element attributes in HTML is not significant to the browser.
-
-So, when creating a custom HTML attribute, you will have to consider whether a directive or a
-widget is more appropriate. When the order of execution doesn't matter, directives are the right
-choice. In a situation where the order matters and one attribute should be processed with a higher
-priority than others, use a widget for the attribute that must be processed first.
-
-
-## Related Topics
-
-* {@link dev_guide.compiler.directives Understanding Angular Directives}
-* {@link dev_guide.compiler.widgets Understanding Angular Widgets}
-
-## Related API:
-
-* {@link api/angular.directive Directive API}
-* {@link api/angular.widget Widget API}
@@ -1,96 +0,0 @@
-@ngdoc overview
-@name Developer Guide: Angular HTML Compiler: Extending the Angular Compiler
-@description
-
-Let's say that we want to create a new DOM element called `<my:greeter/>` that displays a greeting.
-We want this HTML source:
-
-<pre>
-   <div ng:init="s='Hello'; n='World'">
-      <my:greeter salutation="s" name="n"></my:greeter>
-  </div>
-</pre>
-
-to produce this DOM:
-
-<pre>
-<div ng:init="s='Hello'; n='World'">
-<my:greeter salutation="s" name="n"/>
-  <span class="salutation">Hello</span>
-  <span class="name">World</span>!
-</my:greeter>
-</div>
-</pre>
-
-That is, the new `<my:greeter></my:greeter>` tag's `salutation` and `name` attributes should be
-transformed by the compiler such that two `<span>` tags display the values of the attributes, with
-CSS classes applied to the output.
-
-The following code snippet shows how to write a following widget definition that will be processed
-by the compiler. Note that you have to declare the {@link dev_guide.bootstrap namespace} `my` in
-the page:
-
-<pre>
-angular.widget('my:greeter', function(compileElement){
-  var compiler = this;
-  compileElement.css('display', 'block');
-  var salutationExp = compileElement.attr('salutation');
-  var nameExp = compileElement.attr('name');
-  return function(linkElement){
-    var salutationSpan = angular.element('<span class="salutation"></span');
-    var nameSpan = angular.element('<span class="name"></span>');
-    linkElement.append(salutationSpan);
-    linkElement.append(' ');
-    linkElement.append(nameSpan);
-    linkElement.append('!');
-    this.$watch(salutationExp, function(value){
-      salutationSpan.text(value);
-     });
-    this.$watch(nameExp, function(value){
-    nameSpan.text(value);
-    });
-  };
-});
-</pre>
-
-
-Note: For more about widgets, see {@link dev_guide.compiler.widgets Understanding Angular Widgets}
-and the {@link api/angular.widget widget API reference page}.
-
-# Compilation process for `<my:greeter>`
-
-Here are the steps that the compiler takes in processing the page that contains the widget
-definition above:
-
-## Compile Phase
-
-1. Recursively traverse the DOM depth-first.
-2. Find the angular.widget definition.
-3. Find and execute the widget's compileElement function, which includes the following steps:
-   1. Add a style element with attribute display: block; to the template DOM so that the browser
-knows to treat the element as block element for rendering. (Note: because this style element was
-added on the template compileElement, this style is automatically applied to any clones of the
-template (i.e. any repeating elements)).
-   2. Extract the salutation and name HTML attributes as angular expressions.
-4. Return the aggregate link function, which includes just one link function in this example.
-
-## Link Phase
-
-1. Execute the aggregate link function, which includes the following steps:
-   1. Create a <span> element set to the salutation class
-   2. Create a <span> element set to the name class.
-2. Add the span elements to the linkElement. (Note: be careful not to add them to the
-compileElement, because that's the template.)
-3. Set up watches on the expressions. When an expression changes, copy the data to the
-corresponding spans.
-
-
-## Related Topics
-
-* {@link dev_guide.compiler Angular HTML Compiler}
-* {@link dev_guide.compiler.understanding_compiler Understanding How the Compiler Works}
-* {@link dev_guide.compiler.testing_dom_element Testing a New DOM Element}
-
-## Related API
-
-* {@link api/angular.compile angular.compile()}
@@ -1,92 +0,0 @@
-@ngdoc overview
-@name Developer Guide: Angular HTML Compiler: Understanding Angular Markup
-@description
-
-Markup in angular is a feature that you can use in templates to transform the content of DOM
-elements prior to the compile phase (in which elements are compiled and link functions are
-returned.  See the {@link dev_guide.compiler compiler docs} for details on how the compiler
-works.)  The ability to make pre-compile changes to DOM elements lets you create shorthand for
-{@link api/angular.widget widget} and {@link api/angular.directive directive} declarations.
-
-Angular provides one built-in markup feature: the double curly-braces used to declare binding
-points (between the model and view) for angular expressions.  You can also create your own custom
-markup.
-
-# Using Double Curly-brace Markup (`{{ }}`)
-
-The double curly-brace (`{{ }}`) markup translates an enclosed expression into an {@link
-api/angular.directive.ng:bind ng:bind} directive:
-
-<pre>
-{{expression}}
-</pre>
-
-is transformed to:
-
-<pre>
-<span ng:bind="expression"></span>
-</pre>
-
-Markup is useful for the simple reason that `{{1+2}}` is easier to write and understand than `<span
-ng:bind="1+2"></span>`. After markup shorthand is expanded into the DOM elements it represents, the
-expanded elements are then {@link dev_guide.compiler compiled} normally.
-
-
-# Creating Custom Markup
-
-Let's say you want to define markup that transforms `---` into a horizontal rule (`<hr/>`):
-
-<pre>
-header
---
-footer
-</pre>
-
-should translate to:
-<pre>
-header
-<hr/>
-footer
-</pre>
-
-Here is how you could extend the angular compiler to create the "---" markup:
-
-<pre>
-angular.markup('---', function(text, textNode, parentElement) {
-    var compiler = this;
-    var index = text.indexOf('---');
-    if (index > -1) {
-        textNode.after(text.substring(index + 3));
-        textNode.after(angular.element('<hr>'));
-        textNode.after(text.substring(0, index));
-        textNode.remove();
-    }
-});
-</pre>
-
-Unlike the way the compiler processes {@link api/angular.widget widgets} and {@link
-api/angular.directive directives} (matching the name of the handler function to a DOM element or
-attribute name), the compiler calls every markup handler for every text node, giving the handler a
-chance to transform the text. The markup handler needs to find all the matches in the text.
-
-## Attribute Markup
-
-Attribute markup extends the angular compiler in a very similar way to markup, except that it
-allows you to modify the state of attribute text rather then the content of a node.
-
-<pre>
-angular.attrMarkup('extraClass', function(attrValue, attrName, element){
- if (attrName == 'additional-class') {
-   element.addClass(attrValue);
- }
-});
-</pre>
-
-
-## Related Topics
-
-* {@link dev_guide.compiler Angular HTML Compiler}
-
-## Related API
-
-* {@link api/angular.compile Compiler API Reference}
@@ -2,10 +2,11 @@
@name Developer Guide: Angular HTML Compiler
@description

-The core of angular is its HTML compiler.  The compiler processes angular directives, widgets, and
-markup to transform a static HTML page into a dynamic web application.
+The core of Angular is its HTML compiler.  The compiler processes Angular 
+{@link guide/directive directives} allowing them to transform a
+static HTML page into a dynamic web application.

-The default HTML transformations that the angular compiler provides are useful for building generic
+The default HTML transformations that the Angular compiler provides are useful for building generic
 apps, but you can also extend the compiler to create a domain-specific language for building
 specific types of web applications.

@@ -15,12 +16,9 @@ All compilation takes place in the web browser; no server is involved.
 ## Related Topics

 * {@link dev_guide.compiler.understanding_compiler Understanding How the Compiler Works}
-* {@link dev_guide.compiler.extending_compiler Extending the Angular Compiler}
 * {@link dev_guide.compiler.testing_dom_element Testing a New DOM Element}
-* {@link dev_guide.compiler.widgets Understanding Angular Widgets}
-* {@link dev_guide.compiler.directives Understanding Angular Directives}
-* {@link dev_guide.compiler.markup Understanding Angular Markup}

 ## Related API

-* {@link api/angular.compile Angular Compiler API}
+* {@link api/angular.module.ng.$compile Angular Compiler API}
+* {@link guide/directive Directives API}
@@ -10,8 +10,7 @@

 * {@link dev_guide.compiler Angular HTML Compiler}
 * {@link dev_guide.compiler.understanding_compiler Understanding How the Compiler Works}
-* {@link dev_guide.compiler.extending_compiler Extending the Angular Compiler}

 ## Related API

-* {@link api/angular.compile angular.compile()}
+* {@link api/angular.module.ng.$compile $compile()}
@@ -2,67 +2,33 @@
@name Developer Guide: Angular HTML Compiler: Understanding How the Compiler Works
@description

-Every {@link api/angular.widget widget}, {@link api/angular.directive directive} and {@link
-dev_guide.compiler.markup markup} is defined with a compile function, which the angular compiler
-executes on each widget or directive it encounters. The compile function optionally returns a link
-function.  This compilation process happens automatically when the page is loaded when you specify
-`ng:autobind` in the script tag from which you load the angular script file.  (See {@link
-dev_guide.bootstrap Initializing Angular}.)
+The {@link api/angular.module.ng.$compile compiler} is responsible for applying
+{@link guide/directive directives} to the HTML. The directives
+extend the behavior of HTML elements and can effect the DOM structure, presentation, and behavior.
+This allows Angular to teach the browser new tricks.

-The compile and link functions are related as follows:
+The compilation starts at the root element and proceeds in a depth-first order. As the compiler
+visits each node it collects the directives, orders them by priority and executes their compile
+function. The result of the compilation process is a linking function. The linking function
+can be used on the template clones to quickly bind the directives with the scope.

-* **compile function** — Registers a listener for the widget, directive, or markup expression. The
-compiler calls this function exactly once.
-* **link function** — Sets up the listener registered by the compile function. This function can be
-called multiple times, once per cloned DOM element. For example, in the case of the {@link
-api/angular.widget.@ng:repeat repeater widget} used in a list element (`<li ng:repeat="[item in
-dataset]"`), the link function gets called to set up a listener on each element in the list.
+The result of the compilation process is a live view. We say 'live' since any changes to the
+model attached to the {@link api/angular.module.ng.$rootScope.Scope scope} are reflected in the view,
+and any changes in the view are reflected in the scope. This makes the scope the 'single source of
+truth'.

-Note that angular's built-in widgets, directives, and markup have predefined compile and link
-functions that you don't need to modify. When you create your own widgets, directives, or markup,
-you must write compile and link functions for them. Refer to the {@link api/angular.compile
-Compiler API} for details.
-
-When the angular compiler compiles a page, it proceeds through 3 phases: Compile, Create Root
-Scope, and Link:
-
-1. Compile Phase
-
-   1. Recursively traverse the DOM, depth-first.
-   2. Look for a matching compile function of type widget, then markup, then directive.
-   3. If a compile function is found then execute it.
-   4. When the compile function completes, it should return a link function. Aggregate this link
-function with all link functions returned previously by step 3.
-   5. Repeat steps 3 and 4 for all compile functions found.
-
-The result of the compilation phase is an aggregate link function, which comprises all of the
-individual link functions.
-
-2. Create Root Scope Phase
-
-* Inject all services into the root scope.
-
-3. Link Phase
-
-   1. Execute the aggregate link function with the root scope. The aggregate link function calls
-all of the individual link functions that were generated in the compile phase.
-   2. If there are any clones of the DOM caused by repeating elements, call the link function
-multiple times, one for each repeating item.
-
-Note that while the compile function is executed exactly once, the link function can be executed
-multiple times, for example, once for each iteration in a repeater.
-
-The angular compiler exposes methods that you will need to make use of when writing your own
-widgets and directives.  For information on these methods, see the {@link api/angular.compile
-Compiler API doc}.
+Since directives allow attachment of behavior to the HTML, the angular philosophy is to use the
+HTML as Domain Specific Language (DSL) when building an application. For example it may be useful
+to declare `TabPanel` directive, or `KeyboardShortcut` directive when for an application.

+For details on how directives are created see {@link guide/directive
+directives}

 ## Related Topics

 * {@link dev_guide.compiler Angular HTML Compiler}
-* {@link dev_guide.compiler.extending_compiler Extending the Angular Compiler}
 * {@link dev_guide.compiler.testing_dom_element Testing a New DOM Element}

 ## Related API

-* {@link api/angular.compile angular.compile()}
+* {@link api/angular.module.ng.$compile $compile()}
@@ -1,95 +0,0 @@
-@ngdoc overview
-@name Developer Guide: Angular HTML Compiler: Widgets: Creating Custom Widgets
-@description
-
-When you create your own widgets, you must set up your own namespace for them.  (See
-dev_guide.bootstrap Initializing Angular} for information about namespaces in angular.)
-
-Let's say we would like to create a new element type in the namespace `my` that can watch an
-expression and `alert()` the user with each new value:
-
-<pre>
-// An element widget
-<my:watch exp="name"></my:watch>
-</pre>
-
-You can implement `my:watch` like this:
-
-<pre>
-angular.widget('my:watch', function(compileElement) {
- var compiler = this;
- var exp = compileElement.attr('exp');
- return function(linkElement) {
-   var currentScope = this;
-   currentScope.$watch(exp, function(value){
-     alert(value);
-   });
- };
-});
-</pre>
-
-
-# Creating a Custom Attribute Widget
-
-Let's implement the same widget as in the example in Defining an Element Widget, but this time as
-an attribute that can be added to any existing DOM element:
-
-<pre>
-// An attribute widget (my:watch) in a div tag
-<div my:watch="name">text</div>
-</pre>
-You can implement `my:watch` attribute like this:
-<pre>
-angular.widget('@my:watch', function(expression, compileElement) {
-  var compiler = this;
-  return function(linkElement) {
-    var currentScope = this;
-    currentScope.$watch(expression, function(value) {
-      alert(value);
-    });
-  };
-});
-</pre>
-
-
-# Live Example of a Custom Element Widget
-
-<doc:example>
-<doc:source>
-<script>
-angular.widget('my:time', function(compileElement){
-  compileElement.css('display', 'block');
-  return function(linkElement){
-    function update() {
-      linkElement.text('Current time is: ' + new Date());
-      setTimeout(update, 1000);
-    }
-    update();
-  };
-});
-</script>
-<my:time></my:time>
-</doc:source>
-<doc:scenario>
-</doc:scenario>
-</doc:example>
-
-
-# Additional Compiler Methods for Custom Widgets
-
-The angular compiler exposes methods that you may need to use of when writing your own widgets and
-directives.  For example, the `descend()` method lets you control whether the compiler ignores or
-processes child elements of the element it is compiling.  For information on this and other
-compiler methods, see the {@link api/angular.compile Compiler API doc}.
-
-
-## Related Topics
-
-* {@link dev_guide.compiler Angular HTML Compiler}
-* {@link dev_guide.compiler.directives Angular Directives}
-* {@link dev_guide.compiler.widgets Angular Widgets}
-* {@link dev_guide.compiler.directives.creating_directives Creating Custom Directives}
-
-## Related API
-
-* {@link api/angular.compile Compiler API}
@@ -1,35 +0,0 @@
-@ngdoc overview
-@name Developer Guide: Angular HTML Compiler: Understanding Angular Widgets
-@description
-
-Widgets are DOM elements that the browser doesn't already understand. Angular provides some
-built-in widgets (such as {@link api/angular.widget.@ng:repeat ng:repeat}), and you can create your
-own custom widgets.
-
-Widgets are intended to manipulate the DOM tree by adding new elements (unlike {@link
-dev_guide.compiler.directives angular directives}, which are intended to modify only element
-properties).
-
-Widgets come in two types:
-
-* Element Widget — A custom DOM element.  An example of a custom element is shown in {@link
-dev_guide.compiler.widgets.creating_widgets Creating Custom Widgets}.
-
-* Attribute Widget — A custom attribute on an existing DOM element.  An attribute widget is similar
-to an angular directive, with the main difference being that an attribute widget will always be
-processed before any directives that are specified on the same element.  Only one attribute widget
-is allowed per element.  An example of an attribute widget is shown in {@link
-dev_guide.compiler.widgets.creating_widgets Creating Custom Widgets}.
-
-
-
-## Related Topics
-
-* {@link dev_guide.compiler Angular HTML Compiler}
-* {@link dev_guide.compiler.directives Angular Directives}
-* {@link dev_guide.compiler.widgets.creating_widgets Creating Custom Widgets}
-* {@link dev_guide.compiler.directives.creating_directives Creating Custom Directives}
-
-## Related API
-
-* {@link api/angular.compile Compiler API}
@@ -28,5 +28,5 @@ book.

 ## Related API

-* {@link api/angular.service Service API}
+* {@link api/angular.module.ng Service API}
 * {@link api/angular.injector Angular Injector API}
@@ -7,15 +7,15 @@ While DI is widely used in statically typed languages such as Java or C++, it ha
 used in JavaScript. Angular brings the benefits of DI into JavaScript apps.

 In angular, DI is implemented as a subsystem that manages dependencies between services,
-controllers, widgets, and filters. The most important of these are {@link api/angular.service
-services}.
+controllers, widgets, and filters.

-Services are objects that handle common tasks in web applications. Angular provides several{@link
-api/angular.service built-in services}, and you can create your own custom services.
+Services are objects that handle common tasks in web applications. Angular provides several {@link
+api/angular.module.ng built-in services}, and you can create your
+{@link dev_guide.services.creating_services own custom services}.

 The main job of angular's DI subsystem is to provide services to angular components that depend on
 them. The way the DI subsystem provides services is as follows: all services are registered with
-angular's {@link api/angular.service service API}, and all components that depend on services
+angular's {@link api/angular.module.ng service API}, and all components that depend on services
 define those dependencies as a property (`$inject`). With this information, the DI subsystem
 manages the creation of service objects and the provision of those objects to the components that
 need them, at the time they need them. The following illustration steps through the sequence of
@@ -25,34 +25,23 @@ events:

 In the illustration above, the dependency injection sequence proceeds as follows:

-1. Service factory functions are registered with angular's service factory repository.
-2. `ng:autobind` triggers angular's bootstrap sequence, during which angular compiles the template,
-creates the root scope, and creates the dependency injector.
-3. The `ng:controller` directive implicitly creates a new child scope, augmented by the application
-of the `PhoneListCtrl` controller function.
-4. The Injector identifies the `$xhr` service as `PhoneListCtrl` controller's only dependency.
-5. The Injector checks if the `$xhr` service has already been instantiated, and if not uses the
-factory function from the service factory repository to construct it.
-6. DI provides the instance of $xhr service to the PhoneListCtrl controller constructor
+1. Module "phonecat" is created and all the service providers are registered with this module.
+   (the "ng" module is created by Angular behind the scenes as well)
+2. `ngApp` triggers bootstrap sequence on given element, during which angular creates injector,
+loads "phonecat" and "ng" modules and compiles the template.
+3. The `ngController` directive implicitly creates a new child scope and instantiates
+`PhoneListCtrl` controller.
+4. Injector identifies the `$http` service as `PhoneListCtrl` controller's only dependency.
+5. Injector checks its instances cache whether the `$http` service has already been instantiated.
+If not uses the provider from the available modules to construct it.
+6. Injector provides the instance of `$http` service to the `PhoneListCtrl` controller constructor.


 ## How Scope Relates to DI

-The {@link api/angular.injector injector} is responsible for resolving the service dependencies in
-the application. It gets created and configured with the creation of a root scope. The injector
-caches instances of services, with the services cache bound to the root scope.
+The root scope of the application is just a service that is available for injection to any part of
+the application under the service name "$rootScope".

-Different root scopes have different instances of the injector. While typical angular applications
-will only have one root scope (and hence the services will act like application singletons), in
-tests it is important to not share singletons across test invocations for isolation reasons. We
-achieve the necessary isolation by having each test create its own separate root scope.
-
-<pre>
-// create a root scope
-var rootScope = angular.scope();
-// access the service locator
-var myService = rootScope.$service('myService');
-</pre>

 ## Inferring dependencies from the signature of the factory function or constructor

@@ -74,7 +63,9 @@ equivalent:

 <pre>
 // given a user defined service
-angular.service('serviceA', ...);
+angular.module('module1', [], function($provide) {
+  $provide.factory('serviceA', ...);
+});

 // inject '$window', 'serviceA', curry 'name';
 function fnA($window, serviceA, name){};
@@ -96,10 +87,107 @@ minifiers/obfuscators. In the future, we may provide a pre-processor which will
 code and insert the `$inject` into the source code so that it can be minified/obfuscated.


+### Dependency inference and variable name shadowing
+
+During inference, the injector considers argument names with leading and trailing underscores to be
+equivivalent to the name without these underscores. For example `_fooSvc_` argument name is treated
+as if it was `fooSvc`, this is useful especially in tests where variable name shadowing can cause
+some friction. This is best illustrated on examples:
+
+When testing a service, it's common to need a reference to it in every single test. This can be
+done in jasmine with DI inference like this:
+
+<pre>
+describe('fooSvc', function() {
+  it('should do this thing', inject(function(fooSvc) {
+    //test fooSvc
+  }));
+
+  it('should do that thing', inject(function(fooSvc) {
+    //test fooSvc
+  }));
+
+  // more its
+});
+</pre>
+
+... but having to inject the service over and over gets easily tiresome.
+
+It's likely better to rewrite these tests with a use of jasmine's `beforeEach`:
+
+<pre>
+describe('fooSvc', function() {
+  var fooSvc;
+
+  beforeEach(inject(function(fooSvc) {
+    fooSvc = fooSvc; // DOESN'T WORK! outer fooSvc is being shadowed
+  }));
+
+  it('should do this thing', function() {
+    //test fooSvc
+  });
+
+  it('should do that thing', function() {
+    //test fooSvc
+  });
+
+  // more its
+});
+</pre>
+
+This obviously won't work because `fooSvc` variable in the describe block is being shadowed by the
+`fooSvc` argument of the beforeEach function. So we have to resort to alternative solutions, like
+for example use of array notation to annotate the beforeEach fn:
+
+<pre>
+describe('fooSvc', function() {
+  var fooSvc;
+
+  beforeEach(inject(['fooSvc', function(fooSvc_) {
+    fooSvc = fooSvc_;
+  }]));
+
+  it('should do this thing', function() {
+    //test fooSvc
+  });
+
+  it('should do that thing', function() {
+    //test fooSvc
+  });
+});
+</pre>
+
+
+That's better, but it's still annoying, especially if you have many services to inject.
+
+To resolve this shadowing problem, the injector considers `_fooSvc_` argument names equal to
+`fooSvc`, so the test can be rewritten like this:
+
+<pre>
+ describe('fooSvc', function() {
+   var fooSvc;
+
+   beforeEach(inject(function(_fooSvc_) {
+     fooSvc = _fooSvc_;
+   }));
+
+   it('should do this thing', function() {
+     //test fooSvc
+   });
+
+   it('should do that thing', function() {
+     //test fooSvc
+   });
+
+   // more its
+ });
+</pre>
+
+
 ## Related Topics

 * {@link dev_guide.services Angular Services}

 ## Related API

-* {@link api/angular.service Services API}
+* {@link api/angular.module.ng Services API}
@@ -6,23 +6,22 @@ The most common place to use dependency injection in angular applications is in
 dev_guide.mvc.understanding_controller controllers}. Here is a simple example:

 <pre>
-function MyController($route){
- // configure the route service
- $route.when(...);
+function MyController($location){
+ // do stuff with the $location service
 }
-MyController.$inject = ['$route'];
+MyController.$inject = ['$location'];
 </pre>

 In this example, the `MyController` constructor function takes one argument, the {@link
-api/angular.service.$route $route} service. Angular is then responsible for supplying the instance
-of `$route` to the controller when the constructor is instantiated. There are two ways to cause
-controller instantiation – by configuring routes with the `$route` service, or by referencing the
-controller from the HTML template, as follows:
+api/angular.module.ng.$location $location} service. Angular is then responsible for supplying the
+instance of `$location` to the controller when the constructor is instantiated. There are two ways
+to cause controller instantiation – by configuring routes with the `$location` service, or by
+referencing the controller from the HTML template, as follows:

 <pre>
 <!doctype html>
-<html xmlns:ng="http://angularjs.org" ng:controller="MyController">
-<script src="http://code.angularjs.org/angular.min.js" ng:autobind></script>
+<html ng-controller="MyController" ng-app>
+<script src="http://code.angularjs.org/angular.min.js"></script>
 <body>
 ...
 </body>
@@ -35,7 +34,7 @@ we have to supply this information to angular in the form of an additional prope
 controller constructor function called `$inject`. Think of it as annotations for JavaScript.

 <pre>
-MyController.$inject = ['$route'];
+MyController.$inject = ['$location'];
 </pre>

 The information in `$inject` is then used by the {@link api/angular.injector injector} to call the
@@ -0,0 +1,178 @@
+@workInProgress
+@ngdoc overview
+@name Developer Guide: E2E Testing
+@description
+
+As applications grow in size and complexity, it becomes unrealistic to rely on manual testing to
+verify the correctness of new features, catch bugs and notice regressions.
+
+To solve this problem, we have built an Angular Scenario Runner which simulates user interactions
+that will help you verify the health of your Angular application.
+
+# Overview
+You will write scenario tests in JavaScript, which describe how your application should behave,
+given a certain interaction in a specific state. A scenario is comprised of one or more it  blocks
+(you can think of these as the requirements of your application), which in turn are made of
+**commands** and **expectations**. Commands tell the Runner to do something with the application
+(such as navigate to a page or click on a button), and expectations tell the Runner to assert
+something about the state (such as the value of a field or the current URL). If any expectation
+fails, the runner marks the `it`  as "failed" and continues on to the next one. Scenarios may also
+have **beforeEach** and **afterEach** blocks, which will be run before (or after) each `it`  block,
+regardless of whether they pass or fail.
+
+<img src="img/guide/scenario_runner.png">
+
+In addition to the above elements, scenarios may also contain helper functions to avoid duplicating
+code in the `it` blocks.
+
+Here is an example of a simple scenario:
+<pre>
+describe('Buzz Client', function() {
+it('should filter results', function() {
+  input('user').enter('jacksparrow');
+  element(':button').click();
+  expect(repeater('ul li').count()).toEqual(10);
+  input('filterText').enter('Bees');
+  expect(repeater('ul li').count()).toEqual(1);
+});
+});
+</pre>
+This scenario describes the requirements of a Buzz Client, specifically, that it should be able to
+filter the stream of the user. It starts by entering a value in the 'user' input field, clicking
+the only button on the page, and then it verifies that there are 10 items listed. It then enters
+'Bees' in the 'filterText' input field and verifies that the list is reduced to a single item.
+
+The API section below lists the available commands and expectations for the Runner.
+
+# API
+Source: {@link https://github.com/angular/angular.js/blob/master/src/ngScenario/dsl.js}
+
+## pause()
+Pauses the execution of the tests until you call `resume()` in the console (or click the resume
+link in the Runner UI).
+
+## sleep(seconds)
+Pauses the execution of the tests for the specified number of `seconds`.
+
+## browser().navigateTo(url)
+Loads the `url` into the test frame.
+
+## browser().navigateTo(url, fn)
+Loads the URL returned by `fn` into the testing frame. The given `url` is only used for the test
+output. Use this when the destination URL is dynamic (that is, the destination is unknown when you
+write the test).
+
+## browser().reload()
+Refreshes the currently loaded page in the test frame.
+
+## browser().window().href()
+Returns the window.location.href of the currently loaded page in the test frame.
+
+## browser().window().path()
+Returns the window.location.pathname of the currently loaded page in the test frame.
+
+## browser().window().search()
+Returns the window.location.search of the currently loaded page in the test frame.
+
+## browser().window().hash()
+Returns the window.location.hash (without `#`) of the currently loaded page in the test frame.
+
+## browser().location().url()
+Returns the {@link api/angular.module.ng.$location $location.url()} of the currently loaded page in
+the test frame.
+
+## browser().location().path()
+Returns the {@link api/angular.module.ng.$location $location.path()} of the currently loaded page in
+the test frame.
+
+## browser().location().search()
+Returns the {@link api/angular.module.ng.$location $location.search()} of the currently loaded page
+in the test frame.
+
+## browser().location().hash()
+Returns the {@link api/angular.module.ng.$location $location.hash()} of the currently loaded page in
+the test frame.
+
+## expect(future).{matcher}
+Asserts the value of the given `future` satisfies the `matcher`. All API statements return a
+`future` object, which get a `value` assigned after they are executed. Matchers are defined using
+`angular.scenario.matcher`, and they use the value of futures to run the expectation. For example:
+`expect(browser().location().href()).toEqual('http://www.google.com')`
+
+## expect(future).not().{matcher}
+Asserts the value of the given `future` satisfies the negation of the `matcher`.
+
+## using(selector, label)
+Scopes the next DSL element selection.
+
+## binding(name)
+Returns the value of the first binding matching the given `name`.
+
+## input(name).enter(value)
+Enters the given `value` in the text field with the given `name`.
+
+## input(name).check()
+Checks/unchecks the checkbox with the given `name`.
+
+## input(name).select(value)
+Selects the given `value` in the radio button with the given `name`.
+
+## input(name).val()
+Returns the current value of an input field with the given `name`.
+
+## repeater(selector, label).count()
+Returns the number of rows in the repeater matching the given jQuery `selector`. The `label` is
+used for test ouput.
+
+## repeater(selector, label).row(index)
+Returns an array with the bindings in the row at the given `index` in the repeater matching the
+given jQuery `selector`. The `label` is used for test output.
+
+## repeater(selector, label).column(binding)
+Returns an array with the values in the column with the given `binding` in the repeater matching
+the given jQuery `selector`. The `label` is used for test output.
+
+## select(name).option(value)
+Picks the option with the given `value` on the select with the given `name`.
+
+## select(name).option(value1, value2...)
+Picks the options with the given `values` on the multi select with the given `name`.
+
+## element(selector, label).count()
+Returns the number of elements that match the given jQuery `selector`. The `label` is used for test
+output.
+
+## element(selector, label).click()
+Clicks on the element matching the given jQuery `selector`. The `label` is used for test output.
+
+## element(selector, label).query(fn)
+Executes the function `fn(selectedElements, done)`, where selectedElements are the elements that
+match the given jQuery `selector` and `done` is a function that is called at the end of the `fn`
+function.  The `label` is used for test output.
+
+## element(selector, label).{method}()
+Returns the result of calling `method` on the element matching the given jQuery `selector`, where
+`method` can be any of the following jQuery methods: `val`, `text`, `html`, `height`,
+`innerHeight`, `outerHeight`, `width`, `innerWidth`, `outerWidth`, `position`, `scrollLeft`,
+`scrollTop`, `offset`. The `label` is used for test output.
+
+## element(selector, label).{method}(value)
+Executes the `method` passing in `value` on the element matching the given jQuery `selector`, where
+`method` can be any of the following jQuery methods: `val`, `text`, `html`, `height`,
+`innerHeight`, `outerHeight`, `width`, `innerWidth`, `outerWidth`, `position`, `scrollLeft`,
+`scrollTop`, `offset`.  The `label` is used for test output.
+
+## element(selector, label).{method}(key)
+Returns the result of calling `method` passing in `key` on the element matching the given jQuery
+`selector`, where `method` can be any of the following jQuery methods: `attr`, `prop`, `css`. The
+`label` is used for test output.
+
+## element(selector, label).{method}(key, value)
+Executes the `method` passing in `key` and `value` on the element matching the given jQuery
+`selector`, where `method` can be any of the following jQuery methods: `attr`,  `prop`, `css`.  The
+`label` is used for test output.
+
+JavaScript is a dynamically typed language which comes with great power of expression, but it also
+come with almost no-help from the compiler. For this reason we feel very strongly that any code
+written in JavaScript needs to come with a strong set of tests. We have built many features into
+angular which makes testing your angular applications easy. So there is no excuse for not do it.
@@ -51,19 +51,26 @@ You can try evaluating different expressions here:
 <doc:example>
 <doc:source>
 <script>
-   function Cntl2() {
-     this.exprs = [];
-     this.expr = '3*10|currency';
+   function Cntl2($scope) {
+     $scope.exprs = [];
+     $scope.expr = '3*10|currency';
+     $scope.addExp = function(expr) {
+        this.exprs.push(expr);
+     };
+
+     $scope.removeExp = function(index) {
+       this.exprs.splice(index, 1);
+     };
   }
 </script>
- <div ng:controller="Cntl2" class="expressions">
+ <div ng-controller="Cntl2" class="expressions">
   Expression:
-   <input type='text' ng:model="expr" size="80"/>
-   <button ng:click="exprs.$add(expr)">Evaluate</button>
+   <input type='text' ng-model="expr" size="80"/>
+   <button ng-click="addExp(expr)">Evaluate</button>
   <ul>
-    <li ng:repeat="expr in exprs">
-      [ <a href="" ng:click="exprs.$remove(expr)">X</a> ]
-      <tt>{{expr}}</tt> => <span ng:bind="$parent.$eval(expr)"></span>
+    <li ng-repeat="expr in exprs">
+      [ <a href="" ng-click="removeExp($index)">X</a> ]
+      <tt>{{expr}}</tt> => <span ng-bind="$parent.$eval(expr)"></span>
     </li>
   </ul>
 </div>
@@ -90,17 +97,17 @@ the global state (a common source of subtle bugs).
 <doc:example>
 <doc:source>
 <script>
-   function Cntl1($window){
-     this.name = 'World';
+   function Cntl1($window, $scope){
+     $scope.name = 'World';

-     this.greet = function() {
+     $scope.greet = function() {
       ($window.mockWindow || $window).alert('Hello ' + this.name);
     }
   }
 </script>
- <div class="example2" ng:controller="Cntl1">
-   Name: <input ng:model="name" type="text"/>
-   <button ng:click="greet()">Greet</button>
+ <div class="example2" ng-controller="Cntl1">
+   Name: <input ng-model="name" type="text"/>
+   <button ng-click="greet()">Greet</button>
 </div>
 </doc:source>
 <doc:scenario>
@@ -154,36 +161,40 @@ JavaScript method instead.
 Built-in types have methods like `[].push()`, but the richness of these methods is limited.
 Consider the example below, which allows you to do a simple search over a canned set of contacts.
 The example would be much more complicated if we did not have the `Array:$filter()`. There is no
-built-in method on `Array` called {@link api/angular.Array.filter $filter} and angular doesn't add
+built-in method on `Array` called {@link api/angular.module.ng.$filter.filter $filter} and angular doesn't add
 it to `Array.prototype` because that could collide with other JavaScript frameworks.

 For this reason the scope expression evaluator augments the built-in types to make them act like
-they have extra methods. The actual method for `$filter()` is `angular.Array.filter()`. You can
+they have extra methods. The actual method for `$filter()` is `angular.module.ng.$filter.filter()`. You can
 call it from JavaScript.

 Extensions: You can further extend the expression vocabulary by adding new methods to
-`angular.Array` or `angular.String`, etc.
+`angular.module.ng.$filter` or `angular.String`, etc.

 <doc:example>
 <doc:source>
- <div ng:init="friends = [
+ <div ng-init="friends = [
   {name:'John', phone:'555-1212'},
   {name:'Mary', phone:'555-9876'},
   {name:'Mike', phone:'555-4321'},
   {name:'Adam', phone:'555-5678'},
   {name:'Julie', phone:'555-8765'}]"></div>
- Search: <input ng:model="searchText"/>
+ Search: <input ng-model="searchText"/>
 <table class="example3">
-   <tr><th>Name</th><th>Phone</th><tr>
-   <tr ng:repeat="friend in friends.$filter(searchText)">
-     <td>{{friend.name}}</td>
-     <td>{{friend.phone}}</td>
-   </tr>
+   <thead>
+     <tr><th>Name</th><th>Phone</th><tr>
+   </thead>
+   <tbody>
+     <tr ng-repeat="friend in friends | filter:searchText">
+       <td>{{friend.name}}</td>
+       <td>{{friend.phone}}</td>
+     </tr>
+    </tbody>
 </table>
 </doc:source>
 <doc:scenario>
 it('should filter the list', function() {
-    var tr = using('table.example3').repeater('tr.ng-attr-widget');
+    var tr = using('table.example3 tbody').repeater('tr');
    expect(tr.count()).toBe(5);
    input('searchText').enter('a');
    expect(tr.count()).toBe(2);
@@ -201,7 +212,7 @@ of filters like this:

       name | uppercase

-The expression evaluator simply passes the value of name to angular.filter.uppercase.
+The expression evaluator simply passes the value of name to angular.module.ng.$filter.uppercase.

 Chain filters using this syntax:

@@ -227,9 +238,8 @@ so that angular developers and developers who use angular can develop in harmony

 ## Related Topics

-* {@link dev_guide.compiler.markup Understanding Angular Markup}
 * {@link dev_guide.templates.filters Understanding Angular Filters}

 ## Related API

-* {@link api/angular.compile Angular Compiler API}
+* {@link api/angular.module.ng.$compile Angular Compiler API}
@@ -2,609 +2,323 @@
@name Developer Guide: Forms
@description

-# Overview
+Controls (`input`, `select`, `textarea`) are a way for user to enter data.
+Form is a collection of controls for the purpose of grouping related controls together.

-Forms allow users to enter data into your application. Forms represent the bidirectional data
-bindings in Angular.
-
-Forms consist of all of the following:
-
-  - the individual widgets with which users interact
-  - the validation rules for widgets
-  - the form, a collection of widgets that contains aggregated validation information
+Form and controls provide validation services, so that the user can be notified of invalid input.
+This provides a better user experience, because the user gets instant feedback on how to correct the error.
+Keep in mind that while client-side validation plays an important role in providing good user experience, it can easily be circumvented and thus can not be trusted.
+Server-side validation is still necessary for a secure application.


-# Form
-
-A form groups a set of widgets together into a single logical data-set. A form is created using
-the {@link api/angular.widget.form &lt;form&gt;} element that calls the
-{@link api/angular.service.$formFactory $formFactory} service. The form is responsible for managing
-the widgets and for tracking validation information.
-
-A form is:
-
- The collection which contains widgets or other forms.
- Responsible for marshaling data from the model into a widget. This is
-  triggered by {@link api/angular.scope.$watch $watch} of the model expression.
- Responsible for marshaling data from the widget into the model. This is
-  triggered by the widget emitting the `$viewChange` event.
- Responsible for updating the validation state of the widget, when the widget emits
-  `$valid` / `$invalid` event. The validation state is useful for controlling the validation
-   errors shown to the user in it consist of:
-
-  - `$valid` / `$invalid`: Complementary set of booleans which show if a widget is valid / invalid.
-  - `$error`: an object which has a property for each validation key emited by the widget.
-              The value of the key is always true. If widget is valid, then the `$error`
-              object has no properties. For example if the widget emits
-              `$invalid` event with `REQUIRED` key. The internal state of the `$error` would be
-              updated to `$error.REQUIRED == true`.
-
- Responsible for aggregating widget validation information into the form.
-
-  - `$valid` / `$invalid`: Complementary set of booleans which show if all the child widgets
-              (or forms) are valid or if any are invalid.
-  - `$error`: an object which has a property for each validation key emited by the
-              child widget. The value of the key is an array of widgets which fired the invalid
-              event. If all child widgets are valid then, then the `$error` object has no
-              properties. For example if a child widget emits
-              `$invalid` event with `REQUIRED` key. The internal state of the `$error` would be
-              updated to `$error.REQUIRED == [ widgetWhichEmitedInvalid ]`.
-
-
-# Widgets
-
-In Angular, a widget is the term used for the UI with which the user input. Examples of
-bult-in Angular widgets are {@link api/angular.widget.input input} and
-{@link api/angular.widget.select select}. Widgets provide the rendering and the user
-interaction logic. Widgets should be declared inside a form, if no form is provided an implicit
-form {@link api/angular.service.$formFactory $formFactory.rootForm} form is used.
-
-Widgets are implemented as Angular controllers. A widget controller:
-
-  implements methods:
-
-  - `$render` - Updates the DOM from the internal state as represented by `$viewValue`.
-  - `$parseView` - Translate `$viewValue` to `$modelValue`. (`$modelValue` will be assigned to
-     the model scope by the form)
-  - `$parseModel` - Translate `$modelValue` to `$viewValue`. (`$viewValue` will be assigned to
-     the DOM inside the `$render` method)
-
- responds to events:
-
-  - `$validate` - Emitted by the form when the form determines that the widget needs to validate
-    itself. There may be more then one listener on the `$validate` event. The widget responds
-    by emitting `$valid` / `$invalid` event of its own.
-
- emits events:
-
-  - `$viewChange` - Emitted when the user interacts with the widget and it is necessary to update
-     the model.
-  - `$valid` - Emitted when the widget determines that it is valid (usually as a response to
-    `$validate` event or inside `$parseView()` or `$parseModel()` method).
-  - `$invalid` - Emitted when the widget determines that it is invalid (usually as a response to
-    `$validate` event or inside `$parseView()` or `$parseModel()` method).
-  - `$destroy` - Emitted when the widget element is removed from the DOM.
-
-
-# CSS
-
-Angular-defined widgets and forms set `ng-valid` and `ng-invalid` classes on themselves to allow
-the web-designer a way to style them. If you write your own widgets, then their `$render()`
-methods must set the appropriate CSS classes to allow styling.
-(See {@link dev_guide.templates.css-styling CSS})
-
-
-# Example
-
-The following example demonstrates:
-
-  - How an error is displayed when a required field is empty.
-  - Error highlighting.
-  - How form submission is disabled when the form is invalid.
-  - The internal state of the widget and form in the the 'Debug View' area.
-
+# Simple form
+The key directive in understanding two-way data-binding is  {@link api/angular.module.ng.$compileProvider.directive.ngModel ngModel}.
+The `ngModel` directive provides the two-way data-binding by synchronizing the model to the view, as well as view to the model.
+In addition it provides {@link api/angular.module.ng.$compileProvider.directive.ngModel.NgModelController API} for other directives to augment its behavior.

 <doc:example>
 <doc:source>
-   <style>
-     .ng-invalid { border: solid 1px red; }
-     .ng-form {display: block;}
-   </style>
-   <script>
-   function UserFormCntl() {
-     this.state = /^\w\w$/;
-     this.zip = /^\d\d\d\d\d$/;
-     this.master = {
-       customer: 'John Smith',
-       address:{
-         line1: '123 Main St.',
-         city:'Anytown',
-         state:'AA',
-         zip:'12345'
-       }
-     };
-     this.cancel();
-   }
+<div ng-controller="Controller">
+  <form novalidate class="simple-form">
+    Name: <input type="text" ng-model="user.name" /><br />
+    E-mail: <input type="email" ng-model="user.email" /><br />
+    Gender: <input type="radio" ng-model="user.gender" value="male" />male
+    <input type="radio" ng-model="user.gender" value="female" />female<br />
+    <button ng-click="reset()">RESET</button>
+    <button ng-click="update(user)">SAVE</button>
+  </form>
+  <pre>form = {{user | json}}</pre>
+  <pre>master = {{master | json}}</pre>
+</div>

-   UserFormCntl.prototype = {
-     cancel: function() {
-       this.form = angular.copy(this.master);
-     },
+<script>
+  function Controller($scope) {
+    $scope.master= {};

-     save: function() {
-       this.master = this.form;
-       this.cancel();
-     }
-   };
-   </script>
-   <div ng:controller="UserFormCntl">
+    $scope.update = function(user) {
+      $scope.master= angular.copy(user);
+    };

-     <form name="userForm">
+    $scope.reset = function() {
+      $scope.user = angular.copy($scope.master);
+    };

-       <label>Name:</label><br/>
-       <input type="text" name="customer" ng:model="form.customer" required/>
-       <span class="error" ng:show="userForm.customer.$error.REQUIRED">
-         Customer name is required!</span>
-       <br/><br/>
-
-       <ng:form name="addressForm">
-         <label>Address:</label> <br/>
-         <input type="text" name="line1" size="33" required
-                ng:model="form.address.line1"/> <br/>
-         <input type="text" name="city" size="12" required
-                ng:model="form.address.city"/>,
-         <input type="text" name="state" ng:pattern="state" size="2" required
-                ng:model="form.address.state"/>
-         <input type="text" name="zip" ng:pattern="zip" size="5" required
-                ng:model="form.address.zip"/><br/><br/>
-
-         <span class="error" ng:show="addressForm.$invalid">
-           Incomplete address:
-           <span class="error" ng:show="addressForm.state.$error.REQUIRED">
-             Missing state!</span>
-           <span class="error" ng:show="addressForm.state.$error.PATTERN">
-             Invalid state!</span>
-           <span class="error" ng:show="addressForm.zip.$error.REQUIRED">
-             Missing zip!</span>
-           <span class="error" ng:show="addressForm.zip.$error.PATTERN">
-             Invalid zip!</span>
-         </span>
-       </ng:form>
-
-       <button ng:click="cancel()"
-               ng:disabled="{{master.$equals(form)}}">Cancel</button>
-       <button ng:click="save()"
-               ng:disabled="{{userForm.$invalid || master.$equals(form)}}">
-          Save</button>
-     </form>
-
-     <hr/>
-     Debug View:
-     <pre>form={{form}}</pre>
-     <pre>master={{master}}</pre>
-     <pre>userForm={{userForm}}</pre>
-     <pre>addressForm={{addressForm}}</pre>
-   </div>
+    $scope.reset();
+  }
+  </script>
 </doc:source>
-<doc:scenario>
-  it('should enable save button', function() {
-    expect(element(':button:contains(Save)').attr('disabled')).toBeTruthy();
-    input('form.customer').enter('');
-    expect(element(':button:contains(Save)').attr('disabled')).toBeTruthy();
-    input('form.customer').enter('change');
-    expect(element(':button:contains(Save)').attr('disabled')).toBeFalsy();
-    element(':button:contains(Save)').click();
-    expect(element(':button:contains(Save)').attr('disabled')).toBeTruthy();
-  });
-  it('should enable cancel button', function() {
-    expect(element(':button:contains(Cancel)').attr('disabled')).toBeTruthy();
-    input('form.customer').enter('change');
-    expect(element(':button:contains(Cancel)').attr('disabled')).toBeFalsy();
-    element(':button:contains(Cancel)').click();
-    expect(element(':button:contains(Cancel)').attr('disabled')).toBeTruthy();
-    expect(element(':input[ng\\:model="form.customer"]').val()).toEqual('John Smith');
-  });
-</doc:scenario>
 </doc:example>

-# Life-cycle

- The `<form>` element triggers creation of a new form {@link dev_guide.scopes scope} using the
-  {@link api/angular.service.$formFactory $formfactory}. The new form scope is added to the
-  `<form>` element using the jQuery `.data()` method for later retrieval under the key `$form`.
-  The form also sets up these listeners:
-
-  - `$destroy` - This event is emitted by nested widget when it is removed from the view. It gives
-     the form a chance to clean up any validation references to the destroyed widget.
-  - `$valid` / `$invalid` - This event is emitted by the widget on validation state change.
-
- `<input>` element triggers the creation of the widget using the
-  {@link api/angular.service.$formFactory $formfactory.$createWidget()} method. The `$createWidget()`
-  creates new widget instance by calling the current scope {@link api/angular.scope.$new .$new()} and
-  registers these listeners:
-
-  - `$watch` on the model scope.
-  - `$viewChange` event on the widget scope.
-  - `$validate` event on the widget scope.
-  - Element `change` event when the user enters data.
-
-<img class="center" src="img/form_data_flow.png" border="1" />
-
-
- When the user interacts with the widget:
-
-  1. The DOM element fires the `change` event which the widget intercepts. Widget then emits
-     a `$viewChange` event which includes the new user-entered value. (Remember that the DOM events
-     are outside of the Angular environment so the widget must emit its event within the
-     {@link api/angular.scope.$apply $apply} method).
-  2. The form's `$viewChange` listener copies the user-entered value to the widget's `$viewValue`
-     property. Since the `$viewValue` is the raw value as entered by user, it may need to be
-     translated to a different format/type (for example, translating a string to a number).
-     If you need your widget to translate between the internal `$viewValue` and the external
-     `$modelValue` state, you must declare a `$parseView()` method. The `$parseView()` method
-     will copy `$viewValue` to `$modelValue` and perform any necessary translations.
-  3. The `$modelValue` is written into the application model.
-  4. The form then emits a `$validate` event, giving the widget's validators chance to validate the
-     input. There can be any number of validators registered. Each validator may in turn
-     emit a `$valid` / `$invalid` event with the validator's validation key. For example `REQUIRED`.
-  5. Form listens to `$valid`/`$invalid` events and updates both the form as well as the widget
-     scope with the validation state. The validation updates the `$valid` and `$invalid`, property
-     as well as `$error` object. The widget's `$error` object is updated with the validation key
-     such that `$error.REQUIRED == true` when the validation emits `$invalid` with `REQUIRED`
-     validation key. Similarly the form's `$error` object gets updated, but instead of boolean
-     `true` it contains an array of invalid widgets (widgets which fired `$invalid` event with
-     `REQUIRED` validation key).
-
- When the model is updated:
-
-  1. The model `$watch` listener assigns the model value to `$modelValue` on the widget.
-  2. The form then calls `$parseModel` method on widget if present. The method converts the
-     value to renderable format and assigns it to `$viewValue` (for example converting number to a
-     string.)
-  3. The form then emits a `$validate` which behaves as described above.
-  4. The form then calls `$render` method on the widget to update the DOM structure from the
-     `$viewValue`.
+Note that `novalidate` is used to disable browser's native form validation.



-# Writing Your Own Widget
+# Using CSS classes

-This example shows how to implement a custom HTML editor widget in Angular.
+To allow styling of form as well as controls, `ngModel`  add these CSS classes:

-    <doc:example>
-      <doc:source>
-        <script>
-          function EditorCntl() {
-            this.htmlContent = '<b>Hello</b> <i>World</i>!';
-          }
+- `ng-valid`
+- `ng-invalid`
+- `ng-pristine`
+- `ng-dirty`

-          function HTMLEditorWidget(element) {
-            var self = this;
-            var htmlFilter = angular.filter('html');
+Following example uses the CSS to display validity of each form control.
+In the example both `user.name` and `user.email` are required, but are rendered with red background only when they are dirty.
+This ensures that the user is not distracted with an error until after interacting with the control, and failing to satisfy its validity.

-            this.$parseModel = function() {
-              // need to protect for script injection
-              try {
-                this.$viewValue = htmlFilter(
-                  this.$modelValue || '').get();
-                if (this.$error.HTML) {
-                  // we were invalid, but now we are OK.
-                  this.$emit('$valid', 'HTML');
-                }
-              } catch (e) {
-                // if HTML not parsable invalidate form.
-                this.$emit('$invalid', 'HTML');
-              }
-            }
-
-            this.$render = function() {
-              element.html(this.$viewValue);
-            }
-
-            element.bind('keyup', function() {
-              self.$apply(function() {
-                self.$emit('$viewChange', element.html());
-              });
-            });
-          }
-
-          angular.directive('ng:html-editor-model', function() {
-            function linkFn($formFactory, element) {
-              var exp = element.attr('ng:html-editor-model'),
-                  form = $formFactory.forElement(element),
-                  widget;
-              element.attr('contentEditable', true);
-              widget = form.$createWidget({
-                scope: this,
-                model: exp,
-                controller: HTMLEditorWidget,
-                controllerArgs: [element]});
-              // if the element is destroyed, then we need to
-              // notify the form.
-              element.bind('$destroy', function() {
-                widget.$destroy();
-              });
-            }
-            linkFn.$inject = ['$formFactory'];
-            return linkFn;
-          });
-        </script>
-        <form name='editorForm' ng:controller="EditorCntl">
-          <div ng:html-editor-model="htmlContent"></div>
-          <hr/>
-          HTML: <br/>
-          <textarea ng:model="htmlContent" cols="80"></textarea>
-          <hr/>
-          <pre>editorForm = {{editorForm}}</pre>
-        </form>
-      </doc:source>
-      <doc:scenario>
-        it('should enter invalid HTML', function() {
-          expect(element('form[name=editorForm]').prop('className')).toMatch(/ng-valid/);
-          input('htmlContent').enter('<');
-          expect(element('form[name=editorForm]').prop('className')).toMatch(/ng-invalid/);
-        });
-      </doc:scenario>
-    </doc:example>
-
-
-
-# HTML Inputs
-
-The most common widgets you will use will be in the form of the
-standard HTML set. These widgets are bound using the `name` attribute
-to an expression. In addition, they can have `required` attribute to further control their
-validation.
 <doc:example>
-  <doc:source>
-     <script>
-       function Ctrl() {
-         this.input1 = '';
-         this.input2 = '';
-         this.input3 = 'A';
-         this.input4 = false;
-         this.input5 = 'c';
-         this.input6 = [];
-       }
-     </script>
-    <table style="font-size:.9em;" ng:controller="Ctrl">
-      <tr>
-        <th>Name</th>
-        <th>Format</th>
-        <th>HTML</th>
-        <th>UI</th>
-        <th ng:non-bindable>{{input#}}</th>
-      </tr>
-      <tr>
-        <th>text</th>
-        <td>String</td>
-        <td><tt>&lt;input type="text" ng:model="input1"&gt;</tt></td>
-        <td><input type="text" ng:model="input1" size="4"></td>
-        <td><tt>{{input1|json}}</tt></td>
-      </tr>
-      <tr>
-        <th>textarea</th>
-        <td>String</td>
-        <td><tt>&lt;textarea ng:model="input2"&gt;&lt;/textarea&gt;</tt></td>
-        <td><textarea ng:model="input2" cols='6'></textarea></td>
-        <td><tt>{{input2|json}}</tt></td>
-      </tr>
-      <tr>
-        <th>radio</th>
-        <td>String</td>
-        <td><tt>
-          &lt;input type="radio" ng:model="input3" value="A"&gt;<br>
-          &lt;input type="radio" ng:model="input3" value="B"&gt;
-        </tt></td>
-        <td>
-          <input type="radio" ng:model="input3" value="A">
-          <input type="radio" ng:model="input3" value="B">
-        </td>
-        <td><tt>{{input3|json}}</tt></td>
-      </tr>
-      <tr>
-        <th>checkbox</th>
-        <td>Boolean</td>
-        <td><tt>&lt;input type="checkbox" ng:model="input4"&gt;</tt></td>
-        <td><input type="checkbox" ng:model="input4"></td>
-        <td><tt>{{input4|json}}</tt></td>
-      </tr>
-      <tr>
-        <th>pulldown</th>
-        <td>String</td>
-        <td><tt>
-          &lt;select ng:model="input5"&gt;<br>
-          &nbsp;&nbsp;&lt;option value="c"&gt;C&lt;/option&gt;<br>
-          &nbsp;&nbsp;&lt;option value="d"&gt;D&lt;/option&gt;<br>
-          &lt;/select&gt;<br>
-        </tt></td>
-        <td>
-          <select ng:model="input5">
-            <option value="c">C</option>
-            <option value="d">D</option>
-          </select>
-        </td>
-        <td><tt>{{input5|json}}</tt></td>
-      </tr>
-      <tr>
-        <th>multiselect</th>
-        <td>Array</td>
-        <td><tt>
-          &lt;select ng:model="input6" multiple size="4"&gt;<br>
-          &nbsp;&nbsp;&lt;option value="e"&gt;E&lt;/option&gt;<br>
-          &nbsp;&nbsp;&lt;option value="f"&gt;F&lt;/option&gt;<br>
-          &lt;/select&gt;<br>
-        </tt></td>
-        <td>
-          <select ng:model="input6" multiple size="4">
-            <option value="e">E</option>
-            <option value="f">F</option>
-          </select>
-        </td>
-        <td><tt>{{input6|json}}</tt></td>
-      </tr>
-    </table>
-  </doc:source>
-  <doc:scenario>
+<doc:source>
+<div ng-controller="Controller">
+  <form novalidate class="css-form">
+    Name:
+      <input type="text" ng-model="user.name" required /><br />
+    E-mail: <input type="email" ng-model="user.email" required /><br />
+    Gender: <input type="radio" ng-model="user.gender" value="male" />male
+    <input type="radio" ng-model="user.gender" value="female" />female<br />
+    <button ng-click="reset()">RESET</button>
+    <button ng-click="update(user)">SAVE</button>
+  </form>
+</div>

-    it('should exercise text', function() {
-     input('input1').enter('Carlos');
-     expect(binding('input1')).toEqual('"Carlos"');
-    });
-    it('should exercise textarea', function() {
-     input('input2').enter('Carlos');
-     expect(binding('input2')).toEqual('"Carlos"');
-    });
-    it('should exercise radio', function() {
-     expect(binding('input3')).toEqual('"A"');
-     input('input3').select('B');
-     expect(binding('input3')).toEqual('"B"');
-     input('input3').select('A');
-     expect(binding('input3')).toEqual('"A"');
-    });
-    it('should exercise checkbox', function() {
-     expect(binding('input4')).toEqual('false');
-     input('input4').check();
-     expect(binding('input4')).toEqual('true');
-    });
-    it('should exercise pulldown', function() {
-     expect(binding('input5')).toEqual('"c"');
-     select('input5').option('d');
-     expect(binding('input5')).toEqual('"d"');
-    });
-    it('should exercise multiselect', function() {
-     expect(binding('input6')).toEqual('[]');
-     select('input6').options('e');
-     expect(binding('input6')).toEqual('["e"]');
-     select('input6').options('e', 'f');
-     expect(binding('input6')).toEqual('["e","f"]');
-    });
-  </doc:scenario>
+<style type="text/css">
+  .css-form input.ng-invalid.ng-dirty {
+    background-color: #FA787E;
+  }
+
+  .css-form input.ng-valid.ng-dirty {
+    background-color: #78FA89;
+  }
+</style>
+
+<script>
+  function Controller($scope) {
+    $scope.master= {};
+
+    $scope.update = function(user) {
+      $scope.master= angular.copy(user);
+    };
+
+    $scope.reset = function() {
+      $scope.user = angular.copy($scope.master);
+    };
+
+    $scope.reset();
+  }
+  </script>
+</doc:source>
 </doc:example>

-#Testing

-When unit-testing a controller it may be desirable to have a reference to form and to simulate
-different form validation states.

-This example demonstrates a login form, where the login button is enabled only when the form is
-properly filled out.
-<pre>
-  <div ng:controller="LoginController">
-    <form name="loginForm">
-      <input type="text" ng:model="username" required/>
-      <input type="password" ng:model="password" required/>
-      <button ng:disabled="{{!disableLogin()}}" ng:click="login()">Login</login>
-    </form>
-  </div>
-</pre>
+# Binding to form and control state

-In the unit tests we do not have access to the DOM, and therefore the `loginForm` reference does
-not get set on the controller. This example shows how it can be unit-tested, by creating a mock
-form.
-<pre>
-function LoginController() {
-  this.disableLogin = function() {
-    return this.loginForm.$invalid;
-  };
-}
+A form is in instance of {@link api/angular.module.ng.$compileProvider.directive.form.FormController FormController}.
+The form instance can optionally be published into the scope using the `name` attribute.
+Similarly control is an instance of {@link api/angular.module.ng.$compileProvider.directive.ngModel.NgModelController NgModelController}.
+The control instance can similarly be published into the form instance using the `name` attribute.
+This implies that the internal state of both the form and the control is available for binding in the view using the standard binding primitives.

-describe('LoginController', function() {
-  it('should disable login button when form is invalid', function() {
-    var scope = angular.scope();
-    var loginController = scope.$new(LoginController);
+This allows us to extend the above example with these features:

-    // In production the 'loginForm' form instance gets set from the view,
-    // but in unit-test we have to set it manually.
-    loginController.loginForm = scope.$service('$formFactory')();
+- RESET button is enabled only if form has some changes
+- SAVE button is enabled only if form has some changes and is valid
+- custom error messages for `user.email` and `user.agree`

-    expect(loginController.disableLogin()).toBe(false);
+<doc:example>
+<doc:source>
+<div ng-controller="Controller">
+  <form name="form" class="css-form" novalidate>
+    Name:
+      <input type="text" ng-model="user.name" name="uName" required /><br />
+    E-mail:
+      <input type="email" ng-model="user.email" name="uEmail" required/><br />
+    <div ng-show="form.uEmail.$dirty && form.uEmail.$invalid">Invalid:
+      <span ng-show="form.uEmail.$error.required">Tell us your email.</span>
+      <span ng-show="form.uEmail.$error.email">This is not a valid email.</span>
+    </div>

-    // Now simulate an invalid form
-    loginController.loginForm.$emit('$invalid', 'MyReason');
-    expect(loginController.disableLogin()).toBe(true);
+    Gender: <input type="radio" ng-model="user.gender" value="male" />male
+    <input type="radio" ng-model="user.gender" value="female" />female<br />

-    // Now simulate a valid form
-    loginController.loginForm.$emit('$valid', 'MyReason');
-    expect(loginController.disableLogin()).toBe(false);
+    <input type="checkbox" ng-model="user.agree" name="userAgree" required />
+    I agree: <input ng-show="user.agree" type="text" ng-model="user.agreeSign"
+              required /><br />
+    <div ng-show="!user.agree || !user.agreeSign">Please agree and sign.</div>
+
+    <button ng-click="reset()" ng-disabled="isUnchanged(user)">RESET</button>
+    <button ng-click="update(user)"
+            ng-disabled="form.$invalid || isUnchanged(user)">SAVE</button>
+  </form>
+</div>
+
+<script>
+  function Controller($scope) {
+    $scope.master= {};
+
+    $scope.update = function(user) {
+      $scope.master= angular.copy(user);
+    };
+
+    $scope.reset = function() {
+      $scope.user = angular.copy($scope.master);
+    };
+
+    $scope.isUnchanged = function(user) {
+      return angular.equals(user, $scope.master);
+    };
+
+    $scope.reset();
+  }
+</script>
+</doc:source>
+</doc:example>
+
+
+
+# Custom Validation
+
+Angular provides basic implementation for most common html5 {@link api/angular.module.ng.$compileProvider.directive.input input}
+types: ({@link api/angular.module.ng.$compileProvider.directive.input.text text}, {@link api/angular.module.ng.$compileProvider.directive.input.number number}, {@link api/angular.module.ng.$compileProvider.directive.input.url url}, {@link api/angular.module.ng.$compileProvider.directive.input.email email}, {@link api/angular.module.ng.$compileProvider.directive.input.radio radio}, {@link api/angular.module.ng.$compileProvider.directive.input.checkbox checkbox}), as well as some directives for validation (`required`, `pattern`, `minlength`, `maxlength`, `min`, `max`).
+
+Defining your own validator can be done by defining your own directive which adds a custom validation function to the `ngModel` {@link api/angular.module.ng.$compileProvider.directive.ngModel.NgModelController controller}.
+To get a hold of the controller the directive specifies a dependency as shown in the example below.
+The validation can occur in two places:
+
+  * **Model to View update** -
+    Whenever the bound model changes, all functions in {@link   api/angular.module.ng.$compileProvider.directive.ngModel.NgModelController#$formatters NgModelController#$formatters} array are pipe-lined, so that each of these functions has an opportunity to format the value and change validity state of the form control through {@link api/angular.module.ng.$compileProvider.directive.ngModel.NgModelController#$setValidity NgModelController#$setValidity}.
+
+  * **View to Model update** -
+    In a similar way, whenever a user interacts with a control, the controll calls {@link api/angular.module.ng.$compileProvider.directive.ngModel.NgModelController#$setViewValue NgModelController#$setViewValue}.
+This in turn pipelines all functions in {@link api/angular.module.ng.$compileProvider.directive.ngModel.NgModelController#$parsers NgModelController#$parsers} array, so that each of these functions has an opportunity to convert the value and change validity state of the form control through {@link api/angular.module.ng.$compileProvider.directive.ngModel.NgModelController#$setValidity NgModelController#$setValidity}.
+
+In the following example we create two directives.
+
+  * The first one is `integer` and it validates whether the input is a valid integer.
+    For example `1.23` is an invalid value, since it contains a fraction.
+    Note, that we unshift the array instead of pushing.
+    This is because we want to be first parser and consume the control string value, as we need to execute the validation function before a conversion to number occurs.
+
+  * The second directive is a `smart-float`.
+    It parses both `1.2` and `1,2` into a valid float number `1.2`.
+    Note that, we can't use input type `number` here as HTML5 browsers would not allow the user to type what it would consider an invalid number such as `1,2`.
+
+
+<doc:example module="form-example1">
+<doc:source>
+<div ng-controller="Controller">
+  <form name="form" class="css-form" novalidate>
+    <div>
+      Size (integer 0 - 10):
+      <input type="number" ng-model="size" name="size"
+             min="0" max="10" integer />{{size}}<br />
+      <span ng-show="form.size.$error.integer">This is not valid integer!</span>
+      <span ng-show="form.size.$error.min || form.size.$error.max">
+        The value must be in range 0 to 10!</span>
+    </div>
+
+    <div>
+      Length (float):
+      <input type="text" ng-model="length" name="length" smart-float />
+      {{length}}<br />
+      <span ng-show="form.length.$error.float">
+        This is not a valid float number!</span>
+    </div>
+  </form>
+</div>
+
+<script>
+  var app = angular.module('form-example1', []);
+
+  var INTEGER_REGEXP = /^\-?\d*$/;
+  app.directive('integer', function() {
+    return {
+      require: 'ngModel',
+      link: function(scope, elm, attrs, ctrl) {
+        ctrl.$parsers.unshift(function(viewValue) {
+          if (INTEGER_REGEXP.test(viewValue)) {
+            // it is valid
+            ctrl.$setValidity('integer', true);
+            return viewValue;
+          } else {
+            // it is invalid, return undefined (no model update)
+            ctrl.$setValidity('integer', false);
+            return undefined;
+          }
+        });
+      }
+    };
  });
-});
-</pre>

-## Custom widgets
-
-This example demonstrates a login form, where the password has custom validation rules.
-<pre>
-  <div ng:controller="LoginController">
-    <form name="loginForm">
-      <input type="text" ng:model="username" required/>
-      <input type="@StrongPassword" ng:model="password" required/>
-      <button ng:disabled="{{!disableLogin()}}" ng:click="login()">Login</login>
-    </form>
-  </div>
-</pre>
-
-In the unit tests we do not have access to the DOM, and therefore the `loginForm` and custom
-input type reference does not get set on the controller. This example shows how it can be
-unit-tested, by creating a mock form and a mock custom input type.
-<pre>
-function LoginController(){
-  this.disableLogin = function() {
-    return this.loginForm.$invalid;
-  };
-
-  this.StrongPassword = function(element) {
-    var widget = this;
-    element.attr('type', 'password'); // act as password.
-    this.$on('$validate', function(){
-      widget.$emit(widget.$viewValue.length > 5 ? '$valid' : '$invalid', 'PASSWORD');
-    });
-  };
-}
-
-describe('LoginController', function() {
-  it('should disable login button when form is invalid', function() {
-    var scope = angular.scope();
-    var loginController = scope.$new(LoginController);
-    var input = angular.element('<input>');
-
-    // In production the 'loginForm' form instance gets set from the view,
-    // but in unit-test we have to set it manually.
-    loginController.loginForm = scope.$service('$formFactory')();
-
-    // now instantiate a custom input type
-    loginController.loginForm.$createWidget({
-      scope: loginController,
-      model: 'password',
-      alias: 'password',
-      controller: loginController.StrongPassword,
-      controllerArgs: [input]
-    });
-
-    // Verify that the custom password input type sets the input type to password
-    expect(input.attr('type')).toEqual('password');
-
-    expect(loginController.disableLogin()).toBe(false);
-
-    // Now simulate an invalid form
-    loginController.loginForm.password.$emit('$invalid', 'PASSWORD');
-    expect(loginController.disableLogin()).toBe(true);
-
-    // Now simulate a valid form
-    loginController.loginForm.password.$emit('$valid', 'PASSWORD');
-    expect(loginController.disableLogin()).toBe(false);
-
-    // Changing model state, should also influence the form validity
-    loginController.password = 'abc'; // too short so it should be invalid
-    scope.$digest();
-    expect(loginController.loginForm.password.$invalid).toBe(true);
-
-    // Changeing model state, should also influence the form validity
-    loginController.password = 'abcdef'; // should be valid
-    scope.$digest();
-    expect(loginController.loginForm.password.$valid).toBe(true);
+  var FLOAT_REGEXP = /^\-?\d+((\.|\,)\d+)?$/;
+  app.directive('smartFloat', function() {
+    return {
+      require: 'ngModel',
+      link: function(scope, elm, attrs, ctrl) {
+        ctrl.$parsers.unshift(function(viewValue) {
+          if (FLOAT_REGEXP.test(viewValue)) {
+            ctrl.$setValidity('float', true);
+            return parseFloat(viewValue.replace(',', '.'));
+          } else {
+            ctrl.$setValidity('float', false);
+            return undefined;
+          }
+        });
+      }
+    };
  });
-});
-</pre>
+</script>
+</doc:source>
+</doc:example>


+# Implementing custom form control (using `ngModel`)
+Angular implements all of the basic HTML form controls ({@link api/angular.module.ng.$compileProvider.directive.input input}, {@link api/angular.module.ng.$compileProvider.directive.select select}, {@link api/angular.module.ng.$compileProvider.directive.textarea textarea}), which should be sufficient for most cases.
+However, if you need more flexibility, you can write your own form control as a directive.
+
+In order for custom control to work with `ngModel` and to achieve two-way data-binding it needs to:
+
+  - implement `render` method, which is responsible for rendering the data after it passed the {@link   api/angular.module.ng.$compileProvider.directive.ngModel.NgModelController#$formatters NgModelController#$formatters},
+  - call `$setViewValue` method, whenever the user interacts with the control and model needs to be updated. This is usually done inside a DOM Event listener.
+
+See {@link guide/directive $compileProvider.directive} for more info.
+
+The following example shows how to add two-way data-binding to contentEditable elements.
+
+<doc:example module="form-example2">
+<doc:source>
+<script>
+  angular.module('form-example2', []).directive('contenteditable', function() {
+    return {
+      require: 'ngModel',
+      link: function(scope, elm, attrs, ctrl) {
+        // view -> model
+        elm.bind('blur', function() {
+          scope.$apply(function() {
+            ctrl.$setViewValue(elm.html());
+          });
+        });
+
+        // model -> view
+        ctrl.render = function(value) {
+          elm.html(value);
+        };
+
+        // load init value from DOM
+        ctrl.$setViewValue(elm.html());
+      }
+    };
+  });
+</script>
+
+<div contentEditable="true" ng-model="content" title="Click to edit">Some</div>
+<pre>model = {{content}}</pre>
+
+<style type="text/css">
+  div[contentEditable] {
+    cursor: pointer;
+    background-color: #D0D0D0;
+  }
+</style>
+</doc:source>
+</doc:example>
@@ -17,15 +17,15 @@ abstracted bits.
 **What level of support for i18n/l10n is currently in Angular?**

 Currently, Angular supports i18n/l10n for {@link
-http://docs.angularjs.org/#!/api/angular.filter.date datetime}, {@link
-http://docs.angularjs.org/#!/api/angular.filter.number number} and {@link
-http://docs.angularjs.org/#!/api/angular.filter.currency currency} filters.
+http://docs.angularjs.org/#!/api/angular.module.ng.$filter.date datetime}, {@link
+http://docs.angularjs.org/#!/api/angular.module.ng.$filter.number number} and {@link
+http://docs.angularjs.org/#!/api/angular.module.ng.$filter.currency currency} filters.

 Additionally, Angular supports localizable pluralization support provided by the {@link
-api/angular.widget.ng:pluralize ng:pluralize widget}.
+api/angular.module.ng.$compileProvider.directive.ngPluralize ngPluralize directive}.

 All localizable Angular components depend on locale-specific rule sets managed by the {@link
-api/angular.service.$locale $locale service}.
+api/angular.module.ng.$locale $locale service}.

 For readers who want to jump straight into examples, we have a few web pages that showcase how to
 use Angular filters with various locale rule sets. You can find these examples either on {@link
@@ -67,10 +67,10 @@ You can also include the locale specific js file in the index.html page. For exa
 requires German locale, you would serve index_de-ge.html which will look something like this:

 <pre>
-<html>
+<html ng-app>
 <head>
 ….
-   <script src="angular.js" ng:autobind></script>
+   <script src="angular.js"></script>
   <script src="i18n/angular-locale_de-ge.js"></script>
 ….
 </head>
@@ -90,8 +90,8 @@ because an extra script needs to be loaded.

 **Currency symbol "gotcha"**

-Angular's {@link http://docs.angularjs.org/#!/api/angular.filter.currency currency filter} allows
-you to use the default currency symbol from the {@link api/angular.service.$locale locale service},
+Angular's {@link http://docs.angularjs.org/#!/api/angular.module.ng.$filter.currency currency filter} allows
+you to use the default currency symbol from the {@link api/angular.module.ng.$locale locale service},
 or you can provide the filter with a custom currency symbol. If your app will be used only in one
 locale, it is fine to rely on the default currency symbol. However, if you anticipate that viewers
 in other locales might use your app, you should provide your own currency symbol to make sure the
@@ -104,7 +104,7 @@ browser will specify the locale as ja, and the balance of '¥1000.00' will be sh
 will really upset your client.

 In this case, you need to override the default currency symbol by providing the {@link
-http://docs.angularjs.org/#!/api/angular.filter.currency currency filter} with a currency symbol as
+http://docs.angularjs.org/#!/api/angular.module.ng.$filter.currency currency filter} with a currency symbol as
 a parameter when you configure the filter, for example, {{ 1000 | currency:"USD$"}}. This way,
 Angular will always show a balance of 'USD$1000' and disregard any locale changes.

@@ -4,7 +4,7 @@

 In angular, a controller is a JavaScript function(type/class) that is used to augment instances of
 angular {@link dev_guide.scopes Scope}, excluding the root scope. When you or angular create a new
-child scope object via the {@link api/angular.scope.$new scope.$new} API        , there is an
+child scope object via the {@link api/angular.module.ng.$rootScope.Scope#$new scope.$new} API        , there is an
 option to pass in a controller as a method argument. This will tell angular to associate the
 controller with the new scope and to augment its behavior.

@@ -24,16 +24,12 @@ constructor). Constructors are always applied to an existing scope object.

 You set up the initial state of a scope by creating model properties. For example:

-function GreetingCtrl() {
- this.greeting = 'Hola!';
+function GreetingCtrl($scope) {
+ $scope.greeting = 'Hola!';
 }

 The `GreetingCtrl` controller creates a `greeting` model which can be referred to in a template.

-When a controller function is applied to an angular scope object, the `this` of the controller
-function becomes the scope of the angular scope object, so any assignment to `this` within the
-controller function happens on the angular scope object.
-
 # Adding Behavior to a Scope Object

 Behavior on an angular scope object is in the form of scope method properties available to the
@@ -41,13 +37,8 @@ template/view. This behavior interacts with and modifies the application model.

 As discussed in the {@link dev_guide.mvc.understanding_model Model} section of this guide, any
 objects (or primitives) assigned to the scope become model properties. Any functions assigned to
-the scope, along with any prototype methods of the controller type, become functions available in
-the template/view, and can be invoked via angular expressions and `ng:` event handlers (e.g. {@link
-api/angular.directive.ng:click ng:click}). These controller methods are always evaluated within the
-context of the angular scope object that the controller function was applied to (which means that
-the `this` keyword of any controller method is always bound to the scope that the controller
-augments). This is how the second task of adding behavior to the scope is accomplished.
-
+the scope are available in the template/view, and can be invoked via angular expressions
+and `ng` event handler directives (e.g. {@link api/angular.module.ng.$compileProvider.directive.ngClick ngClick}).

 # Using Controllers Correctly

@@ -65,9 +56,9 @@ Do not use controllers for:
 manipulation—the presentation logic of an application—is well known for being hard to test.
 Putting any presentation logic into controllers significantly affects testability of the business
 logic. Angular offers {@link dev_guide.templates.databinding} for automatic DOM manipulation. If
-you have to perform your own manual DOM manipulation, encapsulate the presentation logic in {@link
-dev_guide.compiler.widgets widgets} and {@link dev_guide.compiler.directives directives}.
- Input formatting — Use {@link dev_guide.forms angular form widgets} instead.
+you have to perform your own manual DOM manipulation, encapsulate the presentation logic in
+{@link guide/directive directives}.
+- Input formatting — Use {@link dev_guide.forms angular form controls} instead.
 - Output filtering — Use {@link dev_guide.templates.filters angular filters} instead.
 - Run stateless or stateful code shared across controllers — Use {@link dev_guide.services angular
 services} instead.
@@ -77,9 +68,9 @@ instances).

 # Associating Controllers with Angular Scope Objects

-You can associate controllers with scope objects explicitly via the {@link api/angular.scope.$new
-scope.$new} api or implicitly via the {@link api/angular.directive.ng:controller ng:controller
-directive} or {@link api/angular.service.$route $route service}.
+You can associate controllers with scope objects explicitly via the {@link api/angular.module.ng.$rootScope.Scope#$new
+scope.$new} api or implicitly via the {@link api/angular.module.ng.$compileProvider.directive.ngController ngController
+directive} or {@link api/angular.module.ng.$route $route service}.


 ## Controller Constructor and Methods Example
@@ -99,37 +90,43 @@ string "very". Depending on which button is clicked, the `spice` model is set to
 ## A Spicy Controller Example

 <pre>
-<body ng:controller="SpicyCtrl">
- <button ng:click="chiliSpicy()">Chili</button>
- <button ng:click="jalapenoSpicy()">Jalapeño</button>
+<body ng-controller="SpicyCtrl">
+ <button ng-click="chiliSpicy()">Chili</button>
+ <button ng-click="jalapenoSpicy()">Jalapeño</button>
 <p>The food is {{spice}} spicy!</p>
 </body>

-function SpicyCtrl() {
- this.spice = 'very';
- this.chiliSpicy = function() {
-   this.spice = 'chili';
+function SpicyCtrl($scope) {
+ $scope.spice = 'very';
+ $scope.chiliSpicy = function() {
+   $scope.spice = 'chili';
+ }
+ $scope.jalapenoSpicy = function() {
+  $scope.spice = 'jalapeño';
 }
 }

-SpicyCtrl.prototype.jalapenoSpicy = function() {
- this.spice = 'jalapeño';
-}
+
 </pre>

 Things to notice in the example above:

- The `ng:controller` directive is used to (implicitly) create a scope for our template, and the
+- The `ngController` directive is used to (implicitly) create a scope for our template, and the
 scope is augmented (managed) by the `SpicyCtrl` controller.
 - `SpicyCtrl` is just a plain JavaScript function. As an (optional) naming convention the name
 starts with capital letter and ends with "Ctrl" or "Controller".
- The JavaScript keyword `this` in the `SpicyCtrl` function is bound to the scope that the
-controller augments.
- Assigning a property to `this` creates or updates the model.
- Controller methods can be created through direct assignment to scope (the `chiliSpicy` method) or
-as prototype methods of the controller constructor function(the `jalapenoSpicy` method)
+- Assigning a property to `$scope` creates or updates the model.
+- Controller methods can be created through direct assignment to scope (the `chiliSpicy` method)
 - Both controller methods are available in the template (for the `body` element and and its
 children).
+- NB:  Previous versions of Angular (pre 1.0 RC) allowed you to use `this` interchangeably with
+the $scope method, but this is no longer the case.  Inside of methods defined on the scope
+`this` and $scope are interchangeable (angular sets `this` to $scope), but not otherwise
+inside your controller constructor.
+- NB:  Previous versions of Angular (pre 1.0 RC) added prototype methods into the scope
+automatically, but this is no longer the case; all methods need to be added manually to
+the scope.
+

 Controller methods can also take arguments, as demonstrated in the following variation of the
 previous example.
@@ -137,17 +134,17 @@ previous example.
 ## Controller Method Arguments Example

 <pre>
-<body ng:controller="SpicyCtrl">
- <input ng:model="customSpice" value="wasabi">
- <button ng:click="spicy('chili')">Chili</button>
- <button ng:click="spicy(customSpice)">Custom spice</button>
+<body ng-controller="SpicyCtrl">
+ <input ng-model="customSpice" value="wasabi">
+ <button ng-click="spicy('chili')">Chili</button>
+ <button ng-click="spicy(customSpice)">Custom spice</button>
 <p>The food is {{spice}} spicy!</p>
 </body>

-function SpicyCtrl() {
- this.spice = 'very';
- this.spicy = function(spice) {
-   this.spice = spice;
+function SpicyCtrl($scope) {
+ $scope.spice = 'very';
+ $scope.spicy = function(spice) {
+   $scope.spice = spice;
 }
 }
 </pre>
@@ -160,33 +157,33 @@ input box) in the second button.

 ## Controller Inheritance Example

-Controller inheritance in angular is based on {@link api/angular.scope Scope} inheritance. Let's
+Controller inheritance in angular is based on {@link api/angular.module.ng.$rootScope.Scope Scope} inheritance. Let's
 have a look at an example:

 <pre>
-<body ng:controller="MainCtrl">
+<body ng-controller="MainCtrl">
 <p>Good {{timeOfDay}}, {{name}}!</p>
- <div ng:controller="ChildCtrl">
+ <div ng-controller="ChildCtrl">
   <p>Good {{timeOfDay}}, {{name}}!</p>
-   <p ng:controller="BabyCtrl">Good {{timeOfDay}}, {{name}}!</p>
+   <p ng-controller="BabyCtrl">Good {{timeOfDay}}, {{name}}!</p>
 </body>

-function MainCtrl() {
- this.timeOfDay = 'morning';
- this.name = 'Nikki';
+function MainCtrl($scope) {
+ $scope.timeOfDay = 'morning';
+ $scope.name = 'Nikki';
 }

-function ChildCtrl() {
- this.name = 'Mattie';
+function ChildCtrl($scope) {
+ $scope.name = 'Mattie';
 }

-function BabyCtrl() {
- this.timeOfDay = 'evening';
- this.name = 'Gingerbreak Baby';
+function BabyCtrl($scope) {
+ $scope.timeOfDay = 'evening';
+ $scope.name = 'Gingerbreak Baby';
 }
 </pre>

-Notice how we nested three `ng:controller` directives in our template. This template construct will
+Notice how we nested three `ngController` directives in our template. This template construct will
 result in 4 scopes being created for our view:

 - The root scope
@@ -206,19 +203,17 @@ are applied to the scope object.

 ## Testing Controllers

-The way to test a controller depends upon how complicated the controller is.
-
- If your controller doesn't use DI or scope methods — create the controller with the `new`
-operator and test away. For example:
+Although there are many ways to test a controller, one of the best conventions, shown below,
+involves injecting the `$rootScope` and `$controller`

 Controller Function:
 <pre>
-function myController() {
-   this.spices = [{"name":"pasilla", "spiciness":"mild"},
+function myController($scope) {
+   $scope.spices = [{"name":"pasilla", "spiciness":"mild"},
                  {"name":"jalapeno", "spiceiness":"hot hot hot!"},
                  {"name":"habanero", "spiceness":"LAVA HOT!!"}];

-   this.spice = "habanero";
+   $scope.spice = "habanero";
 }
 </pre>

@@ -227,27 +222,51 @@ Controller Test:
 describe('myController function', function() {

  describe('myController', function() {
-    var ctrl;
+    var scope;

-    beforeEach(function() {
-      ctrl = new myController();
-    });
+    beforeEach(inject(function($rootScope, $controller) {
+      scope = $rootScope.$new();
+      var ctrl = $controller(myController, {$scope: scope});
+    }));

    it('should create "spices" model with 3 spices', function() {
-      expect(ctrl.spices.length).toBe(3);
+      expect(scope.spices.length).toBe(3);
    });

    it('should set the default value of spice', function() {
-      expect(ctrl.spice).toBe('habanero');
+      expect(scope.spice).toBe('habanero');
    });
  });
 });
 </pre>

- If your controller does use DI or scope methods — create a root scope, then create the controller
-in the root scope with `scope.$new(MyController)`. Test the controller using `$eval`, if necessary.
- If you need to test a nested controller that depends on its parent's state — create a root scope,
-create a parent scope, create a child scope, and test the controller using $eval if necessary.
+
+If you need to test a nested controller one needs to create the same scope hierarchy
+in your test as exist in the DOM.
+
+<pre>
+describe('state', function() {
+    var mainScope, childScope, babyScope;
+
+    beforeEach(inject(function($rootScope, $controller) {
+        mainScope = $rootScope.$new();
+        var mainCtrl = $controller(MainCtrl, {$scope: mainScope});
+        childScope = mainScope.$new();
+        var childCtrl = $controller(ChildCtrl, {$scope: childScope});
+        babyScope = $rootScope.$new();
+        var babyCtrl = $controller(BabyCtrl, {$scope: babyScope});
+    }));
+
+    it('should have over and selected', function() {
+        expect(mainScope.timeOfDay).toBe('morning');
+        expect(mainScope.name).toBe('Nikki');
+        expect(childScope.timeOfDay).toBe('morning');
+        expect(childScope.name).toBe('Mattie');
+        expect(babyScope.timeOfDay).toBe('evening');
+        expect(babyScope.name).toBe('Gingerbreak Baby');
+    });
+});
+</pre>


 ## Related Topics
@@ -20,34 +20,34 @@ following ways:
 * Make a direct property assignment to the scope object in JavaScript code; this most commonly
 occurs in controllers:

-         function MyCtrl() {
+         function MyCtrl($scope) {
             // create property 'foo' on the MyCtrl's scope
             // and assign it an initial value 'bar'
-             this.foo = 'bar';
+             $scope.foo = 'bar';
         }

 * Use an {@link dev_guide.expressions angular expression} with an assignment operator in templates:

-         <button ng:click="{{foos='ball'}}">Click me</button>
+         <button ng-click="{{foos='ball'}}">Click me</button>

-* Use {@link api/angular.directive.ng:init ng:init directive} in templates (for toy/example apps
+* Use {@link api/angular.module.ng.$compileProvider.directive.ngInit ngInit directive} in templates (for toy/example apps
 only, not recommended for real applications):

-         <body ng:init=" foo = 'bar' ">
+         <body ng-init=" foo = 'bar' ">

 Angular creates models implicitly (by creating a scope property and assigning it a suitable value)
 when processing the following template constructs:

 * Form input, select, textarea and other form elements:

-         <input ng:model="query" value="fluffy cloud">
+         <input ng-model="query" value="fluffy cloud">

   The code above creates a model called "query" on the current scope with the value set to "fluffy
 cloud".

-* An iterator declaration in {@link api/angular.widget.@ng:repeat ng:repeater}:
+* An iterator declaration in {@link api/angular.module.ng.$compileProvider.directive.ngRepeat ngRepeater}:

-         <p ng:repeat="phone in phones"></p>
+         <p ng-repeat="phone in phones"></p>

   The code above creates one child scope for each item in the "phones" array and creates a "phone"
 object (model) on each of these scopes with its value set to the value of "phone" in the array.
@@ -9,8 +9,8 @@ the DOM based on information in the template, controller and model.

 In the angular implementation of MVC, the view has knowledge of both the model and the controller.
 The view knows about the model where two-way data-binding occurs. The view has knowledge of the
-controller through angular directives, such as {@link api/angular.directive.ng:controller
-ng:controller} and {@link api/angular.widget.ng:view ng:view}, and through bindings of this form:
+controller through angular directives, such as {@link api/angular.module.ng.$compileProvider.directive.ngController
+ngController} and {@link api/angular.module.ng.$compileProvider.directive.ngView ngView}, and through bindings of this form:
 `{{someControllerFunction()}}`. In these ways, the view can call functions in an associated
 controller function.

@@ -43,12 +43,12 @@ easier a web developer's life can if they're using angular:
 <doc:example>
 <doc:source>
 <script>
-   function InvoiceCntl() {
-     this.qty = 1;
-     this.cost = 19.95;
+   function InvoiceCntl($scope) {
+     $scope.qty = 1;
+     $scope.cost = 19.95;
   }
 </script>
- <div ng:controller="InvoiceCntl">
+ <div ng-controller="InvoiceCntl">
   <b>Invoice:</b>
   <br />
   <br />
@@ -56,8 +56,8 @@ easier a web developer's life can if they're using angular:
    <tr><td> </td><td> </td>
    <tr><td>Quantity</td><td>Cost</td></tr>
    <tr>
-      <td><input type="integer" min="0" ng:model="qty" required ></td>
-      <td><input type="number" ng:model="cost" required ></td>
+      <td><input type="integer" min="0" ng-model="qty" required ></td>
+      <td><input type="number" ng-model="cost" required ></td>
    </tr>
   </table>
   <hr />
@@ -79,33 +79,27 @@ easier a web developer's life can if they're using angular:
 Try out the Live Preview above, and then let's walk through the example and describe what's going
 on.

-In the `<html>` tag, we add an attribute to let the browser know about the angular namespace:
+In the `<html>` tag we specify that this is an angular application with the `ngApp` directive.
+The `ngApp' will cause the angular to {@link dev_guide.bootstrap auto initialize} your application.

-        <html xmlns:ng="http://angularjs.org">
+        <html ng-app>

-This ensures angular runs nicely in all major browsers.
+We load the angular using the  `<script>` tag:

-In the `<script>` tag we do two angular setup tasks:
+    <script src="http://code.angularjs.org/angular-?.?.?.min.js"></script>

-1. We load `angular.js`.
-2. The angular {@link api/angular.directive.ng:autobind ng:autobind} directive tells angular to
-{@link dev_guide.compiler compile} and manage the whole HTML document.
-
-    `<script src="http://code.angularjs.org/0.9.15/angular-0.9.15.min.js"
-             ng:autobind></script>`
-
-From the `name` attribute of the `<input>` tags, angular automatically sets up two-way data
+From the `ngModel` attribute of the `<input>` tags, angular automatically sets up two-way data
 binding, and we also demonstrate some easy input validation:

-        Quantity: <input type="integer" min="0" ng:model="qty" required >
-        Cost: <input type="number" ng:model="cost" required >
+        Quantity: <input type="integer" min="0" ng-model="qty" required >
+        Cost: <input type="number" ng-model="cost" required >

 These input widgets look normal enough, but consider these points:

 * When this page loaded, angular bound the names of the input widgets (`qty` and `cost`) to
 variables of the same name. Think of those variables as the "Model" component of the
 Model-View-Controller design pattern.
-* Note the angular/HTML widget, {@link api/angular.widget.input input}.
+* Note the angular/HTML widget, {@link api/angular.module.ng.$compileProvider.directive.input input}.
 You may have noticed that when you enter invalid data
 or leave the the input fields blank, the borders turn red color, and the display value disappears.
 These widgets make it easier to implement field validation than coding them in JavaScript,
@@ -115,12 +109,12 @@ And finally, the mysterious `{{ double curly braces }}`:

         Total: {{qty * cost | currency}}

-This notation, `{{ _expression_ }}`, is a bit of built-in angular {@link dev_guide.compiler.markup
-markup}, a shortcut for displaying data to the user. The expression within curly braces gets
-transformed by the angular compiler into an angular directive ({@link api/angular.directive.ng:bind
-ng:bind}). The expression itself can be a combination of both an expression and a {@link
-dev_guide.templates.filters filter}: `{{ expression | filter }}`. Angular provides filters for
-formatting display data.
+This notation, `{{ _expression_ }}`, is a bit of built-in angular binding markup, a shortcut for
+displaying data to the user. The expression within curly braces is monitored and its evaluated value
+is updated into the view by angular's template compiler. Alternatively, one could use angular's
+{@link api/angular.module.ng.$compileProvider.directive.ngBind ngBind}) directive. The expression
+itself can be a combination of both an expression and a {@link dev_guide.templates.filters filter}:
+`{{ expression | filter }}`. Angular provides filters for formatting display data.

 In the example above, the expression in double-curly braces directs angular to, "Bind the data we
 got from the input widgets to the display, multiply them together, and format the resulting number
@@ -11,8 +11,8 @@ pattern, a scope's properties comprise both the model and the controller methods


 ### Scope characteristics
- Scopes provide APIs ({@link api/angular.scope.$watch $watch}) to observe model mutations.
- Scopes provide APIs ({@link api/angular.scope.$apply $apply}) to propagate any model changes
+- Scopes provide APIs ({@link api/angular.module.ng.$rootScope.Scope#$watch $watch}) to observe model mutations.
+- Scopes provide APIs ({@link api/angular.module.ng.$rootScope.Scope#$apply $apply}) to propagate any model changes
 through the system into the view from outside of the "Angular realm" (controllers, services,
 Angular event handlers).
 - Scopes can be nested to isolate application components while providing access to shared model
@@ -23,20 +23,18 @@ available as `this` within the given context. (Note: This api will change before

 ### Root scope

-Every application has a root scope, which is the ancestor of all other scopes. The root scope is
-responsible for creating the injector which is assigned to the {@link api/angular.scope.$service
-$service} property, and initializing the services.
+Every application has a root scope, which is the ancestor of all other scopes.

 ### What is scope used for?

-{@link dev_guide.expressions Expressions} in the view are {@link api/angular.scope.$eval evaluated}
+{@link dev_guide.expressions Expressions} in the view are {@link api/angular.module.ng.$rootScope.Scope#$eval evaluated}
 against the current scope. When HTML DOM elements are attached to a scope, expressions in those
 elements are evaluated against the attached scope.

 There are two kinds of expressions:

 - Binding expressions, which are observations of property changes. Property changes are reflected
-in the view during the {@link api/angular.scope.$digest digest cycle}.
+in the view during the {@link api/angular.module.ng.$rootScope.Scope#$digest digest cycle}.
 - Action expressions, which are expressions with side effects. Typically, the side effects cause
 execution of a method in a controller in response to a user action, such as clicking on a button.

@@ -48,52 +46,54 @@ reside on a child scope, if a property read does not find the property on a scop
 recursively check the parent scope, grandparent scope, etc. all the way to the root scope before
 defaulting to undefined.

-{@link api/angular.directive Directives}  associated with elements (ng:controller, ng:repeat,
-ng:include, etc.) create new child scopes that inherit properties from the current parent scope.
-Any code in Angular is free to create a new scope. Whether or not your code does so is an
-implementation detail of the directive, that is, you can decide when or if this happens.
-Inheritance typically mimics HTML DOM element nesting, but does not do so with the same
+{@link guide/directive directives} associated with elements
+(ngController, ngRepeat, ngInclude, etc.) create new child scopes that inherit properties from
+the current parent scope. Any code in Angular is free to create a new scope. Whether or not your
+code does so is an implementation detail of the directive, that is, you can decide when or if this
+happens. Inheritance typically mimics HTML DOM element nesting, but does not do so with the same
 granularity.

 A property write will always write to the current scope. This means that a write can hide a parent
 property within the scope it writes to, as shown in the following example.

 <pre>
-var root = angular.scope();
-var child = root.$new();
+it('should inherit properties', inject(function($rootScope)) {
+  var root = $rootScope;
+  var child = root.$new();

-root.name = 'angular';
-expect(child.name).toEqual('angular');
-expect(root.name).toEqual('angular');
+  root.name = 'angular';
+  expect(child.name).toEqual('angular');
+  expect(root.name).toEqual('angular');

-child.name = 'super-heroic framework';
-expect(child.name).toEqual('super-heroic framework');
-expect(root.name).toEqual('angular');
+  child.name = 'super-heroic framework';
+  expect(child.name).toEqual('super-heroic framework');
+  expect(root.name).toEqual('angular');
+});
 </pre>


 ### Scope life cycle
 1. **Creation**

-   * You can create the root scope via {@link api/angular.scope angular.scope()}.
-   * To create a child scopes, you should call {@link api/angular.scope.$new parentScope.$new()}.
+   * The root scope is created by the  {@link api/angular.module.ng.$rootScope $rootScope} service.
+   * To create a child scopes, you should call {@link api/angular.module.ng.$rootScope.Scope#$new parentScope.$new()}.

 2. **Watcher registration**

   Watcher registration can happen at any time and on any scope (root or child) via {@link
-api/angular.scope.$watch scope.$watch()} API.
+api/angular.module.ng.$rootScope.Scope#$watch scope.$watch()} API.

 3. **Model mutation**

   For mutations to be properly observed, you should make them only within the execution of the
-function passed into {@link api/angular.scope.$apply scope.$apply()} call. (Angular apis do this
+function passed into {@link api/angular.module.ng.$rootScope.Scope#$apply scope.$apply()} call. (Angular apis do this
 implicitly, so no extra `$apply` call is needed when doing synchronous work in controllers, or
-asynchronous work with {@link api/angular.service.$xhr $xhr} or {@link api/angular.service.$defer
+asynchronous work with {@link api/angular.module.ng.$http $http} or {@link api/angular.module.ng.$defer
 $defer} services.

 4. **Mutation observation**

-   At the end of each `$apply` call {@link api/angular.scope.$digest $digest} cycle is started on
+   At the end of each `$apply` call {@link api/angular.module.ng.$rootScope.Scope#$digest $digest} cycle is started on
 the root scope, which then propagates throughout all child scopes.

   During the `$digest` cycle, all `$watch-ers` expressions or functions are checked for model
@@ -102,7 +102,7 @@ mutation and if a mutation is detected, the `$watch-er` listener is called.
 5. **Scope destruction**

   When child scopes are no longer needed, it is the responsibility of the child scope creator to
-destroy them via {@link api/angular.scope.$destroy scope.$destroy()} API. This will stop
+destroy them via {@link api/angular.module.ng.$rootScope.Scope#$destroy scope.$destroy()} API. This will stop
 propagation of `$digest` calls into the child scope and allow for memory used by the child scope
 models to be reclaimed by the garbage collector.

@@ -116,29 +116,27 @@ scopes come into play throughout and get a sense of their interactions.

 1. At application compile time, a root scope is created and is attached to the root `<HTML>` DOM
 element.
-   1. The root scope creates an {@link api/angular.injector injector} which is assigned to the
-{@link api/angular.scope.$service $service} property of the root scope.
-   2. Any eager {@link api/angular.scope.$service services} are initialized at this point.
 2. During the compilation phase, the {@link dev_guide.compiler compiler} matches {@link
-api/angular.directive directives} against the DOM template. The directives usually fall into one of
-two categories:
-   - Observing {@link api/angular.directive directives}, such as double-curly expressions
-`{{expression}}`, register listeners using the {@link api/angular.scope.$watch $watch()} method.
-This type of directive needs to be notified whenever the expression changes so that it can update
-the view.
-   -  Listener directives, such as {@link api/angular.directive.ng:click ng:click}, register a
-listener with the DOM. When the DOM listener fires, the directive executes the associated
-expression and updates the view using  the {@link api/angular.scope.$apply $apply()} method.
+guide/directive directives} against the DOM template. The directives
+usually fall into one of two categories:
+   - Observing {@link guide/directive directives}, such as double-curly
+    expressions `{{expression}}`, register listeners using the {@link
+    api/angular.module.ng.$rootScope.Scope#$watch $watch()} method. This type of directive needs to
+    be notified whenever the expression changes so that it can update the view.
+   -  Listener directives, such as {@link api/angular.module.ng.$compileProvider.directive.ngClick
+   ngClick}, register a listener with the DOM. When the DOM listener fires, the directive executes
+   the associated expression and updates the view using  the {@link
+   api/angular.module.ng.$rootScope.Scope#$apply $apply()} method.
 3. When an external event (such as a user action, timer or XHR) is received, the associated {@link
 dev_guide.expressions expression} must be applied to the scope through the {@link
-api/angular.scope.$apply $apply()} method so that all listeners are updated correctly.
+api/angular.module.ng.$rootScope.Scope#$apply $apply()} method so that all listeners are updated correctly.


 ### Directives that create scopes
-In most cases, {@link api/angular.directive directives} and scopes interact but do not create new
-instances of scope. However, some directives, such as {@link api/angular.directive.ng:controller
-ng:controller} and {@link api/angular.widget.@ng:repeat ng:repeat}, create new child scopes using
-the {@link api/angular.scope.$new $new()} method and then attach the child scope to the
+In most cases, {@link guide/directive directives} and scopes interact but do not create new
+instances of scope. However, some directives, such as {@link api/angular.module.ng.$compileProvider.directive.ngController
+ngController} and {@link api/angular.module.ng.$compileProvider.directive.ngRepeat ngRepeat}, create new child scopes using
+the {@link api/angular.module.ng.$rootScope.Scope#$new $new()} method and then attach the child scope to the
 corresponding DOM element. You can retrieve a scope for any DOM element by using an
 `angular.element(aDomElement).scope()` method call.)

@@ -146,15 +144,15 @@ corresponding DOM element. You can retrieve a scope for any DOM element by using
 ### Controllers and scopes
 Scopes and controllers interact with each other in the following situations:
   - Controllers use scopes to expose controller methods to templates (see {@link
-api/angular.directive.ng:controller ng:controller}).
+api/angular.module.ng.$compileProvider.directive.ngController ngController}).
   - Controllers define methods (behavior) that can mutate the model (properties on the scope).
-   - Controllers may register {@link api/angular.scope.$watch watches} on the model. These watches
+   - Controllers may register {@link api/angular.module.ng.$rootScope.Scope#$watch watches} on the model. These watches
 execute immediately after the controller behavior executes, but before the DOM gets updated.

 See the {@link dev_guide.mvc.understanding_controller controller docs} for more information.

 ### Updating scope properties
-You can update a scope by calling its {@link api/angular.scope.$apply $apply()} method with an
+You can update a scope by calling its {@link api/angular.module.ng.$rootScope.Scope#$apply $apply()} method with an
 expression or a function as the function argument. However it is typically not necessary to do this
 explicitly. In most cases, angular intercepts all external events (such as user interactions, XHRs,
 and timers) and wraps their callbacks into the `$apply()` method call on the scope object for you
@@ -172,13 +170,13 @@ $watch-ers firing and view getting updated. Similarly, when a request to fetch d
 is made and the response comes back, the data is written into the model (scope) within an $apply,
 which then pushes updates through to the view and any other dependents.

-A widget that creates scopes (such as {@link api/angular.widget.@ng:repeat ng:repeat}) via `$new`,
+A widget that creates scopes (such as {@link api/angular.module.ng.$compileProvider.directive.ngRepeat ngRepeat}) via `$new`,
 doesn't need to worry about propagating the `$digest` call from the parent scope to child scopes.
 This happens automatically.

 ## Scopes in unit-testing
-You can create scopes, including the root scope, in tests using the {@link api/angular.scope
-angular.scope()} API. This allows you to mimic the run-time environment and have full control over
+You can create scopes, including the root scope, in tests by having the $rootScope injected into
+your spec. This allows you to mimic the run-time environment and have full control over
 the life cycle of the scope so that you can assert correct model transitions. Since these scopes
 are created outside the normal compilation process, their life cycles must be managed by the test.

@@ -188,18 +186,20 @@ within the unit-tests.

 <pre>
  // example of a test
-  var scope = angular.scope();
-  scope.$watch('name', function(scope, name){
-   scope.greeting = 'Hello ' + name + '!';
-  });
+  it('should trigger a watcher', inject(function($rootScope) {
+    var scope = $rootScope;
+    scope.$watch('name', function(name) {
+     scope.greeting = 'Hello ' + name + '!';
+    });

-  scope.name = 'angular';
-  // The watch does not fire yet since we have to manually trigger the digest phase.
-  expect(scope.greeting).toEqual(undefined);
+    scope.name = 'angular';
+    // The watch does not fire yet since we have to manually trigger the digest phase.
+    expect(scope.greeting).toEqual(undefined);

-  // manually trigger digest phase from the test
-  scope.$digest();
-  expect(scope.greeting).toEqual('Hello Angular!');
+    // manually trigger digest phase from the test
+    scope.$digest();
+    expect(scope.greeting).toEqual('Hello Angular!');
+  }
 </pre>


@@ -209,9 +209,14 @@ When you find it necessary to inject your own mocks in your tests, use a scope t
 service instances, as shown in the following example.

 <pre>
-var myLocation = {};
-var scope = angular.scope(angular.service, {$location: myLocation});
-expect(scope.$service('$location')).toEqual(myLocation);
+it('should allow override of providers', inject(
+  function($provide) {
+    $provide.value('$location', {mode:'I am a mock'});
+  },
+  function($location){
+    expect($location.mode).toBe('I am a mock');
+  }
+)};
 </pre>

 ## Related Topics
@@ -221,5 +226,5 @@ expect(scope.$service('$location')).toEqual(myLocation);

 ## Related API

-* {@link api/angular.scope Angular Scope API}
+* {@link api/angular.module.ng.$rootScope.Scope Angular Scope API}

@@ -13,15 +13,15 @@ the contexts in which Angular creates data-bindings between the model and the vi

 In addition to providing the context in which data is evaluated, Angular scope objects watch for
 model changes. The scope objects also notify all components interested in any model changes (for
-example, functions registered through {@link api/angular.scope.$watch $watch}, bindings created by
-{@link api/angular.directive.ng:bind ng:bind}, or HTML input elements).
+example, functions registered through {@link api/angular.module.ng.$rootScope.Scope#$watch $watch}, bindings created by
+{@link api/angular.module.ng.$compileProvider.directive.ngBind ngBind}, or HTML input elements).

 Angular scope objects:

 * Link the model, controller and view template together.
-* Provide the mechanism to watch for model changes ({@link api/angular.scope.$watch $watch}).
-* Apply model changes to the system ({@link api/angular.scope.$apply $apply}).
-* Provide the context in which expressions are evaluated ({@link api/angular.scope.$eval $eval}).
+* Provide the mechanism to watch for model changes ({@link api/angular.module.ng.$rootScope.Scope#$watch $watch}).
+* Apply model changes to the system ({@link api/angular.module.ng.$rootScope.Scope#$apply $apply}).
+* Provide the context in which expressions are evaluated ({@link api/angular.module.ng.$rootScope.Scope#$eval $eval}).


 ## Related Topics
@@ -31,5 +31,5 @@ Angular scope objects:

 ## Related API

-* {@link api/angular.scope Angular Scope API}
+* {@link api/angular.module.ng.$rootScope.Scope Angular Scope API}

@@ -21,8 +21,8 @@ code, observe how the value of `name` changes, based on the HTML element it is d

 <doc:example>
 <doc:source>
- <ul ng:init="name='Hank'; names=['Igor', 'Misko', 'Gail', 'Kai']">
-   <li ng:repeat="name in names">
+ <ul ng-init="name='Hank'; names=['Igor', 'Misko', 'Gail', 'Kai']">
+   <li ng-repeat="name in names">
           Name = {{name}}!
   </li>
 </ul>
@@ -45,7 +45,7 @@ code, observe how the value of `name` changes, based on the HTML element it is d
 </doc:scenario>
 </doc:example>

-The angular {@link api/angular.widget.@ng:repeat ng:repeat} directive creates a new scope for each
+The angular {@link api/angular.module.ng.$compileProvider.directive.ngRepeat ngRepeat} directive creates a new scope for each
 element that it repeats (in this example the elements are list items). In the `<ul>` element, we
 initialized `name` to "Hank", and we created an array called `names` to use as the data source for
 the list items. In each `<li>` element, `name` is overridden. Outside of the `<li>` repeater, the
@@ -63,4 +63,4 @@ The following illustration shows the DOM and angular scopes for the example abov

 ## Related API

-* {@link api/angular.scope Angular Scope API}
+* {@link api/angular.module.ng.$rootScope.Scope Angular Scope API}
@@ -88,26 +88,22 @@ setter methods that allow you to get or change the current URL in the browser.

 ## $location service configuration

-To configure the `$location` service, you define the `$locationConfig` service which is an object
-with configuration properties:
+To configure the `$location` service, retrieve the
+{@link api/angular.module.ng.$locationProvider $locationProvider} and set the parameters as follows:

- **html5Mode**: {boolean}<br />
+
+- **html5Mode(mode)**: {boolean}<br />
  `true` - see HTML5 mode<br />
  `false` - see Hashbang mode<br />
  default: `false`

- **hashPrefix**: {string}<br />
+- **hashPrefix(prefix)**: {string}<br />
  prefix used for Hashbang URLs (used in Hashbang mode or in legacy browser in Html5 mode)<br />
  default: `'!'`

 ### Example configuration
 <pre>
-angular.service('$locationConfig', function() {
-  return {
-    html5mode: true,
-    hashPrefix: '!'
-  };
-});
+$locationProvider.html5Mode(true).hashPrefix('!');
 </pre>

 ## Getter and setter methods
@@ -138,7 +134,7 @@ current URL without creating a new browser history record you can call:
 </pre>

 Note that the setters don't update `window.location` immediately. Instead, `$location` service is
-aware of the {@link api/angular.scope scope} life-cycle and coalesces multiple `$location`
+aware of the {@link api/angular.module.ng.$rootScope.Scope scope} life-cycle and coalesces multiple `$location`
 mutations into one "commit" to the `window.location` object during the scope `$digest` phase. Since
 multiple changes to the $location's state will be pushed to the browser as a single change, it's
 enough to call the `replace()` method just once to make the entire "commit" a replace operation
@@ -214,26 +210,27 @@ In this mode, `$location` uses Hashbang URLs in all browsers.
 ### Example

 <pre>
-angular.service('$locationConfig', function() {
-  return {
-    html5Mode: false,
-    hashPrefix: '!'
-  };
-});
+it('should show example', inject(
+  function($locationProvider) {
+    $locationProvider.html5mode = false;
+    $locationProvider.hashPrefix = '!';
+  },
+  function($location) {
+    // open http://host.com/base/index.html#!/a
+    $location.absUrl() == 'http://host.com/base/index.html#!/a'
+    $location.path() == '/a'

-// open http://host.com/base/index.html#!/a
-$location.absUrl() == 'http://host.com/base/index.html#!/a'
-$location.path() == '/a'
+    $location.path('/foo')
+    $location.absUrl() == 'http://host.com/base/index.html#!/foo'

-$location.path('/foo')
-$location.absUrl() == 'http://host.com/base/index.html#!/foo'
+    $location.search() == {}
+    $location.search({a: 'b', c: true});
+    $location.absUrl() == 'http://host.com/base/index.html#!/foo?a=b&c'

-$location.search() == {}
-$location.search({a: 'b', c: true});
-$location.absUrl() == 'http://host.com/base/index.html#!/foo?a=b&c'
-
-$location.path('/new').search('x=y');
-$location.absUrl() == 'http://host.com/base/index.html#!/new?x=y'
+    $location.path('/new').search('x=y');
+    $location.absUrl() == 'http://host.com/base/index.html#!/new?x=y'
+  }
+));
 </pre>

 ### Crawling your app
@@ -262,39 +259,40 @@ having to worry about whether the browser displaying your app supports the histo
 ### Example

 <pre>
-angular.service('$locationConfig', function() {
-  return {
-    html5Mode: true,
-    hashPrefix: '!'
-  };
-});
+it('should show example', inject(
+  function($locationProvider) {
+    $locationProvider.html5mode = true;
+    $locationProvider.hashPrefix = '!';
+  },
+  function($location) {
+    // in browser with HTML5 history support:
+    // open http://host.com/#!/a -> rewrite to http://host.com/a
+    // (replacing the http://host.com/#!/a history record)
+    $location.path() == '/a'

-// in browser with HTML5 history support:
-// open http://host.com/#!/a -> rewrite to http://host.com/a
-// (replacing the http://host.com/#!/a history record)
-$location.path() == '/a'
+    $location.path('/foo');
+    $location.absUrl() == 'http://host.com/foo'

-$location.path('/foo');
-$location.absUrl() == 'http://host.com/foo'
+    $location.search() == {}
+    $location.search({a: 'b', c: true});
+    $location.absUrl() == 'http://host.com/foo?a=b&c'

-$location.search() == {}
-$location.search({a: 'b', c: true});
-$location.absUrl() == 'http://host.com/foo?a=b&c'
+    $location.path('/new').search('x=y');
+    $location.url() == 'new?x=y'
+    $location.absUrl() == 'http://host.com/new?x=y'

-$location.path('/new').search('x=y');
-$location.url() == 'new?x=y'
-$location.absUrl() == 'http://host.com/new?x=y'
+    // in browser without html5 history support:
+    // open http://host.com/new?x=y -> redirect to http://host.com/#!/new?x=y
+    // (again replacing the http://host.com/new?x=y history item)
+    $location.path() == '/new'
+    $location.search() == {x: 'y'}

-// in browser without html5 history support:
-// open http://host.com/new?x=y -> redirect to http://host.com/#!/new?x=y
-// (again replacing the http://host.com/new?x=y history item)
-$location.path() == '/new'
-$location.search() == {x: 'y'}
-
-$location.path('/foo/bar');
-$location.path() == '/foo/bar'
-$location.url() == '/foo/bar?x=y'
-$location.absUrl() == 'http://host.com/#!/foo/bar?x=y'
+    $location.path('/foo/bar');
+    $location.path() == '/foo/bar'
+    $location.url() == '/foo/bar?x=y'
+    $location.absUrl() == 'http://host.com/#!/foo/bar?x=y'
+  }
+));
 </pre>

 ### Fallback for legacy browsers
@@ -307,7 +305,7 @@ history API  or not; the `$location` service makes this transparent to you.
 ### Html link rewriting

 When you use the history API mode, you will need different links in different browser, but all you
-have to do is specify regular URL links, such as: `&lt;a href="/some?foo=bar"&gt;link&lt;/a&gt;`
+have to do is specify regular URL links, such as: `<a href="/some?foo=bar">link</a>`

 When a user clicks on this link,

@@ -318,12 +316,13 @@ When a user clicks on this link,
 In cases like the following, links are not rewritten; instead, the browser will perform a full page
 reload to the original link.

- Links with an `ng:ext-link` directive<br />
-  Example: `<a href="/ext/link?a=b" ng:ext-link>link</a>`
- Links that contain `target="_blank"`<br />
-  Example: `<a href="/ext/link?a=b" target="_blank">link</a>`
- Absolute links that go to a different domain<br />
+- Links that contain `target` element<br>
+  Example: `<a href="/ext/link?a=b" target="_self">link</a>`
+- Absolute links that go to a different domain<br>
  Example: `<a href="http://angularjs.org/">link</a>`
+- Links starting with '/' that lead to a different base path when base is defined<br>
+  Example: `<a href="/not-my-base/link">link</a>`
+

 ### Server side

@@ -343,11 +342,13 @@ Applications Crawlable}.

 ### Relative links

-Be sure to check all relative links, images, scripts etc. You must use an absolute path because the
-path is going to be rewritten. You can use `<base href="" />` tag as well.
+Be sure to check all relative links, images, scripts etc. You must either specify the url base in
+the head of your main html file (`<base href="/my-base">`) or you must use absolute urls
+(starting with `/`) everywhere because relative urls will be resolved to absolute urls using the
+initial absolute url of the document, which is often different from the root of the application.

 Running Angular apps with the History API enabled from document root is strongly encouraged as it
-takes care of all relative link issues. **Otherwise you have to specify &lt;base href="" /&gt; !**
+takes care of all relative link issues.

 ### Sending links among different browsers

@@ -368,40 +369,40 @@ redirect to regular / hashbang url, as this conversion happens only during parsi
 = on page reload.

 In this examples we use `<base href="/base/index.html" />`
+<doc:example>
+<doc:source source="false">

-<ul class="doc-example">
-<li ng:non-bindable class="html5-hashbang-example">
-  <div id="html5-mode" ng:controller="Html5Cntl">
+<div ng-non-bindable class="html5-hashbang-example">
+  <div id="html5-mode" ng-controller="Html5Cntl">
    <h3>Browser with History API</h3>
-    <ng:address-bar browser="html5"></ng:address-bar><br /><br />
-    $location.protocol() = {{$location.protocol()}}<br />
-    $location.host() = {{$location.host()}}<br />
-    $location.port() = {{$location.port()}}<br />
-    $location.path() = {{$location.path()}}<br />
-    $location.search() = {{$location.search()}}<br />
-    $location.hash() = {{$location.hash()}}<br />
-    <a href="/base/first?a=b">/base/first?a=b</a> | <a
-href="sec/ond?flag#hash">sec/ond?flag#hash</a> | <a href="/base/another?search"
-ng:ext-link>external</a>
+    <div ng-address-bar browser="html5"></div><br><br>
+    $location.protocol() = {{$location.protocol()}}<br>
+    $location.host() = {{$location.host()}}<br>
+    $location.port() = {{$location.port()}}<br>
+    $location.path() = {{$location.path()}}<br>
+    $location.search() = {{$location.search()}}<br>
+    $location.hash() = {{$location.hash()}}<br>
+    <a href="http://www.host.com/base/first?a=b">/base/first?a=b</a> |
+    <a href="http://www.host.com/base/sec/ond?flag#hash">sec/ond?flag#hash</a> |
+    <a href="/other-base/another?search">external</a>
  </div>

-  <div id="hashbang-mode" ng:controller="HashbangCntl">
+  <div id="hashbang-mode" ng-controller="HashbangCntl">
    <h3>Browser without History API</h3>
-    <ng:address-bar browser="hashbang"></ng:address-bar><br /><br />
-    $location.protocol() = {{$location.protocol()}}<br />
-    $location.host() = {{$location.host()}}<br />
-    $location.port() = {{$location.port()}}<br />
-    $location.path() = {{$location.path()}}<br />
-    $location.search() = {{$location.search()}}<br />
-    $location.hash() = {{$location.hash()}}<br />
-    <a href="/base/first?a=b">/base/first?a=b</a> | <a
-href="sec/ond?flag#hash">sec/ond?flag#hash</a> | <a href="/base/another?search"
-ng:ext-link>external</a>
+    <div ng-address-bar browser="hashbang"></div><br><br>
+    $location.protocol() = {{$location.protocol()}}<br>
+    $location.host() = {{$location.host()}}<br>
+    $location.port() = {{$location.port()}}<br>
+    $location.path() = {{$location.path()}}<br>
+    $location.search() = {{$location.search()}}<br>
+    $location.hash() = {{$location.hash()}}<br>
+    <a href="http://www.host.com/base/first?a=b">/base/first?a=b</a> |
+    <a href="http://www.host.com/base/sec/ond?flag#hash">sec/ond?flag#hash</a> |
+    <a href="/other-base/another?search">external</a>
  </div>
-</li>
-</ul>
+</div>

-<script type="text/javascript">
+<script>
  function FakeBrowser(initUrl, baseHref) {
    this.onUrlChange = function(fn) {
      this.urlChange = fn;
@@ -419,59 +420,56 @@ ng:ext-link>external</a>
      return baseHref;
    };

-    this.hover = angular.noop;
    this.notifyWhenOutstandingRequests = angular.noop;
  }

  var browsers = {
    html5: new FakeBrowser('http://www.host.com/base/path?a=b#h', '/base/index.html'),
-    hashbang: new FakeBrowser('http://www.host.com/base/index.html#!/path?a=b#h',
-'/base/index.html')
+    hashbang: new FakeBrowser('http://www.host.com/base/index.html#!/path?a=b#h', '/base/index.html')
  };

-  function Html5Cntl($location) {
-    this.$location = $location;
+  function Html5Cntl($scope, $location) {
+    $scope.$location = $location;
  }

-  function HashbangCntl($location) {
-    this.$location = $location;
+  function HashbangCntl($scope, $location) {
+    $scope.$location = $location;
  }

-  angular.widget('ng:address-bar', function(tpl) {
-    return function(elm) {
-      var browser = browsers[elm.attr('browser')],
-          input = angular.element('<input type="text" />').val(browser.url()),
-          delay;
-
-      input.bind('keypress keyup keydown', function() {
-        if (!delay) {
-          delay = setTimeout(fireUrlChange, 250);
-        }
-      });
-
-      browser.url = function(url) {
-        return input.val(url);
-      };
-
-      elm.append('Address: ').append(input);
-
-      function fireUrlChange() {
-        delay = null;
-        browser.urlChange(input.val());
-      }
-    };
-  });
-
  function initEnv(name) {
    var root = angular.element(document.getElementById(name + '-mode'));
-    var scope = angular.scope(null, {
-      $locationConfig: {html5Mode: true, hashPrefix: '!'},
-      $browser: browsers[name],
-      $document: root,
-      $sniffer: {history: name == 'html5'}
-    });
+    angular.bootstrap(root, [function($compileProvider, $locationProvider, $provide){
+      $locationProvider.html5Mode(true).hashPrefix('!');

-    angular.compile(root)(scope).$apply();
+      $provide.value('$browser', browsers[name]);
+      $provide.value('$document', root);
+      $provide.value('$sniffer', {history: name == 'html5'});
+
+      $compileProvider.directive('ngAddressBar', function() {
+        return function(scope, elm, attrs) {
+          var browser = browsers[attrs.browser],
+              input = angular.element('<input type="text">').val(browser.url()),
+              delay;
+
+          input.bind('keypress keyup keydown', function() {
+            if (!delay) {
+              delay = setTimeout(fireUrlChange, 250);
+            }
+          });
+
+          browser.url = function(url) {
+            return input.val(url);
+          };
+
+          elm.append('Address: ').append(input);
+
+          function fireUrlChange() {
+            delay = null;
+            browser.urlChange(input.val());
+          }
+        };
+      });
+    }]);
    root.bind('click', function(e) {
      e.stopPropagation();
    });
@@ -481,6 +479,9 @@ ng:ext-link>external</a>
  initEnv('hashbang');
 </script>

+</doc:source>
+</doc:example>
+

 # Caveats

@@ -488,11 +489,11 @@ ng:ext-link>external</a>

 The `$location` service allows you to change only the URL; it does not allow you to reload the
 page. When you need to change the URL and reload the page or navigate to a different page, please
-use a lower level API, {@link api/angular.service.$window $window.location.href}.
+use a lower level API, {@link api/angular.module.ng.$window $window.location.href}.

 ## Using $location outside of the scope life-cycle

-`$location` knows about Angular's {@link api/angular.scope scope} life-cycle. When a URL changes in
+`$location` knows about Angular's {@link api/angular.module.ng.$rootScope.Scope scope} life-cycle. When a URL changes in
 the browser it updates the `$location` and calls `$apply` so that all $watchers / $observers are
 notified.
 When you change the `$location` inside the `$digest` phase everything is ok; `$location` will
@@ -512,29 +513,23 @@ hashPrefix.
 # Testing with the $location service

 When using `$location` service during testing, you are outside of the angular's {@link
-api/angular.scope scope} life-cycle. This means it's your responsibility to call `scope.$apply()`.
+api/angular.module.ng.$rootScope.Scope scope} life-cycle. This means it's your responsibility to call `scope.$apply()`.

 <pre>
-angular.service('$serviceUnderTest', function($location) {
-  // whatever it does...
-};
-
-describe('$serviceUnderTest', function() {
-  var scope, $location, $sut;
-
-  beforeEach(function() {
-    scope = angular.scope();
-    $location = scope.$service('$location');
-    $sut = scope.$service('$serviceUnderTest');
+describe('serviceUnderTest', function() {
+  beforeEach(module(function($provide) {
+    $provide.factory('serviceUnderTest', function($location){
+      // whatever it does...
+    });
  });

-  it('should...', function() {
+  it('should...', inject(function($location, $rootScope, serviceUnderTest) {
    $location.path('/new/path');
-    scope.$apply();
+    $rootScope.$apply();

    // test whatever the service should do...

-  });
+  }));
 });
 </pre>

@@ -620,15 +615,15 @@ https://github.com/angular/angular.js/issues/404 issue}).  If you should require
 you will need to specify an extra property that has two watchers. For example:
 <pre>
 <!-- html -->
-<input type="text" ng:model="locationPath" />
+<input type="text" ng-model="locationPath" />
 </pre>
 <pre>
 // js - controller
-this.$watch('locationPath', function(scope, path) {
+this.$watch('locationPath', function(path) {
  $location.path(path);
 });

-this.$watch('$location.path()', function(scope, path) {
+this.$watch('$location.path()', function(path) {
  scope.locationPath = path;
 });
 </pre>
@@ -636,7 +631,7 @@ this.$watch('$location.path()', function(scope, path) {

 # Related API

-* {@link api/angular.service.$location $location API}
+* {@link api/angular.module.ng.$location $location API}



@@ -1,58 +1,104 @@
@ngdoc overview
-@name Developer Guide: Angular Services: Creating Angular Services
+@name Developer Guide: Angular Services: Creating Services
@description

 While angular offers several useful services, for any nontrivial application you'll find it useful
 to write your own custom services. To do this you begin by registering a service factory function
-that angular's DI will use to create the service object when it is needed.
-
-The `angular.service` method accepts three parameters:
-
- `{string} name` - Name of the service.
- `{function()} factory` - Factory function(called just once by DI).
- `{Object} config` -  Configuration object with the following properties:
-  - `$inject` - {Array.<string>} - Array of service ids this service depends on. These services
-will be passed as arguments into the factory function in the same order specified in the `$inject`
-array. Defaults to `[]`.
-  - `$eager` - {boolean} - If true, the service factory will be called and the service will be
-instantiated when angular boots. If false, the service will be lazily instantiated when it is first
-requested during instantiation of a dependant. Defaults to `false`.
-
-The `this` of the factory function is bound to the root scope of the angular application.
+with a module either via the {@link api/angular.module Module#factory api} or directly
+via the {@link api/angular.module.AUTO.$provide $provide} api inside of module config function.

 All angular services participate in {@link dev_guide.di dependency injection (DI)} by registering
-themselves with angular's DI system (injector) under a `name` (id) as well as by declaring
+themselves with Angular's DI system (injector) under a `name` (id) as well as by declaring
 dependencies which need to be provided for the factory function of the registered service. The
 ability to swap dependencies for mocks/stubs/dummies in tests allows for services to be highly
 testable.

+
+# Registering Services
+
+To register a service, you must have a module that this service will be part of. Afterwards, you
+can register the service with the module either via the {@link api/angular.Module Module api} or
+by using the {@link api/angular.module.AUTO.$provide $provide} service in the module configuration
+function.The following pseudo-code shows both approaches:
+
+Using the angular.Module api:
+<pre>
+var myModule = angular.module('myModule', []);
+myModule.factory('serviceId', function() {
+  var shinyNewServiceInstance;
+  //factory function body that constructs shinyNewServiceInstance
+  return shinyNewServiceInstance;
+});
+</pre>
+
+Using the $provide service:
+<pre>
+angular.module('myModule', [], function($provide) {
+  $provide.factory('serviceId', function() {
+    var shinyNewServiceInstance;
+    //factory function body that constructs shinyNewServiceInstance
+    return shinyNewServiceInstance;
+  });
+});
+</pre>
+
+Note that you are not registering a service instance, but rather a factory function that will
+create this instance when called.
+
+
+# Dependencies
+
+Services can not only be depended upon, but also have its own dependencies. These can be specified
+as arguments of the factory function. {@link dev_guide.di.understanding_di Read more} about the DI
+in Angular and the use of array notation and $inject property to make DI annotation
+minification-proof.
+
 Following is an example of a very simple service. This service depends on the `$window` service
 (which is passed as a parameter to the factory function) and is just a function. The service simply
 stores all notifications; after the third one, the service displays all of the notifications by
 window alert.

 <pre>
-    angular.service('notify', function(win) {
-      var msgs = [];
-      return function(msg) {
-        msgs.push(msg);
-        if (msgs.length == 3) {
-          win.alert(msgs.join("\n"));
-          msgs = [];
-        }
-      };
-    }, {$inject: ['$window']});
+angular.module('myModule', [], function($provide) {
+  $provide.factory('notify', ['$window', function(win) {
+    var msgs = [];
+    return function(msg) {
+      msgs.push(msg);
+      if (msgs.length == 3) {
+        win.alert(msgs.join("\n"));
+        msgs = [];
+      }
+    };
+  }]);
+});
 </pre>


+# Instantiating Angular Services
+
+All services in Angular are instantiates services lazily, this means that a service will be created
+only when it is needed for instantiation of a service or an application component that depends on it.
+In other words, angular won't instantiate lazy services unless they are requested directly or
+indirectly by the application.
+
+
+# Services as singletons
+
+Lastly, it is important to realize that all angular services are application singletons. This means
+that there is only one instance of a given service per injector. Since angular is lethally allergic
+to the global state, it is possible to create multiple injectors, each with its own instance of a
+given service, but that is rarely needed, except in tests where this property is crucially
+important.
+
+
+
 ## Related Topics

 * {@link dev_guide.services.understanding_services Understanding Angular Services}
-* {@link dev_guide.services.registering_services Registering Angular Services}
 * {@link dev_guide.services.managing_dependencies Managing Service Dependencies}
 * {@link dev_guide.services.injecting_controllers Injecting Services Into Controllers }
 * {@link dev_guide.services.testing_services Testing Angular Services}

 ## Related API

-* {@link api/angular.service Angular Service API}
+* {@link api/angular.module.ng Angular Service API}
@@ -6,12 +6,12 @@ Using services as dependencies for controllers is very similar to using services
 for another service.

 Since JavaScript is a dynamic language, DI can't figure out which services to inject by static
-types (like in static typed languages). Therefore, you must specify the service name by using the
+types (like in static typed languages). Therefore, you can specify the service name by using the
 `$inject` property, which is an array containing strings with names of services to be injected.
 The name must match the corresponding service ID registered with angular. The order of the service
 IDs matters: the order of the services in the array will be used when calling the factory function
 with injected parameters. The names of parameters in factory function don't matter, but by
-convention they match the service IDs.
+convention they match the service IDs, which has added benefits discussed below.

 <pre>
 function myController($loc, $log) {
@@ -28,51 +28,91 @@ this.secondMethod = function() {
 myController.$inject = ['$location', '$log'];
 </pre>

-<doc:example>
+<doc:example module="MyServiceModule">
 <doc:source>
-<script type="text/javascript">
-angular.service('notify', function(win) {
-  var msgs = [];
-  return function(msg) {
-    msgs.push(msg);
-    if (msgs.length == 3) {
-      win.alert(msgs.join("\n"));
-      msgs = [];
-    }
-  };
-}, {$inject: ['$window']});
+<script>
+angular.
+ module('MyServiceModule', []).
+ factory('notify', ['$window', function(win) {
+    var msgs = [];
+    return function(msg) {
+      msgs.push(msg);
+      if (msgs.length == 3) {
+        win.alert(msgs.join("\n"));
+        msgs = [];
+      }
+    };
+  }]);

-function myController(notifyService) {
-  this.callNotify = function(msg) {
+function myController(scope, notifyService) {
+  scope.callNotify = function(msg) {
    notifyService(msg);
  };
 }

-myController.$inject = ['notify'];
+myController.$inject = ['$scope','notify'];
 </script>

-<div ng:controller="myController">
-<p>Let's try this simple notify service, injected into the controller...</p>
-<input ng:init="message='test'" type="text" ng:model="message" />
-<button ng:click="callNotify(message);">NOTIFY</button>
+<div ng-controller="myController">
+  <p>Let's try this simple notify service, injected into the controller...</p>
+  <input ng-init="message='test'" ng-model="message" >
+  <button ng-click="callNotify(message);">NOTIFY</button>
 </div>
 </doc:source>
 <doc:scenario>
-it('should test service', function() {
-  expect(element(':input[ng\\:model="message"]').val()).toEqual('test');
-});
+  it('should test service', function() {
+    expect(element(':input[ng\\:model="message"]').val()).toEqual('test');
+  });
 </doc:scenario>
 </doc:example>

+## Implicit Dependency Injection
+
+A new feature of Angular DI allows it to determine the dependency from the name of the parameter.
+Let's rewrite the above example to show the use of this implicit dependency injection of
+`$window`, `$scope`, and our `notify` service:
+
+<doc:example module="MyServiceModuleDI">
+<doc:source>
+<script>
+angular.
+ module('MyServiceModuleDI', []).
+ factory('notify', function($window) {
+    var msgs = [];
+    return function(msg) {
+      msgs.push(msg);
+      if (msgs.length == 3) {
+        $window.alert(msgs.join("\n"));
+        msgs = [];
+      }
+    };
+  });
+
+function myController($scope, notify) {
+  $scope.callNotify = function(msg) {
+    notify(msg);
+  };
+}
+</script>
+<div ng-controller="myController">
+  <p>Let's try the notify service, that is implicitly injected into the controller...</p>
+  <input ng-init="message='test'" ng-model="message">
+  <button ng-click="callNotify(message);">NOTIFY</button>
+</div>
+</doc:source>
+</doc:example>
+
+However, if you plan to {@link http://en.wikipedia.org/wiki/Minification_(programming) minify} your
+code, your variable names will get renamed in which case you will still need to explicitly specify
+dependencies with the `$inject` property.

 ## Related Topics

 {@link dev_guide.services.understanding_services Understanding Angular Services}
 {@link dev_guide.services.creating_services Creating Angular Services}
-{@link dev_guide.services.registering_services Registering Angular Services}
 {@link dev_guide.services.managing_dependencies Managing Service Dependencies}
 {@link dev_guide.services.testing_services Testing Angular Services}

 ## Related API

-{@link api/angular.service Angular Service API}
+{@link api/angular.module.ng Angular Service API}
@@ -5,80 +5,110 @@
 Angular allows services to declare other services as dependencies needed for construction of their
 instances.

-To declare dependencies, you specify them in the factory function signature and via the `$inject`
-property, as an array of string identifiers. Optionally the `$inject` property declaration can be
+To declare dependencies, you specify them in the factory function signature and annotate the
+function with the inject annotations either using by setting the `$inject` property, as an array of
+string identifiers or using the array notation. Optionally the `$inject` property declaration can be
 dropped (see "Inferring `$inject`" but note that that is currently an experimental feature).

+Using the array notation:
+
+<pre>
+function myModuleCfgFn($provide) {
+  $provide.factory('myService', ['dep1', 'dep2', function(dep1, dep2) {}]);
+}
+</pre>
+
+
+Using the $inject property:
+
+<pre>
+function myModuleCfgFn($provide) {
+  var myServiceFactory = function(dep1, dep2) {};
+  myServiceFactory.$inject = ['dep1', 'dep2'];
+  $provide.factory('myService', myServiceFactory);
+}
+</pre>
+
+
+Using DI inference (incompatible with minifiers):
+
+<pre>
+function myModuleCfgFn($provide) {
+  $provide.factory('myService', function(dep1, dep2) {});
+}
+</pre>
+
+
 Here is an example of two services that depend on each other, as well as on other services that are
-provided by angular's web framework:
+provided by Angular's web framework:

 <pre>
 /**
-* batchLog service allows for messages to be queued in memory and flushed
-* to the console.log every 50 seconds.
-*
-* @param {*} message Message to be logged.
-*/
-angular.service('batchLog', function($defer, $log) {
-  var messageQueue = [];
+ * batchLog service allows for messages to be queued in memory and flushed
+ * to the console.log every 50 seconds.
+ *
+ * @param {*} message Message to be logged.
+ */
+  function batchLogModule($provide){
+    $provide.factory('batchLog', ['$defer', '$log', function($defer, $log) {
+      var messageQueue = [];

-  function log() {
-    if (messageQueue.length) {
-      $log('batchLog messages: ', messageQueue);
-      messageQueue = [];
-    }
-    $defer(log, 50000);
+      function log() {
+        if (messageQueue.length) {
+          $log('batchLog messages: ', messageQueue);
+          messageQueue = [];
+        }
+        $defer(log, 50000);
+      }
+
+      // start periodic checking
+      log();
+
+      return function(message) {
+        messageQueue.push(message);
+      }
+    }]);
+
+    /**
+     * routeTemplateMonitor monitors each $route change and logs the current
+     * template via the batchLog service.
+     */
+    $provide.factory('routeTemplateMonitor',
+                ['$route', 'batchLog', '$rootScope',
+         function($route,   batchLog,   $rootScope) {
+      $rootScope.$on('$afterRouteChange', function() {
+        batchLog($route.current ? $route.current.template : null);
+      });
+    }]);
  }

-  // start periodic checking
-  log();
-
-  return function(message) {
-    messageQueue.push(message);
-  }
-}, {$inject: ['$defer', '$log']});
-// note how we declared dependency on built-in $defer and $log services above
-
-/**
-* routeTemplateMonitor monitors each $route change and logs the current
-* template via the batchLog service.
-*/
-angular.service('routeTemplateMonitor', function($route, batchLog) {
-  this.$on('$afterRouteChange', function() {
-    batchLog($route.current ? $route.current.template : null);
-  });
-}, {$inject: ['$route', 'batchLog'], $eager: true});
+  // get the main service to kick of the application
+  angular.injector([batchLogModule]).get('routeTemplateMonitor');
 </pre>

 Things to notice in this example:

-* The `batchLog` service depends on the built-in {@link api/angular.service.$defer $defer} and
-{@link api/angular.service.$log $log} services, and allows messages to be logged into the
+* The `batchLog` service depends on the built-in {@link api/angular.module.ng.$defer $defer} and
+{@link api/angular.module.ng.$log $log} services, and allows messages to be logged into the
 `console.log` in batches.
-* The `routeTemplateMonitor` service depends on the built-in {@link api/angular.service.$route
+* The `routeTemplateMonitor` service depends on the built-in {@link api/angular.module.ng.$route
 $route} service as well as our custom `batchLog` service.
-* The `routeTemplateMonitor` service is declared to be eager, so that it is started as soon as the
-application starts.
-* To underline the need for the eager instantiation of the `routeTemplateMonitor` service, nothing
-else in the application depends on this service, and in this particular case the factory function
-of this service doesn't return anything at all.
-* Both of our services use the factory function signature as well as the `$inject` property to
-declare their dependencies. It is important that the order of the string identifiers in the array
-associated with the `$inject` property is the same as the order of argument names in the signature
-of the factory function. Unless the dependencies are inferred from the function signature, it is
-this array with IDs and their order that the injector uses to determine which services and in which
-order to inject.
+* Both of our services use the factory function signature and array notation for inject annotations
+to declare their dependencies. It is important that the order of the string identifiers in the array
+is the same as the order of argument names in the signature of the factory function. Unless the
+dependencies are inferred from the function signature, it is this array with IDs and their order
+that the injector uses to determine which services and in which order to inject.


 ## Related Topics

 * {@link dev_guide.services.understanding_services Understanding Angular Services}
 * {@link dev_guide.services.creating_services Creating Angular Services}
-* {@link dev_guide.services.registering_services Registering Services}
 * {@link dev_guide.services.injecting_controllers Injecting Services Into Controllers }
 * {@link dev_guide.services.testing_services Testing Angular Services}

+
 ## Related API

-* {@link api/angular.service Angular Service API}
+* {@link api/angular.module.ng Angular Service API}
 * {@link api/angular.injector Angular Injector API}
@@ -12,11 +12,10 @@ most often used with {@link dev_guide.di dependency injection}, also a key featu

 * {@link dev_guide.services.understanding_services Understanding Angular Services}
 * {@link dev_guide.services.creating_services Creating Angular Services}
-* {@link dev_guide.services.registering_services Registering Angular Services}
 * {@link dev_guide.services.managing_dependencies Managing Service Dependencies}
-* {@link dev_guide.services.injecting_controllers Injecting Services Into Conrollers}
+* {@link dev_guide.services.injecting_controllers Injecting Services Into Controllers}
 * {@link dev_guide.services.testing_services Testing Angular Services}

 ## Related API

-* {@link api/angular.service Angular Service API}
+* {@link api/angular.module.ng Angular Service API}
@@ -1,69 +0,0 @@
-@ngdoc overview
-@name Developer Guide: Angular Services: Registering Angular Services
-@description
-
-To register a service, register a factory function that creates the service with angular's
-Injector. The Injector is exposed as {@link api/angular.scope.$service scope.$service}. The
-following pseudo-code shows a simple service registration:
-
-<pre>
-angular.service('service id', function() {
-  var shinyNewServiceInstance;
-  //factory function body that constructs shinyNewServiceInstance
-  return shinyNewServiceInstance;
-});
-</pre>
-
-Note that you are not registering a service instance, but rather a factory function that will
-create this instance when called.
-
-# Instantiating Angular Services
-
-A service can be instantiated eagerly or lazily. By default angular instantiates services lazily,
-which means that a service will be created only when it is needed for instantiation of a service or
-an application component that depends on it. In other words, angular won't instantiate lazy
-services unless they are requested directly or indirectly by the application.
-
-Eager services on the other hand, are instantiated right after the injector itself is created,
-which happens when the angular {@link dev_guide.bootstrap application initializes}.
-
-To override the default, you can request that a service is eagerly instantiated as follows:
-
-<pre>
-angular.service('service id', function() {
-  var shinyNewServiceInstance;
-  //factory function body that constructs shinyNewServiceInstance
-  return shinyNewServiceInstance;
-}, {$eager: true});
-</pre>
-
-While it is tempting to declare services as eager, only in few cases it is actually useful. If you
-are unsure whether to make a service eager, it likely doesn't need to be. To be more specific, a
-service should be declared as eager only if it fits one of these scenarios:
-
-* Nothing in your application declares this service as its dependency, and this service affects the
-state or configuration of the application (e.g. a service that configures `$route` or `$resource`
-services)
-* A guarantee is needed that the service will be instantiated at application boot time, usually
-because the service passively observes the application and it is optional for other application
-components to depend on it.  An example of this scenario is a service that monitors and logs
-application memory usage.
-
-Lastly, it is important to realize that all angular services are applicaiton singletons. This means
-that there is only one instance of a given service per injector. Since angular is lethally allergic
-to the global state, it is possible to create multiple injectors, each with its own instance of a
-given service, but that is rarely needed, except in tests where this property is crucially
-important.
-
-
-## Related Topics
-
-* {@link dev_guide.services.understanding_services Understanding Angular Services}
-* {@link dev_guide.services.creating_services Creating Angular Services}
-* {@link dev_guide.services.managing_dependencies Managing Service Dependencies}
-* {@link dev_guide.services.injecting_controllers Injecting Services Into Controllers }
-* {@link dev_guide.services.testing_services Testing Angular Services}
-
-## Related API
-
-* {@link api/angular.service Angular Service API}
@@ -11,7 +11,14 @@ var mock, notify;

 beforeEach(function() {
  mock = {alert: jasmine.createSpy()};
-  notify = angular.service('notify')(mock);
+
+  module(function($provide) {
+    $provide.value('$window', mock);
+  });
+
+  inject(function($injector) {
+    notify = $injector.get('notify');
+  });
 });

 it('should not alert first two notifications', function() {
@@ -47,12 +54,9 @@ it('should clear messages after alert', function() {

 * {@link dev_guide.services.understanding_services Understanding Angular Services}
 * {@link dev_guide.services.creating_services Creating Angular Services}
-* {@link dev_guide.services.registering_services Registering Angular Services}
 * {@link dev_guide.services.managing_dependencies Managing Service Dependencies}
 * {@link dev_guide.services.injecting_controllers Injecting Services Into Conrollers}

 ## Related API

-* {@link api/angular.service Angular Service API}
-
-
+* {@link api/angular.module.ng Angular Service API}
@@ -3,7 +3,7 @@
@description

 Angular services are singletons that carry out specific tasks common to web apps, such as the
-{@link api/angular.service.$xhr $xhr service} that provides low level access to the browser's
+{@link api/angular.module.ng.$http $http service} that provides low level access to the browser's
 `XMLHttpRequest` object.

 To use an angular service, you identify it as a dependency for the dependent (a controller, or
@@ -12,14 +12,14 @@ of the rest. The angular injector subsystem is in charge of service instantiatio
 dependencies, and provision of dependencies to factory functions as requested.

 Angular injects dependencies using "constructor" injection (the service is passed in via a factory
-function). Because JavaScript is a dynamically typed language, angular's dependency injection
+function). Because JavaScript is a dynamically typed language, Angular's dependency injection
 subsystem cannot use static types to identify service dependencies. For this reason a dependent
 must explicitly define its dependencies by using the `$inject` property.  For example:

        myController.$inject = ['$location'];

 The angular web framework provides a set of services for common operations. Like other core angular
-variables and identifiers, the built-in services always start with `$` (such as `$xhr` mentioned
+variables and identifiers, the built-in services always start with `$` (such as `$http` mentioned
 above). You can also create your own custom services.


@@ -27,11 +27,10 @@ above). You can also create your own custom services.

 * {@link dev_guide.di About Angular Dependency Injection}
 * {@link dev_guide.services.creating_services Creating Angular Services}
-* {@link dev_guide.services.registering_services Registering Angular Services}
 * {@link dev_guide.services.managing_dependencies Managing Service Dependencies}
 * {@link dev_guide.services.testing_services Testing Angular Services}

 ## Related API

-* {@link api/angular.service Angular Service API}
+* {@link api/angular.module.ng Angular Service API}
 * {@link api/angular.injector Injector API}
@@ -9,24 +9,13 @@ Angular sets these CSS classes. It is up to your application to provide useful s

 * `ng-invalid`, `ng-valid`
  - **Usage:** angular applies this class to an input widget element if that element's input does
-    notpass validation. (see {@link api/angular.widget.input input} widget).
+    notpass validation. (see {@link api/angular.module.ng.$compileProvider.directive.input input} directive).

 * `ng-pristine`, `ng-dirty`
-  - **Usage:** angular {@link api/angular.widget.input input} widget applies `ng-pristine` class
+  - **Usage:** angular {@link api/angular.module.ng.$compileProvider.directive.input input} directive applies `ng-pristine` class
    to a new input widget element which did not have user interaction. Once the user interacts with
    the input widget the class is changed to `ng-dirty`.

-# Marking CSS classes
-
-* `ng-widget`, `ng-directive`
-  -  **Usage:** angular sets these class on elements where {@link api/angular.widget widget} or
-     {@link api/angular.directive directive} has bound to.
-
-
-* Old browser support
-  - Pre v9, IE browsers could not select `ng:include` elements in CSS, because of the `:`
-    character. For this reason angular also sets `ng-include` class on any element which has `:`
-    character in the name by replacing `:` with `-`.

 ## Related Topics

@@ -2,7 +2,7 @@
@name Developer Guide: Templates: Filters: Creating Angular Filters
@description

-Writing your own filter is very easy: just define a JavaScript function on the `angular.filter`
+Writing your own filter is very easy: just define a JavaScript function on the `angular.module.ng.$filter`
 object.
 The framework passes in the input value as the first argument to your function. Any filter
 arguments are passed in as additional function arguments.
@@ -16,36 +16,34 @@ filter to manipulate the DOM.
 The following sample filter reverses a text string. In addition, it conditionally makes the
 text upper-case and assigns color.

-<doc:example>
+<doc:example module="MyReverseModule">
 <doc:source>
-<script type="text/javascript">
- angular.filter('reverse', function(input, uppercase, color) {
-   var out = "";
-   for (var i = 0; i < input.length; i++) {
-     out = input.charAt(i) + out;
-   }
-   // conditional based on optional argument
-   if (uppercase) {
-     out = out.toUpperCase();
-   }
-   // DOM manipulation using $element
-   if (color) {
-     this.$element.css('color', color);
-   }
-   return out;
- });
+<script>
+  angular.module('MyReverseModule', []).
+    filter('reverse', function() {
+      return function(input, uppercase) {
+        var out = "";
+        for (var i = 0; i < input.length; i++) {
+          out = input.charAt(i) + out;
+        }
+        // conditional based on optional argument
+        if (uppercase) {
+          out = out.toUpperCase();
+        }
+        return out;
+      }
+    });

- function Ctrl() {
-   this.greeting = 'hello';
- }
+  function Ctrl($scope) {
+    $scope.greeting = 'hello';
+  }
 </script>

-<div ng:controller="Ctrl">
-  <input ng:model="greeting" type="greeting"><br>
+<div ng-controller="Ctrl">
+  <input ng-model="greeting" type="greeting"><br>
  No filter: {{greeting}}<br>
  Reverse: {{greeting|reverse}}<br>
  Reverse + uppercase: {{greeting|reverse:true}}<br>
-  Reverse + uppercase + blue:  {{greeting|reverse:true:"blue"}}
 </div>
 </doc:source>
 <doc:scenario>
@@ -65,4 +63,4 @@ text upper-case and assigns color.

 ## Related API

-* {@link api/angular.filter Angular Filter API}
+* {@link api/angular.module.ng.$filter Angular Filter API}
@@ -11,7 +11,8 @@ displaying it to the user. You can pass expressions through a chain of filters l

        name | uppercase

-The expression evaluator simply passes the value of name to `angular.filter.uppercase()`.
+The expression evaluator simply passes the value of name to
+{@link api/angular.module.ng.$filter.uppercase uppercase filter}.

 In addition to formatting data, filters can also modify the DOM. This allows filters to handle
 tasks such as conditionally applying CSS styles to filtered output.
@@ -24,4 +25,4 @@ tasks such as conditionally applying CSS styles to filtered output.

 ## Related API

-* {@link api/angular.filter Angular Filter API}
+* {@link api/angular.module.ng.$filter Angular Filter API}
@@ -2,7 +2,7 @@
@name Developer Guide: Templates: Filters: Using Angular Filters
@description

-Filters can be part of any {@link api/angular.scope} evaluation but are typically used to format
+Filters can be part of any {@link api/angular.module.ng.$rootScope.Scope} evaluation but are typically used to format
 expressions in bindings in your templates:

        {{ expression | filter }}
@@ -37,4 +37,4 @@ argument that specifies how many digits to display to the right of the decimal p

 ## Related API

-* {@link api/angular.filter Angular Filter API}
+* {@link api/angular.module.ng.$filter Angular Filter API}
@@ -10,32 +10,30 @@ the dynamic view DOM.

 These are the types of angular elements and element attributes you can use in a template:

-* {@link dev_guide.compiler.directives Directive} — An attribute that augments an existing DOM
-element.
-* {@link dev_guide.compiler.widgets Widget} — A custom DOM element. An example of a built-in widget
-is {@link api/angular.widget.@ng:repeat ng:repeat}.
-* {@link dev_guide.compiler.markup  Markup} — Shorthand for a widget or a directive. The double
+* {@link guide/directive Directive} — An attribute or element that
+  augments an existing DOM element or represents a reusable DOM component - a widget.
+* {@link api/angular.module.ng.$interpolate  Markup} — The double
 curly brace notation `{{ }}` to bind expressions to elements is built-in angular markup.
 * {@link dev_guide.templates.filters Filter} — Formats your data for display to the user.
-* {@link dev_guide.forms Form widgets} — Lets you validate user input.
+* {@link dev_guide.forms Form controls} — Lets you validate user input.

 Note:  In addition to declaring the elements above in templates, you can also access these elements
 in JavaScript code.

 The following code snippet shows a simple angular template made up of standard HTML tags along with
-angular {@link dev_guide.compiler.directives directives}, {@link dev_guide.compiler.markup markup},
-and {@link dev_guide.expressions expressions}:
+angular {@link guide/directive directives} and curly-brace bindings
+with {@link dev_guide.expressions expressions}:

 <pre>
-<html>
- <!-- Body tag augmented with ng:controller directive  -->
- <body ng:controller="MyController">
-   <input ng:model="foo" value="bar">
-   <!-- Button tag with ng:click directive, and
+<html ng-app>
+ <!-- Body tag augmented with ngController directive  -->
+ <body ng-controller="MyController">
+   <input ng-model="foo" value="bar">
+   <!-- Button tag with ng-click directive, and
          string expression 'buttonText'
          wrapped in "{{ }}" markup -->
-   <button ng:click="changeFoo()">{{buttonText}}</button>
-   <script src="angular.js" ng:autobind>
+   <button ng-click="changeFoo()">{{buttonText}}</button>
+   <script src="angular.js">
 </body>
 </html>
 </pre>
@@ -43,8 +41,8 @@ and {@link dev_guide.expressions expressions}:
 In a simple single-page app, the template consists of HTML, CSS, and angular directives contained
 in just one HTML file (usually `index.html`). In a more complex app, you can display multiple views
 within one main page using "partials", which are segments of template located in separate HTML
-files.  You "include" the partials in the main page using the {@link api/angular.service.$route
-$route} service in conjunction with the {@link api/angular.widget.ng:view ng:view} directive. An
+files.  You "include" the partials in the main page using the {@link api/angular.module.ng.$route
+$route} service in conjunction with the {@link api/angular.module.ng.$compileProvider.directive.ngView ngView} directive. An
 example of this technique is shown in the {@link tutorial/ angular tutorial}, in steps seven and
 eight.

@@ -92,8 +92,8 @@ State & Singletons}

 The class above is hard to test since we have to change global state:
 <pre>
-var oldXHR = glabal.xhr;
-glabal.xhr = function mockXHR() {};
+var oldXHR = global.xhr;
+global.xhr = function mockXHR() {};
 var myClass = new MyClass();
 myClass.doWork();
 // assert that mockXHR got called with the right arguments
@@ -126,12 +126,12 @@ there is only one global variable to be reset).

 The class above is hard to test since we have to change global state:
 <pre>
-var oldServiceLocator = glabal.serviceLocator;
-glabal.serviceLocator.set('xhr', function mockXHR() {});
+var oldServiceLocator = global.serviceLocator;
+global.serviceLocator.set('xhr', function mockXHR() {});
 var myClass = new MyClass();
 myClass.doWork();
 // assert that mockXHR got called with the right arguments
-glabal.serviceLocator = oldServiceLocator; // if you forget this bad things will happen
+global.serviceLocator = oldServiceLocator; // if you forget this bad things will happen
 </pre>


@@ -247,16 +247,18 @@ that such a test tells a story, rather then asserting random bits which don't se


 ## Filters
-{@link api/angular.filter Filters} are functions which transform the data into user readable
+{@link api/angular.module.ng.$filter Filters} are functions which transform the data into user readable
 format. They are important because they remove the formatting responsibility from the application
 logic, further simplifying the application logic.

 <pre>
-angular.filter('length', function(text){
-  return (''+(text||'')).length;
+myModule.filter('length', function() {
+  return function(text){
+    return (''+(text||'')).length;
+  }
 });

-var length = angular.filter('length');
+var length = $filter('length');
 expect(length(null)).toEqual(0);
 expect(length('abc')).toEqual(3);
 </pre>
@@ -0,0 +1,719 @@
+@ngdoc overview
+@name directive
+@description
+
+Directives are a way to teach HTML new tricks. During DOM compilation directives are matched
+against the HTML and executed. This allows directives to register behavior, or transform the DOM.
+
+Angular comes with a built in set of directives which are useful for building web applications but
+can be extended such that HTML can be turned into a declarative domain specific language (DSL).
+
+# Invoking directives from HTML
+
+Directives have camel cased names such as 'ngBind'. The directive can be invoked by translating
+the camel case name into snake case with these special characters `:`, `-`, or `_`. Optionally the
+directive can be prefixed with `x-`, or `data-` to make it HTML validator compliant. Here is a
+list of some of the possible directive names: `ng:bind`, `ng-bind`, `ng_bind`, `x-ng-bind` and
+`data-ng-bind`.
+
+The directives can be placed in element names, attributes, class names, as well as comments. Here
+are some equivalent examples of invoking `myDir`. (However, most directives are restricted to
+attribute only.)
+
+<pre>
+  <span my-dir="exp"></span>
+  <span class="my-dir: exp;"></span>
+  <my-dir></my-dir>
+  <!-- directive: my-dir exp -->
+</pre>
+
+Directives can be invoked in many different ways, but are equivalent in the end result as shown in
+the following example.
+
+<doc:example>
+  <doc:source >
+   <script>
+     function Ctrl1($scope) {
+       $scope.name = 'angular';
+     }
+   </script>
+   <div ng-controller="Ctrl1">
+     Hello <input ng-model='name'> <hr/>
+     &ltspan ng:bind="name"&gt <span ng:bind="name"></span> <br/>
+     &ltspan ng_bind="name"&gt <span ng_bind="name"></span> <br/>
+     &ltspan ng-bind="name"&gt <span ng-bind="name"></span> <br/>
+     &ltspan data-ng-bind="name"&gt <span data-ng-bind="name"></span> <br/>
+     &ltspan x-ng-bind="name"&gt <span x-ng-bind="name"></span> <br/>
+   </div>
+  </doc:source>
+  <doc:scenario>
+    it('should show off bindings', function() {
+      expect(element('div[ng-controller="Ctrl1"] span[ng-bind]').text()).toBe('angular');
+    });
+  </doc:scenario>
+</doc:example>
+
+# String interpolation
+
+During the compilation process the {@link api/angular.module.ng.$compile compiler} matches text and
+attributes using the {@link api/angular.module.ng.$interpolate $interpolate} service to see if they
+contain embedded expressions. These expressions are registered as {@link
+api/angular.module.ng.$rootScope.Scope#$watch watches} and will update as part of normal {@link
+api/angular.module.ng.$rootScope.Scope#$digest digest} cycle. An example of interpolation is shown
+here:
+
+<pre>
+<img src="img/{{username}}.jpg">Hello {{username}}!</img>
+</pre>
+
+# Compilation process, and directive matching
+
+Compilation of HTML happens in three phases:
+
+  1. First the HTML is parsed into DOM using the standard browser API. This is important to
+  realize because the templates must be parsable HTML. This is in contrast to most templating
+  systems that operate on strings, rather then on DOM elements.
+
+  2. The compilation of the DOM is performed by the call to {@link api/angular.module.ng.$compile
+  $compile()} method. The method traverses the DOM and matches the directives. If a match is found
+  it is added to the list of directives associated with the given DOM element. Once all directives
+  for a given DOM element have been identified they are sorted by priority and their `compile()`
+  functions are executed. The directive compile function has a chance to modify the DOM structure
+  and is responsible for producing a `link()` function explained next. The {@link
+  api/angular.module.ng.$compile $compile()} method returns a combined linking function, which is a
+  collection of all of the linking functions returned from the individual directive compile
+  functions.
+
+  3. Link the template with scope by calling the linking function returned from the previous step.
+  This in turn will call the linking function of the individual directives allowing them to
+  register any listeners on the elements and set up any {@link
+  api/angular.module.ng.$rootScope.Scope#$watch watches} with the {@link
+  api/angular.module.ng.$rootScope.Scope scope}. The result of this is a live binding between the
+  scope and the DOM. A change in the scope is reflected in the DOM.
+
+<pre>
+  var $compile = ...; // injected into your code
+  var scope = ...;
+
+  var html = '<div ng-bind='exp'></div>';
+
+  // Step 1: parse HTML into DOM element
+  var template = angular.element(html);
+
+  // Step 2: compile the template
+  var linkFn = $compile(template);
+
+  // Step 3: link the compiled template with the scope.
+  linkFn(scope);
+</pre>
+
+## Reasons behind the compile/link separation
+
+At this point you may wonder why is the compile process broken down to a compile and link phase.
+To understand this, lets look at a real world example with repeater:
+
+<pre>
+  Hello {{user}}, you have these actions:
+  <ul>
+    <li ng-repeat="action in user.actions">
+      {{action.description}}
+    </li>
+  </ul>
+</pre>
+
+The short answer is that compile and link separation is needed any time a change in model causes
+a change in DOM structure such as in repeaters.
+
+When the above example is compiled, the compiler visits every node and looks for directives. The
+`{{user}}` is an example of {@link api/angular.module.ng.$interpolate interpolation} directive. {@link
+api/angular.module.ng.$compileProvider.directive.ngRepeat ngRepeat} is another directive. But {@link
+api/angular.module.ng.$compileProvider.directive.ngRepeat ngRepeat} has a dilemma. It needs to be
+able to quickly stamp out new `li`s for every `action` in `user.actions`. This means that it needs
+to save a clean copy of the `li` element for cloning purposes and as new `action`s are inserted,
+the template `li` element needs to be cloned and inserted into `ul`. But cloning the `li` element
+is not enough. It also needs to compile the `li` so that its directives such as
+`{{action.descriptions}}` evaluate against the right {@link api/angular.module.ng.$rootScope.Scope
+scope}. A naive method would be to simply insert a copy of the `li` elemnt and then compile it.
+But compiling on every `li` element clone would be slow, since the compilation requires that we
+traverse the DOM tree and look for directives and execute them. If we put the compilation inside a
+repeater which needs to unroll 100 items we would quickly run into performance problem.
+
+The solution is to break the compilation process into two phases the compile phase where all of
+the directives are identified and sorted by priority, and a linking phase where any work which
+links a specific instance of the {@link api/angular.module.ng.$rootScope.Scope scope} and the specific
+instance of an `li` is performed.
+
+{@link api/angular.module.ng.$compileProvider.directive.ngRepeat ngRepeat} works by preventing the
+compilation process form descending into `li` element. Instead the {@link
+api/angular.module.ng.$compileProvider.directive.ngRepeat ngRepeat} directive compiles `li`
+seperatly. The result of of the `li` element compilation is a linking function which contains all
+of the directives contained in the `li` element ready to be attached to a specific clone of `li`
+element. At runtime the {@link api/angular.module.ng.$compileProvider.directive.ngRepeat ngRepeat}
+watches the expression and as items are added to the array it clones the `li` element, creates a
+new {@link api/angular.module.ng.$rootScope.Scope scope} for the cloned `li` element and calls the
+link function on the cloned `li`.
+
+Summary:
+
+  * *compile function* - The compile function is relatively rare in directives, since most
+    directives are concerned with working with a specific DOM element instance rather then
+    transforming the template DOM element. Any operation which can be shared among the instance of
+    directives should be moved to the compile function for performance reasons.
+
+  * *link function* - It is rare for the directive not to have a link function. Link function
+    allows the directive to register listeners to the specific cloned DOM element instance as well
+    as to copy content into the DOM from the scope.
+
+
+# Writing directives (short version)
+
+In this example we will build a directive which displays the current time.
+
+<doc:example module="time">
+  <doc:source>
+   <script>
+     function Ctrl2($scope) {
+       $scope.format = 'M/d/yy h:mm:ss a';
+     }
+
+     angular.module('time', [])
+       // Register the 'myCurrentTime' directive factory method.
+       // We inject $defer and dateFilter service since the factory method is DI.
+       .directive('myCurrentTime', function($defer, dateFilter) {
+         // return the directive link function. (compile function not needed)
+         return function(scope, element, attrs) {
+           var format,  // date format
+               deferId; // deferId, so that we can cancel the time updates
+
+           // used to update the UI
+           function updateTime() {
+             element.text(dateFilter(new Date(), format));
+           }
+
+           // watch the expression, and update the UI on change.
+           scope.$watch(attrs.myCurrentTime, function(value) {
+             format = value;
+             updateTime();
+           });
+
+           // schedule update in one second
+           function updateLater() {
+             // save the deferId for canceling
+             deferId = $defer(function() {
+               updateTime(); // update DOM
+               updateLater(); // schedule another update
+             }, 1000);
+           }
+
+           // listen on DOM destroy (removal) event, and cancel the next UI update
+           // to prevent updating time ofter the DOM element was removed.
+           element.bind('$destroy', function() {
+             $defer.cancel(deferId);
+           });
+
+           updateLater(); // kick of the UI update process.
+         }
+       });
+   </script>
+   <div ng-controller="Ctrl2">
+     Date format: <input ng-model='format'> <hr/>
+     Current time is: <span my-current-time="format"></span
+   </div>
+  </doc:source>
+  <doc:scenario>
+  </doc:scenario>
+</doc:example>
+
+
+# Writing directives (long version)
+
+The full skeleton of the directive is shown here:
+
+<pre>
+  var myModule = angular.module(...);
+
+  myModule.directive('directiveName', function factory(injectables) {
+    var directiveDefinitionObject = {
+      priority: 0,
+      template: '<div></div>',
+      templateUrl: 'directive.html',
+      replace: false,
+      transclude: false,
+      restrict: 'A',
+      scope: false,
+      compile: function compile(tElement, tAttrs, transclude) {
+        return {
+          pre: function preLink(scope, iElement, iAttrs, controller) { ... },
+          post: function postLink(scope, iElement, iAttrs, controller) { ... }
+        }
+      },
+      link: function postLink(scope, iElement, iAttrs) { ... }
+    };
+    return directiveDefinitionObject;
+  });
+</pre>
+
+In most cases you will not need such fine control and so the above can be simplified. All of the
+different parts of this skeleton are explained in following sections. In this section we are
+interested only isomers of this skeleton.
+
+The first step in simplyfing the code is to rely on the deafult values. Therefore the above can be
+simplified as:
+
+<pre>
+  var myModule = angular.module(...);
+
+  myModule.directive('directiveName', function factory(injectables) {
+    var directiveDefinitionObject = {
+      compile: function compile(tElement, tAttrs) {
+        return function postLink(scope, iElement, iAttrs) { ... }
+      }
+    };
+    return directiveDefinitionObject;
+  });
+</pre>
+
+Most directives concern themselves only with instances not with template transformations allowing
+further simplification:
+
+<pre>
+  var myModule = angular.module(...);
+
+  myModule.directive('directiveName', function factory(injectables) {
+    return function postLink(scope, iElement, iAttrs) { ... }
+  });
+</pre>
+
+
+## Factory method
+
+The factory method is responsible for creating the directive. It is invoked only once, when the
+{@link api/angular.module.ng.$compile compiler} matches the directive for the first time. You can
+perform any initialization work here. The method is invoked using the {@link
+http://localhost:8000/build/docs/api/angular.module.AUTO.$injector#invoke $injector.invoke} which
+makes it injectable following all of the rules of injection annotation.
+
+## Directive Definition Object
+
+The directive definition object provides instructions to the {@link api/angular.module.ng.$compile
+compiler}. The attributes are:
+
+  * `name` - Name of the current scope. Optional defaults to the name at registration.
+
+  * `priority` - When there are multiple directives defined on a single DOM element, sometimes it
+    is necessary to specify the order in which the directives are applied. The `priority` is used
+    to sort the directives before their `compile` functions get called. Higher `priority` goes
+    first. The order of directives within the same priority is undefined.
+
+  * `terminal` - If set to true then the current `priority` will be the last set of directives
+    which will execute (any directives at the current priority will still execute
+    as the order of execution on same `priority` is undefined).
+
+  * `scope` - If set to:
+
+    * `true` - then a new scope will be created for this directive. If multiple directives on the
+      same element request new scope, only one new scope is created. The new scope rule does not
+      apply for the root of the template since the root of the template always gets a new scope.
+
+    * `{}` (object hash) - then a new 'isolate' scope is created. The 'isolate' scope differs from
+      normal scope that it does not prototypically inherit from the parent scope. This is useful
+      when creating reusable components, which should not accidentally read or modify data in
+      parent scope. <br/>
+      The 'isolate' scope takes an object hash which defines a set of local scope properties
+      derived from the parent scope. These local properties are useful for aliasing values for
+      templates. Locals definition is a hash of normalized element attribute name to their
+      corresponding binding strategy. Valid binding strategies are:
+
+      * `attribute` - one time read of element attribute value and save it to widget scope. <br/>
+        Given `<widget my-attr='abc'>` and widget definition of `scope: {myAttr:'attribute'}`,
+        then widget scope property `myAttr` will be `"abc"`.
+
+      * `evaluate` - one time evaluation of expression stored in the attribute. <br/> Given
+        `<widget my-attr='name'>` and widget definition of `scope: {myAttr:'evaluate'}`, and
+        parent scope `{name:'angular'}` then widget scope property `myAttr` will be `"angular"`.
+
+      * `bind` - Set up one way binding from the element attribute to the widget scope. <br/>
+        Given `<widget my-attr='{{name}}'>` and widget definition of `scope: {myAttr:'bind'}`,
+        and parent scope `{name:'angular'}` then widget scope property `myAttr` will be
+        `"angular"`, but any changes in the parent scope will be reflected in the widget scope.
+
+      * `accessor` - Set up getter/setter function for the expression in the widget element
+        attribute to the widget scope. <br/> Given `<widget my-attr='name'>` and widget definition
+        of `scope: {myAttr:'prop'}`, and parent scope `{name:'angular'}` then widget scope
+        property `myAttr` will be a function such that `myAttr()` will return `"angular"` and
+        `myAttr('new value')` will update the parent scope `name` property. This is useful for
+        treating the element as a data-model for reading/writing.
+
+      * `expression` - Treat element attribute as an expression to be executed on the parent scope.
+        <br/>
+        Given `<widget my-attr='doSomething()'>` and widget definition of `scope:
+        {myAttr:'expression'}`, and parent scope `{doSomething:function() {}}` then calling the
+        widget scope function `myAttr` will execute the expression against the parent scope.
+
+  * `controller` - Controller constructor function. The controller is instantiated before the
+    pre-linking phase and it is shared with other directives if they request it by name (see
+    `require` attribute). This allows the directives to communicate with each other and augment
+    each other behavior. The controller is injectable with the following locals:
+
+    * `$scope` - Current scope associated with the element
+    * `$element` - Current element
+    * `$attrs` - Current attributes obeject for the element
+    * `$transclude` - A transclude linking function pre-bound to the correct transclusion scope:
+      `function(cloneLinkingFn)`.
+
+  * `require` - Require another controller be passed into current directive linking function. The
+    `require` takes a name of the directive controller to pass in. If no such controller can be
+    found an error is raised. The name can be prefixed with:
+
+    * `?` - Don't raise an error. This makes the require dependency optional.
+    * `^` - Look for the controller on parent elements as well.
+
+
+  * `inject` (object hash) -  Specifies a way to inject bindings into a controller. Injection
+    definition is a hash of normalized element attribute names to their corresponding binding
+    strategy. Valid binding strategies are:
+
+    * `attribute` - inject attribute value. <br/>
+      Given `<widget my-attr='abc'>` and widget definition of `inject: {myAttr:'attribute'}`, then
+      `myAttr` will inject `"abc"`.
+
+    * `evaluate` - inject one time evaluation of expression stored in the attribute. <br/>
+      Given `<widget my-attr='name'>` and widget definition of `inject: {myAttr:'evaluate'}`, and
+      parent scope `{name:'angular'}` then `myAttr` will inject `"angular"`.
+
+    * `accessor` - inject a getter/setter function for the expression in the widget element
+      attribute to the widget scope. <br/>
+      Given `<widget my-attr='name'>` and widget definition of `inject: {myAttr:'prop'}`, and
+      parent scope `{name:'angular'}` then injecting `myAttr` will inject a function such
+      that `myAttr()` will return `"angular"` and `myAttr('new value')` will update the parent
+      scope `name` property. This is usefull for treating the element as a data-model for
+      reading/writing.
+
+    * `expression` - Inject expression function. <br/>
+      Given `<widget my-attr='doSomething()'>` and widget definition of
+      `inject: {myAttr:'expression'}`, and parent scope `{doSomething:function() {}}` then
+      injecting `myAttr` will inject a function which when called will execute the expression
+      against the parent scope.
+
+  * `restrict` - String of subset of `EACM` which restricts the directive to a specific directive
+    declaration style. If omitted directives are allowed on attributes only.
+
+    * `E` - Element name: `<my-directive></my-directive>`
+    * `A` - Attribute: `<div my-directive="exp"></div>`
+    * `C` - Class: `<div class="my-directive: exp;"></div>`
+    * `M` - Comment: `<!-- directive: my-directive exp -->`
+
+  * `template` - replace the current element with the contents of the HTML. The replacement process
+    migrates all of the attributes / classes from the old element to the new one. See Creating
+    Widgets section below for more information.
+
+  * `templateUrl` - Same as `template` but the template is loaded from the specified URL. Because
+    the template loading is asynchronous the compilation/linking is suspended until the template
+    is loaded.
+
+  * `replace` - if set to `true` then the template will replace the current element, rather then
+    append the template to the element.
+
+  * `transclude` - compile the content of the element and make it available to the directive.
+    Typically used with {@link api/angular.module.ng.$compileProvider.directive.ngTransclude
+    ngTransclude}. The advantage of transclusion is that the linking function receives a
+    transclusion function which is pre-bound to the correct scope. In a typical setup the widget
+    creates an `isolate` scope, but the transclusion is not a child, but a sibling of the `isolate`
+    scope. This makes it possible for the widget to have private state, and the transclusion to
+    be bound to the parent (pre-`isolate`) scope.
+
+    * `true` - transclude the content of the directive.
+    * `'element'` - transclude the whole element including any directives defined at lower priority.
+
+
+  * `compile`: This is the compile function described in the section below.
+
+  * `link`: This is the link function described in the section below. This property is used only
+    if the `compile` property is not defined.
+
+## Compile function
+
+<pre>
+  function compile(tElement, tAttrs, transclude) { ... }
+</pre>
+
+Compile function deals with transforming the template DOM. Since most directives do not do
+template transformation, it is not used often. Examples which require compile functions are
+directives which transform template DOM such as {@link
+api/angular.module.ng.$compileProvider.directive.ngRepeat ngRepeat} or load the contents
+asynchronously such as {@link api/angular.module.ng.$compileProvider.directive.ngView ngView}. The
+compile functions takes the following arguments.
+
+  * `tElement` - template element - The element where the directive has been declared. It is
+    safe to do template transformation on the element and child elements only.
+
+  * `tAttrs` - template attributes - Normalized list of attributes declared on this element shared
+    between all directive compile functions. See {@link
+    #Attributes Attributes}
+
+  * `transclude` - A transclude linking function: `function(scope, cloneLinkingFn)`.
+
+NOTE: The template instance and the link instance may not be the same objects if the template has
+been cloned. For this reason it is not safe in the compile function to do anything other the DOM
+transformation that applies to all DOM clones. Specifically, DOM listener registration should be
+done in a linking function rather than in a compile function.
+
+A compile function can have a return value which can be either a function or an object.
+
+* returning a function - is equivalent to registering the linking function via the `link` property
+  of the config object when the compile function is empty.
+
+* returning an object with function(s) registered via `pre` and `post` properties - allows you to
+  control when a linking function should be called during the linking phase. See info about
+  pre-linking and post-linking functions below.
+
+
+## Linking function
+
+<pre>
+  function link(scope, iElement, iAttrs, controller) { ... }
+</pre>
+
+Link function is responsible for registering DOM listeners as well as updating the DOM. It is
+executed after the template has been cloned. This is where most of the directive logic will be
+put.
+
+  * `scope` - {@link api/angular.module.ng.$rootScope.Scope Scope} - The scope to be used by the
+    directive for registering {@link api/angular.module.ng.$rootScope.Scope#$watch watches}.
+
+  * `iElement` - instance element - The element where the directive is to be used. It is safe to
+    manipulate the children of the element only in `postLink` function since the children have
+    already been linked.
+
+  * `iAttrs` - instance attributes - Normalized list of attributes declared on this element shared
+    between all directive linking functions. See {@link #Attributes Attributes}
+
+  * `controller` - a controller instance - A controller instance if at least one directive on the
+    element defines a controller. The controller is shared among all the directives, which allows
+    the directives to use the controllers as a communication channel.
+
+
+
+### Pre-linking function
+
+Executed before the child elements are linked. Not safe to do DOM transformation since the
+compiler linking function will fail to locate the correct elements for linking.
+
+### Post-linking function
+
+Executed after the child elements are linked. Safe to do DOM transformation in here.
+
+<a name="Attributes"></a>
+## Attributes
+
+The attributes object - passed as a parameter in the link() or compile() functions - is a way of
+accessing:
+
+  * *normalized attribute names:* Since a directive such as 'ngBind' can be expressed in many ways
+    sucha s as 'ng:bind', or 'x-ng-bind', the attributes object allows for a normalize accessed to
+    the attributes.
+
+  * *directive inter-communication:* All directives share the same instance of the attributes
+    object which allows the directives to use the attributes object as inter directive
+    communication.
+
+  * *supports interpolation:* Interpolation attributes are assigned to the attribute object
+    allowing other directives to read the interpolated value.
+
+  * *observing interpolated attributes:* Use `$observe` to observe the value changes of attributes
+    that contain interpolation (e.g. `src="{{bar}}"`). Not only is this very efficient but it's also
+    the only way to easily get the actual value because during the linking phase the interpolation
+    hasn't been evaluated yet and so the value is at this time set to `undefined`.
+
+<pre>
+function linkingFn(scope, elm, attrs, ctrl) {
+  // get the attribute value
+  console.log(attrs.ngModel);
+
+  // change the attribute
+  attrs.$set('ngModel', 'new value');
+
+  // observe changes to interpolated attribute
+  attrs.$observe('ngModel', function(value) {
+    console.log('ngModel has changed value to ' + value);
+  });
+}
+</pre>
+
+
+# Understanding Transclusion and Scopes
+
+It is often desirable to have reusable components. Below is a pseudo code showing how a simplified
+dialog component may work.
+
+<pre>
+  <div>
+    <button ng-click="show=true">show</button>
+    <dialog title="Hello {{username}}."
+            visible="show"
+            on-cancel="show = false"
+            on-ok="show = false; doSomething()">
+       Body goes here: {{username}} is {{title}}.
+    </dialog>
+</pre>
+
+Clicking on the "show" button will open the dialog. The dialog will have a title, which is
+data bound to `username`, and it will also have a body which we would like to transclude
+into the dialog.
+
+Here is an example of what the template definition for the `dialog` widget may look like.
+
+<pre>
+  <div ng-show="show()">
+    <h3>{{title}}</h3>
+    <div class="body" ng-transclude></div>
+    <div class="footer">
+      <button ng-click="onOk()">Save changes</button>
+      <button ng-click="onCancel()">Close</button>
+    </div>
+  </div>
+</pre>
+
+This will not render properly, unless we do some scope magic.
+
+The first issue we have to solve is that the dialog box template expect `title` to be defined, but
+the place of instantiation would like to bind to `username`. Furthermore the buttons expect `onOk`
+as well as `onCancel` functions to be present in the scope. This limits the usefulness of the
+widget. To solve the mapping issue we use the `locals` to create local variables which the template
+expects as follows:
+
+<pre>
+  scope: {
+    title: 'bind',          // set up title to accept data-binding
+    onOk: 'expression',     // create a delegate onOk function
+    onCancel: 'expression', // create a delegate onCancel function
+    show: 'accessor'        // create a getter/setter function for visibility.
+  }
+</pre>
+
+Creating local properties on widget scope creates two problems:
+
+  1. isolation - if the user forgets to set `title` attribute of the dialog widget the dialog
+     template will bind to parent scope property. This is unpredictable and undesirable.
+
+  2. transclusion - the transcluded DOM can see the widget locals, which may overwrite the
+     properties which the transclusion needs for data-binding. In our example the `title`
+     property of the widget clobbers the `title` property of the transclusion.
+
+
+To solve the issue of lack of isolation, the directive declares a new `isolated` scope. An
+isolated scope does not prototypically inherit from the child scope, and therefore we don't have
+to worry about accidentally clobbering any properties.
+
+However 'isolated' scope creates a new problem: if a transcluded DOM is a child of the widget
+isolated scope then it will not be able to bind to anything. For this reason the transcluded scope
+is a child of the original scope, before the widget created an isolated scope for its local
+variables. This makes the transcluded and widget isolated scope siblings.
+
+This may seem as unexpected complexity, but it gives the widget user and developer the least
+surprise.
+
+Therefore the final directive definition looks something like this:
+
+<pre>
+transclude: true,
+scope: {
+  title: 'bind',          // set up title to accept data-binding
+  onOk: 'expression',     // create a delegate onOk function
+  onCancel: 'expression', // create a delegate onCancel function
+  show: 'accessor'        // create a getter/setter function for visibility.
+}
+</pre>
+
+# Creating Components
+
+It is often desirable to replace a single directive with a more complex DOM structure. This
+allows the directives to become a short hand for reusable components from which applications
+can be built.
+
+Following is an example of building a reusable widget.
+
+
+<doc:example module="zippyModule">
+  <doc:source>
+   <script>
+     function Ctrl3($scope) {
+       $scope.title = 'Lorem Ipsum';
+       $scope.text = 'Neque porro quisquam est qui dolorem ipsum quia dolor...';
+     }
+
+     angular.module('zippyModule', [])
+       .directive('zippy', function(){
+         return {
+           restrict: 'C',
+           // This HTML will replace the zippy directive.
+           replace: true,
+           transclude: true,
+           scope: { zippyTitle:'bind' },
+           template: '<div>' +
+                       '<div class="title">{{zippyTitle}}</div>' +
+                       '<div class="body" ng-transclude></div>' +
+                     '</div>',
+           // The linking function will add behavior to the template
+           link: function(scope, element, attrs) {
+                 // Title element
+             var title = angular.element(element.children()[0]),
+                 // Opened / closed state
+                 opened = true;
+
+             // Clicking on title should open/close the zippy
+             title.bind('click', toggle);
+
+             // Toggle the closed/opened state
+             function toggle() {
+               opened = !opened;
+               element.removeClass(opened ? 'closed' : 'opened');
+               element.addClass(opened ? 'opened' : 'closed');
+             }
+
+             // initialize the zippy
+             toggle();
+           }
+         }
+       });
+   </script>
+   <style>
+     .zippy {
+       border: 1px solid black;
+       display: inline-block;
+       width: 250px;
+     }
+     .zippy.opened > .title:before { content: '▼ '; }
+     .zippy.opened > .body { display: block; }
+     .zippy.closed > .title:before { content: '► '; }
+     .zippy.closed > .body { display: none; }
+     .zippy > .title {
+       background-color: black;
+       color: white;
+       padding: .1em .3em;
+       cursor: pointer;
+     }
+     .zippy > .body {
+       padding: .1em .3em;
+     }
+   </style>
+   <div ng-controller="Ctrl3">
+     Title: <input ng-model="title"> <br>
+     Text: <textarea ng-model="text"></textarea>
+     <hr>
+     <div class="zippy" zippy-title="Details: {{title}}...">{{text}}</div>
+   </div>
+  </doc:source>
+  <doc:scenario>
+    it('should bind and open / close', function() {
+      input('title').enter('TITLE');
+      input('text').enter('TEXT');
+      expect(element('.title').text()).toEqual('Details: TITLE...');
+      expect(binding('text')).toEqual('TEXT');
+
+      expect(element('.zippy').prop('className')).toMatch(/closed/);
+      element('.zippy > .title').click();
+      expect(element('.zippy').prop('className')).toMatch(/opened/);
+    });
+  </doc:scenario>
+</doc:example>
@@ -0,0 +1,162 @@
+@ngdoc overview
+@name Developer Guide: Internet Explorer Compatibility
+@description
+
+# Overview
+
+This document describes the Internet Explorer (IE) idiosyncrasies when dealing with custom HTML
+attributes and tags. Read this document if you are planning on deploying your angular application
+on IE v8.0 or earlier.
+
+# Short Version
+
+To make your angular application work on IE please make sure that:
+
+  1. you **do not** use custom element tags such as `<ng:view>` (use the attribute version `<div
+  ng-view>` instead), or
+
+  2. if you **do use** custom element tags, then you must take these steps to make IE happy:
+
+<pre>
+  <html xmlns:ng="http://angularjs.org">
+    <head>
+      <!--[if lte IE 8]>
+        <script>
+          document.createElement('ng-include');
+          document.createElement('ng-pluralize');
+          document.createElement('ng-view');
+          
+          // Optionally these for CSS
+          document.createElement('ng:include');
+          document.createElement('ng:pluralize');
+          document.createElement('ng:view');
+        </script>
+      <![endif]-->
+    </head>
+    <body>
+      ...
+    </body>
+  </html>
+</pre>
+
+The **important** parts are:
+
+  * `xmlns:ng` - *namespace* - you need one namespace for each custom tay you are planning on
+    using.
+
+  * `document.createElement(yourTagName)` - *creation of custom tag names* - Since this is an
+    issue only for older version of IE you need to load it conditionally. For each tag which does
+    not have namespace and which is not defined in HTML you need to pre-declare it to make IE
+    happy.
+
+
+# Long Version
+
+IE has an issues with element tag names which are not standard HTML tag names. These fall into two
+categories, and each category has its own fix.
+
+  * If the tag name starts with `my:` prefix than it is considered an XML namespace and must
+    have corresponding namespace declaration on `<html xmlns:my="ignored">`
+
+  * If the tag has no `:` but it is not a standard HTML tag, then it must be pre-created using
+    `document.createElement('my-tag')`
+
+  * If you have are planning on styling the custom tag with CSS selectors, then it must be
+    pre-created using `document.createElement('my-tag')` regardless of XML namespace.
+
+
+## The Good News
+
+The good news is that these restrictions only apply to element tag names, and not to element 
+attribute names. So this requires no special handling in IE: `<div my-tag your:tag></div>`.
+
+
+## What happens if I fail to do this?
+
+Suppose you have HTML with unknown tag `mytag` (this could also be `my:tag` or `my-tag` with same
+result):
+
+<pre>
+  <html>
+    <body>
+      <mytag>some text</mytag>
+    </body>
+  </html>
+</pre>
+
+It should pares into the following DOM:
+
+<pre>
+#document
+  +- HTML
+     +- BODY
+        +- mytag
+           +- #text: some text
+</pre>
+
+The expected behavior is that the `BODY` element has a child element `mytag`, which in turn has
+the text `some text`.
+
+But this is not what IE does (if the above fixes are not included):
+
+<pre>
+#document
+  +- HTML
+     +- BODY
+        +- mytag
+        +- #text: some text
+        +- /mytag
+</pre>
+
+In IE, the behavior is that the `BODY` element has three children:
+
+  1. A self closing `mytag`. Example of self closing tag is `<br/>`. The trailing `/` is optional,
+  but the `<br>` tag is not allowed to have any children, and browsers consider `<br>some
+  text</br>` as three siblings not a `<br>` with `some text` as child.
+
+  2. A text node with `some text`. This should have been a child of `mytag` above, not a sibling.
+
+  3. A corrupt self closing `/mytag`. This is corrupt since element names are not allowed to have
+  the `/` character. Furthermore this closing element should not be part of the DOM since it is
+  only used to delimitate the structure of the DOM.
+
+
+## CSS Styling of Custom Tag Names
+
+The to make CSS selector work with custom elements the custom element name must be shived with the
+`document.createElement('my-tag')` regardless of XML namespace.
+
+<pre>
+  <html xmlns:ng="needed for ng: namespace">
+    <head>
+      <!--[if lte IE 8]>
+        <script>
+          // needed to make ng-include parse properly
+          document.createElement('ng-include');
+          
+          // needed to enable CSS reference
+          document.createElement('ng:view');
+        </script>
+      <![endif]-->
+      <style>
+        ng\\:view {
+          display: block;
+          border: 1px solid red;
+        }
+
+        ng-include {
+          display: block;
+          border: 1px solid blue;
+        }
+      </style>
+    </head>
+    <body>
+      <ng:view></ng:view>
+      <ng-include></ng-include>
+      ...
+    </body>
+  </html>
+</pre>
+
+
+
@@ -33,10 +33,7 @@ of the following documents before returning here to the Developer Guide:

 ## {@link dev_guide.compiler Angular HTML Compiler}

-* {@link dev_guide.compiler.directives Understanding Angular Directives}
-* {@link dev_guide.compiler.widgets Understanding Angular Widgets}
-* {@link dev_guide.compiler.directives_widgets Comparing Directives and Widgets}
-* {@link dev_guide.compiler.markup Understanding Angular Markup}
+* {@link guide/directive Understanding Angular Directives}

 ## {@link dev_guide.templates Angular Templates}

@@ -47,7 +44,6 @@ of the following documents before returning here to the Developer Guide:

 * {@link dev_guide.services.understanding_services Understanding Angular Services}
 * {@link dev_guide.services.creating_services Creating Angular Services}
-* {@link dev_guide.services.registering_services Registering Angular Services}
 * {@link dev_guide.services.managing_dependencies Managing Service Dependencies}
 * {@link dev_guide.services.testing_services Testing Angular Services}

@@ -0,0 +1,258 @@
+@ngdoc overview
+@name Developer Guide: Modules
+@description
+
+# What is a Module?
+
+Most applications have a main method which instantiates, wires, and bootstraps the application.
+Angular apps don't have a main method, instead the modules serves the purpose of declaratively
+specifying how an application should be bootstrapped. There are several advantages to this
+approach:
+
+  * The process is more declarative which is easier to understand
+  * In unit-testing there is no need to load all modules, which may aid in writing unit-tests.
+  * Additional modules can be loaded in scenario tests, which can override some of the
+    configuration and help end-to-end test the application
+  * Third party code can be packaged as reusable modules.
+  * The modules can be loaded in any/parallel order (due to delayed nature of module execution).
+
+
+# The Basics
+
+Ok, I'm in a hurry how do i get a Hello World module working?
+
+Important things to notice:
+
+  * {@link api/angular.Module Module} API
+  * Notice the reference to the `myApp` module in the `<html ng-app="myApp">`, it is what
+    bootstraps the app using your module.
+
+<doc:example module='simpleApp'>
+  <doc:source>
+    <script>
+      // declare a module
+      var simpleAppModule = angular.module('simpleApp', []);
+
+      // configure the module.
+      // in this example we will create a greeting filter
+      simpleAppModule.filter('greet', function() {
+       return function(name) {
+          return 'Hello, ' + name + '!';
+        };
+      });
+
+    </script>
+    <div>
+      {{ 'World' | greet }}
+    </div>
+  </doc:source>
+</doc:example>
+
+
+
+# Recommended Setup
+
+While the example above is simple, it will not scale to large applications. Instead we recommend
+that you break your application to multiple modules like this:
+
+  * A service module, for service declaration
+  * A directive module, for directive declaration
+  * A filter module, for filter declaration
+  * And an application level module which depends on the above modules, and which has
+    initialization code.
+
+The reason for this breakup is that in your tests, it is often necessary to ignore the
+initialization code, which tends to be difficult to test. By putting it into separate module it
+can be easily ignored in tests. The tests can also be more focused by only loading the modules
+which are relevant to tests.
+
+The above is only a suggestion, so feel free to tailor it to your needs.
+
+<doc:example module='xmpl'>
+  <doc:source>
+    <script>
+      angular.module('xmpl.service', []).
+        value('greeter', {
+          salutation: 'Hello',
+          localize: function(localization) {
+            this.salutation = localization.salutation;
+          },
+          greet: function(name) {
+            return this.salutation + ' ' + name + '!';
+          }
+        }).
+        value('user', {
+          load: function(name) {
+            this.name = name;
+          }
+        });
+
+      angular.module('xmpl.directive', []);
+
+      angular.module('xmpl.filter', []);
+
+      angular.module('xmpl', ['xmpl.service', 'xmpl.directive', 'xmpl.filter']).
+        run(function(greeter, user) {
+          // This is effectively part of the main method initialization code
+          greeter.localize({
+            salutation: 'Bonjour'
+          });
+          user.load('World');
+        })
+
+
+      // A Controller for your app
+      var XmplController = function($scope, greeter, user) {
+        $scope.greeting = greeter.greet(user.name);
+      }
+    </script>
+    <div ng-controller="XmplController">
+      {{ greeting }}!
+    </div>
+  </doc:source>
+ </doc:example>
+
+
+
+# Module Loading & Dependencies
+
+A module is a collection of configuration and run blocks which get applied to the application
+during the bootstrap process. In its simplest form the module consist of collection of two kinds
+of blocks:
+
+  1. **Configuration blocks** - get executed during the provider registrations and configuration
+    phase. Only providers and constants can be injected into configuration blocks. This is to
+    prevent accidental instantiation of services before they have been fully configured.
+  2. **Run blocks** - get executed after the injector is created and are used to kickstart the
+    application. Only instances and constants can be injected into run blocks. This is to prevent
+    further system configuration during application run time.
+
+<pre>
+angular.module('myModule', []).
+  config(function(injectables) { // provider-injector
+    // This is an example of config block.
+    // You can have as many of these as you want.
+    // You can only inject Providers (not instances)
+    // into the config blocks.
+  }).
+  run(function(injectables) { // instance-injector
+    // This is an example of a run block.
+    // You can have as many of these as you want.
+    // You can only inject instances (not Providers)
+    // int the run blocks
+  });
+</pre>
+
+## Configuration Blocks
+
+There are some convenience methods on the module which are equivalent to the config block. For
+example:
+
+<pre>
+angular.module('myModule', []).
+  value('a', 123).
+  factory('a', function() { return 123; }).
+  directive('directiveName', ...).
+  filter('filterName', ...);
+
+// is same as
+
+angular.module('myModule', []).
+  config(function($provide, $compileProvider, $filterProvider) {
+    $provide.value('a', 123)
+    $provide.factory('a', function() { return 123; })
+    $compileProvider.directive('directiveName', ...).
+    $filterProvider.register('filterName', ...);
+  });
+</pre>
+
+The configuration blocks get applied in the order in which they are registered. The only exception
+to it are constant definitions, which are placed at the beginning of all configuration blocks.
+
+## Run Blocks
+
+Run blocks are the closest thing in Angular to the main method. A run block is the code which
+needs to run to kickstart the application. It is executed after all of the service have been
+configured and the injector has been created. Run blocks typically contain code which is hard
+to unit-test, and for this reason should be declared in isolated modules, so that they can be
+ignored in the unit-tests.
+
+## Dependencies
+
+Modules can list other modules as their dependencies. Depending on a module implies that required
+module needs to be loaded before the requiring module is loaded. In other words the configuration
+blocks of the required modules execute before the configuration blocks or the requiring module.
+The same is true for the run blocks. Each module can only be loaded once, even if multiple other
+modules require it.
+
+## Asynchronous Loading
+
+Modules are a way of managing $injector configuration, and have nothing to do with loading of
+scripts into a VM. There are existing projects which deal with script loading, which may be used
+with Angular. Because modules do nothing at load time they can be loaded into the VM in any order
+and thus script loaders can take advantage of this property and parallelize the loading process.
+
+
+# Unit Testing
+
+In its simplest form a unit-test is a way of instantiating a subset of the application in test and
+then applying a stimulus to it. It is important to realize that each module can only be loaded
+once per injector. Typically an app has only one injector. But in tests, each test has its own
+injector, which means that the modules are loaded multiple times per VM. Properly structured
+modules can help with unit testing, as in this example:
+
+In all of these examples we are going to assume this module definition:
+<pre>
+  angular.module('greetMod', []).
+
+    factory('alert', function($window) {
+      return function(text) {
+        $window.alert(text);
+      }
+    }).
+
+    value('salutation', 'Hello').
+
+    factory('greet', function(alert, salutation) {
+      return function(name) {
+        alert(salutation + ' ' + name + '!');
+      }
+    });
+</pre>
+
+Let's write some tests:
+<pre>
+describe('myApp', function() {
+  // load the application relevant modules then load a special
+  // test module which overrides the $window with mock version,
+  // so that calling window.alert() will not block the test
+  // runner with a real alert box. This is an example of overriding
+  // configuration information in tests.
+  beforeEach(module('greetMod', function($provide) {
+    $provide.value('$window', {
+      alert: jasmine.createSpy('alert')
+    });
+  }));
+
+  // The inject() will create the injector and inject the greet and
+  // $window into the tests. The test need not concern itself with
+  // wiring of the application, only with testing it.
+  it('should alert on $window', inject(function(greet, $window) {
+    greet('World');
+    expect($window.alert).toHaveBeenCalledWith('Hello World!');
+  }));
+
+  // this is another way of overriding configuration in the
+  // tests using an inline module and inject methods.
+  it('should alert using the alert service', function() {
+    var alertSpy = jasmine.createSpy('alert');
+    module(function($provide) {
+      $provide.value('alert', alertSpy);
+    });
+    inject(function(greet) {
+      greet('World');
+      expect(alertSpy).toHaveBeenCalledWith('Hello World!');
+    });
+  });
+});
+</pre>
@@ -0,0 +1,3 @@
+@ngdoc overview
+@name Developer Guide: Type
+@description
@@ -16,14 +16,14 @@ development.
 production.

 To point your code to an angular script on the angular server, use the following template.  This
-example points to (non-minified) version 0.9.12:
+example points to (non-minified) version 0.10.6:

 <pre>
  <!doctype html>
-  <html xmlns:ng="http://angularjs.org">
+  <html ng-app>
    <head>
      <title>My Angular App</title>
-      <script src="http://code.angularjs.org/angular-0.9.12.js" ng:autobind></script>
+      <script src="http://code.angularjs.org/angular-0.10.6.js"></script>
    </head>
    <body>
    </body>
@@ -68,7 +68,7 @@ manipulate the DOM.
 ### What is testability like in angular?

 Very testable. It has an integrated dependency injection framework. See
-{@link api/angular.service service} for details.
+{@link api/angular.module.ng service} for details.

 ### How can I learn more about angular?

@@ -21,24 +21,22 @@ A great way for you to get started with AngularJS is to create the tradtional

 The resulting web page should look something like the following:

-<img class="center" src="img/helloworld.png" border="1" />
+<img class="center" src="img/helloworld.png" border="1">

 Now let's take a closer look at that code, and see what is going on behind
 the scenes.

-The first line of interest defines the `ng` namespace, which makes
-AngularJS work across all browsers (especially important for IE):
+The `ng-app` tags tells angular to process the entire HTML page and bootstrap the app when the page
+is loaded:

 <pre>
-    <html xmlns:ng="http://angularjs.org">
+    <html ng-app>
 </pre>

-The next line downloads the angular script, and instructs angular to process
-the entire HTML page when it is loaded:
+The next line downloads the angular script:

 <pre>
-    <script type="text/javascript" src="http://code.angularjs.org/angular-?.?.?.min.js"
-ng:autobind></script>
+    <script src="http://code.angularjs.org/angular-?.?.?.min.js"></script>
 </pre>

 (For details on what happens when angular processes an HTML page,
@@ -67,20 +65,20 @@ This example demonstrates angular's two-way data binding:

 <doc:example>
 <doc:source>
-  Your name: <input type="text" ng:model="yourname" value="World"/>
-  <hr/>
-  Hello {{yourname}}!
+  Your name: <input type="text" ng-model="yourname" placeholder="World">
+  <hr>
+  Hello {{yourname || 'World'}}!
 </doc:source>
 </doc:example>

 After the refresh, the page should look something like this:

-<img class="left" src="img/helloworld_2way.png" border="1" />
+<img class="left" src="img/helloworld_2way.png" border="1" >

 These are some of the important points to note from this example:

-* The text input {@link api/angular.widget widget} called `yourname` is bound to a model variable
-called `yourname`.
+* The text input {@link guide/directive directive}
+  is bound to a model variable called `yourname`.
 * The double curly braces notation binds the `yourname` model to the greeting text.

 * You did not need to explicitly register an event listener or define an event handler for events!
@@ -2,12 +2,12 @@
@name Tutorial
@description

-A great way to get introduced to Angular is to work through this tutorial, which walks you through
+A great way to get introduced to AngularJS is to work through this tutorial, which walks you through
 the construction of an AngularJS web app. The app you will build is a catalog that displays a list
 of Android devices, lets you filter the list to see only devices that interest you, and then view
 details for any device.

-<img src="img/tutorial/catalog_screen.png">
+<img class="diagram" src="img/tutorial/catalog_screen.png" width="488" height="413">

 Work through the tutorial to see how Angular makes browsers smarter — without the use of extensions
 or plug-ins. As you work through the tutorial, you will:
@@ -52,99 +52,97 @@ code management or to use scripts that copy snapshots of project files into your
 (`sandbox`) directory. Select one of the tabs below and follow the instructions for setting up your
 computer for your preferred option.

-<doc:tutorial-instructions show="true">
-  <doc:tutorial-instruction id="git-mac" title="Git on Mac/Linux">
+<div class="tabbable" show="true">
+  <div class="tab-pane well" id="git-mac" title="Git on Mac/Linux">
    <ol>
      <li><p>Verify that you have <a href="http://java.com/">Java</a> installed by running the
 following command in a terminal window:</p>
-      <pre><code>java -version</code></pre>
+      <pre>java -version</pre>
      <p>You will need Java to run unit tests.</p></li>
      <li><p>Download Git from the <a href="http://git-scm.com/download">Git</a> site.</p>
      <p>You can build Git from source or use the pre-compiled package.</p></li>
      <li><p>Clone the angular-phonecat repository located at <a
 href="https://github.com/angular/angular-phonecat">Github</a> by running the following command:</p>
-      <pre><code>git clone git://github.com/angular/angular-phonecat.git</code></pre>
+      <pre>git clone git://github.com/angular/angular-phonecat.git</pre>
      <p>This command creates the <code>angular-phonecat</code> directory in your current
 directory.</p></li>
      <li><p>Change your current directory to <code>angular-phonecat</code>:</p>
-      <pre><code>cd angular-phonecat</code></pre>
+      <pre>cd angular-phonecat</pre>
      <p>The tutorial instructions assume you are running all commands from the angular-phonecat
 directory.</p></li>
      <li><p>You will need an http server running on your system. Mac and Linux machines typically
 have Apache pre-installed, but If you don't already have one installed, you can <a
-href="https://github.com/joyent/node/wiki/Installing-Node.js-via-package-manager">install
-node.js</a>. Use <code>node</code> to run <code>scripts/web-server.js</code>,  a simple bundled
-http server.</p></li>
+href="http://nodejs.org/#download">install node.js</a>. Use <code>node</code> to run
+<code>scripts/web-server.js</code>,  a simple bundled http server.</p></li>
    </ol>
-  </doc:tutorial-instruction>
+  </div>

-  <doc:tutorial-instruction id="git-win" title="Git on Windows">
+  <div class="tab-pane well" id="git-win" title="Git on Windows">
    <ol>
      <li><p>You will need Java to run unit tests, so run the following command to verify that you
 have <a href="http://java.com/">Java</a> installed and that the <code>java</code> executable is on
 your <code>PATH</code>.</p>
-      <pre><code>java -version</code></pre>
+      <pre>java -version</pre>
      <p></p></li>
      <li><p>Install msysGit from <a href="http://git-scm.com/download">the Git</a> site.</p></li>
      <li><p>Open msysGit bash and clone the angular-phonecat repository located at <a
 href="https://github.com/angular/angular-phonecat">Github</a> by running the following command:</p>
-      <pre><code>git clone git://github.com/angular/angular-phonecat.git</code></pre>
+      <pre>git clone git://github.com/angular/angular-phonecat.git</pre>
      <p>This command creates the angular-phonecat directory in your current directory.</p></li>
      <li><p>Change your current directory to angular-phonecat.</p>
-      <pre><code>cd angular-phonecat</code></pre>
+      <pre>cd angular-phonecat</pre>
      <p>The tutorial instructions assume you are running all commands from the angular-phonecat
 directory.</p>
      <p>You should run all <code>git</code> commands from msysGit bash.</p>
      <p>Other commands like <code>test-server.bat</code> or <code>test.bat</code> should be
 executed from the Windows command line.</li>
-      <li><p>You need an http server running on your system. If you don't already have one
-installed, you can install <a href="http://nodejs.org/">node.js</a>. Download the <a
-href="http://node-js.prcn.co.cc/">pre-compiled binaries</a>, unzip them, and then add
-<code>nodejs\bin</code> into your <code>PATH</code>. Use <code>node</code> to run
-<code>scripts\web-server.js</code>, a simple, bundled http server.</p></li>
+      <li><p>You need an http server running on your system, but if you don't already have one
+already installed, you can install <a href="http://nodejs.org/#download">node.js</a>. Make sure that
+<code>nodejs\bin</code> was added into your <code>PATH</code>. Use <code>node</code> to run
+<code>scripts\web-server.js</code>, a simple bundled http server.</p></li>
    </ol>
-  </doc:tutorial-instruction>
+  </div>

-  <doc:tutorial-instruction id="ss-mac" title="Snapshots on Mac/Linux">
+  <div class="tab-pane well" id="ss-mac" title="Snapshots on Mac/Linux">
    <ol>
      <li><p>You need Java to run unit tests, so verify that you have <a
 href="http://java.com/">Java</a> installed by running the following command in a terminal
 window:</p>
-      <pre><code>java -version</code></pre>
+      <pre>java -version</pre>
       <li><p>Download the <a href="http://code.angularjs.org/angular-phonecat/">zip archive</a>
 containing all of the files and unzip them into the [tutorial-dir] directory</p>.</li>
      <li><p>Change your current directory to [tutorial-dir]/sandbox, as follows:</p>
-      <pre><code>cd [tutorial-dir]/sandbox</code></pre>
+      <pre>cd [tutorial-dir]/sandbox</pre>
      <p>The tutorial instructions assume you are running all commands from your
 <code>sandbox</code> directory.</p></li>
      <li><p>You need an http server running on your system and Mac and Linux machines typically
 have Apache pre-installed. If you don't have an http server installed, you can <a
-href="https://github.com/joyent/node/wiki/Installing-Node.js-via-package-manager">install
-node.js</a> and use it to run <code>scripts/web-server.js</code>, a simple bundled http
-server.</p></li>
+href="http://nodejs.org/#download">install node.js</a> and use it to run
+<code>scripts/web-server.js</code>, a simple bundled http server.</p></li>
    </ol>
-  </doc:tutorial-instruction>
+  </div>

-  <doc:tutorial-instruction id="ss-win" title="Snapshots on Windows">
+  <div class="tab-pane well" id="ss-win" title="Snapshots on Windows">
    <ol>
      <li><p>Verify that you have <a href="http://java.com/">Java</a> installed and that the
 <code>java</code> executable is on your <code>PATH</code> by running the following command in the
 Windows command line:</p>
-      <pre><code>java -version</code></pre>
+      <pre>java -version</pre>
      <p>You need Java to run unit tests, so download the <a
 href="http://code.angularjs.org/angular-phonecat/">zip archive</a> that contains all of the files
 and unzip the files into the [tutorial-dir] directory</p></li>
      <li><p>Change your current directory to [tutorial-dir]/sandbox, as follows:</p>
-      <pre><code>cd [tutorial-dir]/sandbox</code></pre>
+      <pre>cd [tutorial-dir]/sandbox</pre>
      <p>The tutorial instructions assume you are running all commands from this directory.</p></li>
      <li><p>You need an http server running on your system, but if you don't already have one
-already installed, you can install <a href="http://nodejs.org/">node.js</a>. Download the <a
-href="http://node-js.prcn.co.cc/">pre-compiled binaries</a>, unzip them, and then add
-<code>nodejs\bin</code> into your <code>PATH</code>. Use <code>node</code> to run
+already installed, you can install <a href="http://nodejs.org/#download">node.js</a>. Make sure that
+<code>nodejs\bin</code> was added into your <code>PATH</code>. Use <code>node</code> to run
 <code>scripts\web-server.js</code>, a simple bundled http server.</p></li>
    </ol>
-  </doc:tutorial-instruction>
-</doc:tutorial-instructions>
+  </div>
+</divs>

 The last thing to do is to make sure your computer has a web browser and a good text editor
-installed. Now, let's get going with {@link step_00 step 0}.
+installed. Now, let's get some cool stuff done!
+
+{@link step_00 <span class="btn btn-primary">Get Started!</span>}
@@ -1,20 +1,20 @@
@ngdoc overview
-@name Tutorial: 0 - angular-seed
+@name Tutorial: 0 - Bootstrapping
@description

-<ul doc:tutorial-nav="0"></ul>
+<ul doc-tutorial-nav="0"></ul>


-You are now ready to build the Angular phonecat application. In this step, you will become familiar
+You are now ready to build the AngularJS phonecat app. In this step, you will become familiar
 with the most important source code files, learn how to start the development servers bundled with
 angular-seed, and run the application in the browser.


-<doc:tutorial-instructions show="true">
-  <doc:tutorial-instruction id="git-mac" title="Git on Mac/Linux">
+<div class="tabbable" show="true" ng-model="$cookies.platformPreference">
+  <div class="tab-pane well" id="git-mac" title="Git on Mac/Linux" value="gitUnix">
    <ol>
      <li><p>In angular-phonecat directory, run this command:</p>
-      <pre><code>git checkout -f step-0</code></pre>
+      <pre>git checkout -f step-0</pre>
      <p>This resets your workspace to step 0 of the tutorial app.</p>
      <p>You must repeat this for every future step in the tutorial and change the number to
      the number of the step you are on. This will cause any changes you made within
@@ -41,13 +41,13 @@ directory.</li>
        </ul>
      </li>
    </ol>
-  </doc:tutorial-instruction>
+  </div>


-  <doc:tutorial-instruction id="git-win" title="Git on Windows">
+  <div class="tab-pane well" id="git-win" title="Git on Windows" value="gitWin">
    <ol>
      <li><p>Open msysGit bash and run this command (in angular-phonecat directory):</p>
-      <pre><code>git checkout -f step-0</code></pre>
+      <pre>git checkout -f step-0</pre>
      <p>This resets your workspace to step 0 of the tutorial app.</p>
      <p>You must repeat this for every future step in the tutorial and change the number to
      the number of the step you are on. This will cause any changes you made within
@@ -73,13 +73,13 @@ directory.</li>
        </ul>
      </li>
    </ol>
-  </doc:tutorial-instruction>
+  </div>


-  <doc:tutorial-instruction id="ss-mac" title="Snapshots on Mac/Linux">
+  <div class="tab-pane well" id="ss-mac" title="Snapshots on Mac/Linux" value="snapshotUnix">
    <ol>
      <li><p>In the angular-phonecat directory, run this command:</p>
-      <pre><code>./goto_step.sh 0</code></pre>
+      <pre>./goto_step.sh 0</pre>
      <p>This resets your workspace to step 0 of the tutorial app.</p>
      <p>You must repeat this for every future step in the tutorial and change the number to
      the number of the step you are on. This will cause any changes you made within
@@ -105,13 +105,13 @@ href="http://localhost:8000/app/index.html">http://localhost:8000/app/index.html
        </ul>
      </li>
    </ol>
-  </doc:tutorial-instruction>
+  </div>


-  <doc:tutorial-instruction id="ss-win" title="Snapshots on Windows">
+  <div class="tab-pane well" id="ss-win" title="Snapshots on Windows" value="snapshotWin">
    <ol>
      <li><p>Open windows command line and run this command (in the angular-phonecat directory):</p>
-      <pre><code>goto_step.bat 0</code></pre>
+      <pre>goto_step.bat 0</pre>
      <p>This resets your workspace to step 0 of the tutorial app.</p>
      <p>You must repeat this for every future step in the tutorial and change the number to
      the number of the step you are on. This will cause any changes you made within
@@ -137,29 +137,30 @@ href="http://localhost:8000/app/index.html">http://localhost:8000/app/index.html
        </ul>
      </li>
    </ol>
-  </doc:tutorial-instruction>
-</doc:tutorial-instructions>
+  </div>
+</div>


 You can now see the page in your browser. It's not very exciting, but that's OK.

-The static HTML page that displays "Nothing here yet!" was constructed with the HTML code shown
-below. The code contains some key Angular elements that we will need going forward.
+The HTML page that displays "Nothing here yet!" was constructed with the HTML code shown below.
+The code contains some key Angular elements that we will need going forward.

 __`app/index.html`:__
 <pre>
 <!doctype html>
-<html xmlns:ng="http://angularjs.org/">
+<html lang="en" ng-app>
 <head>
  <meta charset="utf-8">
-  <title>my angular app</title>
-  <link rel="stylesheet" href="css/app.css"/>
+  <title>My HTML File</title>
+  <link rel="stylesheet" href="css/app.css">
+  <link rel="stylesheet" href="css/bootstrap.css">
+  <script src="lib/angular/angular.js"></script>
 </head>
 <body>

-  Nothing here yet!
+  <p>Nothing here {{'yet' + '!'}}</p>

-  <script src="lib/angular/angular.js" ng:autobind></script>
 </body>
 </html>
 </pre>
@@ -168,30 +169,71 @@ __`app/index.html`:__

 ## What is the code doing?

-* xmlns declaration
+* `ng-app` directive:

-          <html xmlns:ng="http://angularjs.org">
+          <html ng-app>

-  This `xmlns` declaration for the `ng` namespace must be specified in all Angular applications in
-order to make Angular work with XHTML and IE versions older than 9 (regardless of whether you are
-using XHTML or HTML).
+  The `ng-app` attribute is represents an Angular directive used to flag an element which Angular
+  should consider to be the root element of our application. This gives application developers the
+  freedom to tell Angular if the entire html page or only a portion of it should be treated as the
+  Angular application.

-* Angular script tag
+* AngularJS script tag:

-          <script src="lib/angular/angular.js" ng:autobind>
+          <script src="lib/angular/angular.js">

-  This single line of code is all that is needed to bootstrap an angular application.
-
-  The code downloads the `angular.js` script and registers a callback that will be executed by the
+  This code downloads the `angular.js` script and registers a callback that will be executed by the
 browser when the containing HTML page is fully downloaded. When the callback is executed, Angular
-looks for the {@link api/angular.directive.ng:autobind ng:autobind} attribute. If Angular finds
-`ng:autobind`, it creates a root scope for the application and associates it with the `<html>`
-element of the template:
+looks for the {@link api/angular.module.ng.$compileProvider.directive.ngApp ngApp} directive. If
+Angular finds the directive, it will bootstrap the application with the root of the application DOM
+being the element on which the `ngApp` directive was defined.

-  <img src="img/tutorial/tutorial_00_final.png">
+* Double-curly binding with an expression:

-    As you will see shortly, everything in Angular is evaluated within a scope. We'll learn more
-about this in the next steps.
+          Nothing here {{'yet' + '!'}}`
+
+  This line demonstrates the core feature of Angular's templating capabilities – a binding, denoted
+  by double-curlies `{{ }}` as well as a simple expression `'yet' + '!'` used in this binding.
+
+  The binding tells Angular, that it should evaluate an expression and insert the result into the
+  DOM in place of the binding. Rather than a one-time insert, as we'll see in the next steps, a
+  binding will result in efficient continuous updates whenever the result of the expression
+  evaluation changes.
+
+  {@link guide/dev_guide.expressions Angular expression} is a JavaScript-like code snippet that is
+  evaluated by Angular in the context of the current model scope, rather than within the scope of
+  the global context (`window`).
+
+  As expected, once this template is processed by Angular, the html page will contains text:
+  "Nothing here yet!".
+
+## Bootstrapping AngularJS apps
+
+Bootstrapping AngularJS apps automatically using the `ngApp` directive is very easy and suitable
+for most cases. In advanced cases, such as when using script loaders, you can use
+{@link guide/dev_guide.bootstrap.manual_bootstrap imperative / manual way} to bootstrap the app.
+
+There are 3 important things that happen during the app bootstrap:
+
+1. The {@link api/angular.module.AUTO.$injector injector} that will be used for dependency injection
+   within this app is created.
+
+2. The injector will then create the {@link api/angular.module.ng.$rootScope root scope} that will
+   become the context for the model of our application.
+
+3. Angular will then "compile" the DOM starting at the `ngApp` root element, processing any
+   directives and bindings found along the way.
+
+
+Once an application is bootstrapped, it will then wait for incoming browser events (such as mouse
+click, key press or incoming HTTP response) that might change the model. Once such event occurs,
+Angular detects if it caused any model changes and if changes are found, Angular will reflect them
+in the view by updating all of the affected bindings.
+
+The structure of our application is currently very simple. The template contains just one directive
+and one static binding, and our model is empty. That will soon change!
+
+<img class="diagram" src="img/tutorial/tutorial_00.png">


 ## What are all these files in my working directory?
@@ -204,8 +246,18 @@ scripts and a simple example app, all pre-configured for developing a typical we
 For the purposes of this tutorial, we modified the angular-seed with the following changes:

 * Removed the example app
-* Added phone images to `app/img/phones`
-* Added phone data files (JSON) to `app/phones`
+* Added phone images to `app/img/phones/`
+* Added phone data files (JSON) to `app/phones/`
+* Added [Bootstrap](http://twitter.github.com/bootstrap/) files to `app/css/` and `app/img/`
+
+
+
+# Experiments
+
+* Try adding a new expression to the `index.html` that will do some math:
+
+          <p>1 + 2 = {{ 1 + 2 }}</p>
+


 # Summary
@@ -213,4 +265,11 @@ For the purposes of this tutorial, we modified the angular-seed with the followi
 Now let's go to {@link step_01 step 1} and add some content to the web app.


-<ul doc:tutorial-nav="0"></ul>
+<ul doc-tutorial-nav="0"></ul>
+
+<div style="display: none">
+Note: During the bootstrap the injector and the root scope will then be associated with the
+   element on which the `ngApp` directive was declared, so when debugging the app you can retrieve
+   them from browser console via `angular.element(rootElement).scope()` and
+   `angular.element(rootElement).injector()`.
+</div>
@@ -2,7 +2,7 @@
@name Tutorial: 1 - Static Template
@description

-<ul doc:tutorial-nav="1"></ul>
+<ul doc-tutorial-nav="1"></ul>


 In order to illustrate how angular enhances standard HTML, you will create a purely *static* HTML
@@ -12,7 +12,7 @@ dynamically display the same result with any set of data.
 In this step you will add some basic information about two cell phones to an HTML page.


-<doc:tutorial-instructions step="1" show="true"></doc:tutorial-instructions>
+<div doc-tutorial-reset="1"></div>


 The page now contains a list with information about two phones.
@@ -22,7 +22,6 @@ https://github.com/angular/angular-phonecat/compare/step-0...step-1 GitHub}:

 __`app/index.html`:__
 <pre>
-...
  <ul>
    <li>
      <span>Nexus S</span>
@@ -37,7 +36,6 @@ __`app/index.html`:__
      </p>
    </li>
  </ul>
-...
 </pre>


@@ -51,7 +49,7 @@ __`app/index.html`:__
 # Summary

 This addition to your app uses static HTML to display the list. Now, let's go to {@link step_02
-step 2} to learn how to use angular to dynamically generate the same list.
+step 2} to learn how to use AngularJS to dynamically generate the same list.


-<ul doc:tutorial-nav="1"></ul>
+<ul doc-tutorial-nav="1"></ul>
@@ -2,10 +2,10 @@
@name Tutorial: 2 - Angular Templates
@description

-<ul doc:tutorial-nav="2"></ul>
+<ul doc-tutorial-nav="2"></ul>


-Now it's time to make the web page dynamic -- with Angular. We'll also add a test that verifies the
+Now it's time to make the web page dynamic — with AngularJS. We'll also add a test that verifies the
 code for the controller we are going to add.

 There are many ways to structure the code for an application. For Angular apps, we encourage the
@@ -14,7 +14,7 @@ design pattern} to decouple the code and to separate concerns. With that in mind
 little Angular and JavaScript to add model, view, and controller components to our app.


-<doc:tutorial-instructions step="2"></doc:tutorial-instructions>
+<div doc-tutorial-reset="2"></div>


 The app now contains a list with three phones.
@@ -23,63 +23,66 @@ The most important changes are listed below. You can see the full diff on {@link
 https://github.com/angular/angular-phonecat/compare/step-1...step-2 GitHub}:


-## Template for the View
+## View and Template

-The __view__ component is constructed by Angular from this template:
+In Angular, the __view__ is a projection of the model through the HTML __template__. This means that
+whenever the model changes, Angular refreshes the appropriate binding points, which updates the
+view.
+
+The view component is constructed by Angular from this template:

 __`app/index.html`:__
 <pre>
-...
-<body ng:controller="PhoneListCtrl">
+<html ng-app>
+<head>
+  ...
+  <script src="lib/angular/angular.js"></script>
+  <script src="js/controllers.js"></script>
+</head>
+<body ng-controller="PhoneListCtrl">

  <ul>
-    <li ng:repeat="phone in phones">
+    <li ng-repeat="phone in phones">
      {{phone.name}}
      <p>{{phone.snippet}}</p>
    </li>
  </ul>
-
-  <script src="lib/angular/angular.js" ng:autobind></script>
-  <script src="js/controllers.js"></script>
 </body>
 </html>
 </pre>

-We replaced the hard-coded phone list with the {@link api/angular.widget.@ng:repeat ng:repeat
-widget} and two {@link guide/dev_guide.expressions Angular expressions} enclosed in curly braces:
+We replaced the hard-coded phone list with the
+{@link api/angular.module.ng.$compileProvider.directive.ngRepeat ngRepeat directive} and two
+{@link guide/dev_guide.expressions Angular expressions} enclosed in curly braces:
 `{{phone.name}}` and `{{phone.snippet}}`:

-* The `ng:repeat="phone in phones"` statement in the `<li>` tag is an Angular repeater. The
+* The `ng-repeat="phone in phones"` statement in the `<li>` tag is an Angular repeater. The
 repeater tells Angular to create a `<li>` element for each phone in the list using the first `<li>`
 tag as the template.

-      <img src="img/tutorial/tutorial_02_final.png">
+* As we've learned in step 0, the curly braces around `phone.name` and `phone.snippet` denote
+bindings. As opposed to evaluating constants, these expression are refering to our application
+model, which was set up in our `PhoneListCtrl` controller.

-* The curly braces around `phone.name` and `phone.snippet` are examples of {@link
-guide/dev_guide.compiler.markup Angular markup}. The curly markup is shorthand for the Angular
-directive {@link api/angular.directive.ng:bind ng:bind}. An `ng:bind` directive indicates a
-template binding point to Angular. Binding points are locations in a template where Angular creates
-data-binding between the view and the model.
-
-In Angular, the view is a projection of the model through the HTML template. This means that
-whenever the model changes, Angular refreshes the appropriate binding points, which updates the
-view.
+      <img class="diagram" src="img/tutorial/tutorial_02.png">


 ## Model and Controller

 The data __model__ (a simple array  of phones in object literal notation) is instantiated within
-the __controller__ function(`PhoneListCtrl`):
+the `PhoneListCtrl` __controller__:

 __`app/js/controllers.js`:__
 <pre>
-function PhoneListCtrl() {
-  this.phones = [{"name": "Nexus S",
-                  "snippet": "Fast just got faster with Nexus S."},
-                 {"name": "Motorola XOOM™ with Wi-Fi",
-                  "snippet": "The Next, Next Generation tablet."},
-                 {"name": "MOTOROLA XOOM™",
-                  "snippet": "The Next, Next Generation tablet."}];
+function PhoneListCtrl($scope) {
+  $scope.phones = [
+    {"name": "Nexus S",
+     "snippet": "Fast just got faster with Nexus S."},
+    {"name": "Motorola XOOM™ with Wi-Fi",
+     "snippet": "The Next, Next Generation tablet."},
+    {"name": "MOTOROLA XOOM™",
+     "snippet": "The Next, Next Generation tablet."}
+  ];
 }
 </pre>

@@ -91,10 +94,15 @@ providing context for our data model, the controller allows us to establish data
 the model and the view. We connected the dots between the presentation, data, and logic components
 as follows:

-* The name of our controller function(in the JavaScript file `controllers.js`) matches the {@link
-api/angular.directive.ng:controller ng:controller} directive in the `<body>` tag (`PhoneListCtrl`).
-* The data is instantiated within the *scope* of our controller function; our template binding
-points are located within the block bounded by the `<body ng:controller="PhoneListCtrl">` tag.
+* `PhoneListCtrl` — the name of our controller function (located in the JavaScript file
+`controllers.js`), matches the value of the
+{@link api/angular.module.ng.$compileProvider.directive.ngController ngController} directive located
+on the `<body>` tag.
+
+* The phone data is then attached to the *scope* (`$scope`) that was injected into our controller
+function. The controller scope is a prototypically descendant of the root scope that was created
+when the application bootstrapped. This controller scope is available to all bindings located within
+the `<body ng-controller="PhoneListCtrl">` tag.

  The concept of a scope in Angular is crucial; a scope can be seen as the glue which allows the
 template, model and controller to work together. Angular uses scopes, along with the information
@@ -102,7 +110,7 @@ contained in the template, data model, and controller, to keep models and views
 sync. Any changes made to the model are reflected in the view; any changes that occur in the view
 are reflected in the model.

-  To learn more about Angular scopes, see the {@link api/angular.scope angular scope documentation}.
+  To learn more about Angular scopes, see the {@link api/angular.module.ng.$rootScope.Scope angular scope documentation}.


 ## Tests
@@ -114,11 +122,13 @@ __`test/unit/controllersSpec.js`:__
 <pre>
 describe('PhoneCat controllers', function() {

-  describe('PhoneListCtrl', function() {
+  describe('PhoneListCtrl', function(){

    it('should create "phones" model with 3 phones', function() {
-      var ctrl = new PhoneListCtrl();
-      expect(ctrl.phones.length).toBe(3);
+      var scope = {},
+          ctrl = new PhoneListCtrl(scope);
+
+      expect(scope.phones.length).toBe(3);
    });
  });
 });
@@ -141,11 +151,11 @@ http://code.google.com/p/js-test-driver/ JsTestDriver}. To run the test, do the
 1. In a _separate_ terminal window or tab, go to the `angular-phonecat` directory and run
 `./scripts/test-server.sh` to start the test web server.

-2. Open a new browser tab or window and navigate to {@link http://localhost:9876}.
+2. Open a new browser window and navigate to {@link http://localhost:9876}.

 3. Choose "Capture this browser in strict mode".

-   At this point, you can leave this tab open and forget about it. JsTestDriver will use it to
+   At this point, you can leave this window open and forget about it. JsTestDriver will use it to
 execute the tests and report the results in the terminal.

 4. Execute the test by running `./scripts/test.sh`
@@ -155,12 +165,12 @@ execute the tests and report the results in the terminal.
             Chrome: Runner reset.
             .
             Total 1 tests (Passed: 1; Fails: 0; Errors: 0) (2.00 ms)
-               Chrome 11.0.696.57 Mac OS: Run 1 tests (Passed: 1; Fails: 0; Errors 0) (2.00 ms)
+               Chrome 19.0.1084.36 Mac OS: Run 1 tests (Passed: 1; Fails: 0; Errors 0) (2.00 ms)

  Yay! The test passed! Or not...

-  Note: If you see errors after you run the test, close the browser tab and go back to the terminal
-and kill the script, then repeat the procedure above.
+  Note: If you see errors after you run the test, close the browser window and go back to the
+  terminal and kill the script, then repeat the procedure above.

 # Experiments

@@ -170,7 +180,7 @@ and kill the script, then repeat the procedure above.

 * Create a new model property in the controller and bind to it from the template. For example:

-          this.hello = "Hello, World!"
+          $scope.hello = "Hello, World!"

  Refresh your browser to make sure it says, "Hello, World!"

@@ -178,14 +188,14 @@ and kill the script, then repeat the procedure above.

          <table>
            <tr><th>row number</th></tr>
-            <tr ng:repeat="i in [0, 1, 2, 3, 4, 5, 6, 7]"><td>{{i}}</td></tr>
+            <tr ng-repeat="i in [0, 1, 2, 3, 4, 5, 6, 7]"><td>{{i}}</td></tr>
          </table>

  Now, make the list 1-based by incrementing `i` by one in the binding:

          <table>
            <tr><th>row number</th></tr>
-            <tr ng:repeat="i in [0, 1, 2, 3, 4, 5, 6, 7]"><td>{{i+1}}</td></tr>
+            <tr ng-repeat="i in [0, 1, 2, 3, 4, 5, 6, 7]"><td>{{i+1}}</td></tr>
          </table>

 * Make the unit test fail by changing the `toBe(3)` statement to `toBe(4)`, and rerun the
@@ -199,4 +209,4 @@ are testing as you go. Now, let's go to {@link step_03 step 3} to learn how to a
 to the app.


-<ul doc:tutorial-nav="2"></ul>
+<ul doc-tutorial-nav="2"></ul>
@@ -2,7 +2,7 @@
@name Tutorial: 3 - Filtering Repeaters
@description

-<ul doc:tutorial-nav="3"></ul>
+<ul doc-tutorial-nav="3"></ul>


 We did a lot of work in laying a foundation for the app in the last step, so now we'll do something
@@ -11,7 +11,7 @@ test, because a good end-to-end test is a good friend. It stays with your app, k
 and quickly detects regressions.


-<doc:tutorial-instructions step="3"></doc:tutorial-instructions>
+<div doc-tutorial-reset="3"></div>


 The app now has a search box. Notice that the phone list on the page changes depending on what a
@@ -31,20 +31,32 @@ We made no changes to the controller.

 __`app/index.html`:__
 <pre>
-...
-   Fulltext Search: <input ng:model="query"/>
+  <div class="container-fluid">
+    <div class="row-fluid">
+      <div class="span2">
+        <!--Sidebar content-->

-  <ul class="phones">
-    <li ng:repeat="phone in phones.$filter(query)">
-      {{phone.name}}
-      <p>{{phone.snippet}}</p>
-    </li>
-  </ul>
-...
+        Search: <input ng-model="query">
+
+      </div>
+      <div class="span10">
+        <!--Body content-->
+
+        <ul class="phones">
+          <li ng-repeat="phone in phones | filter:query">
+            {{phone.name}}
+            <p>{{phone.snippet}}</p>
+          </li>
+        </ul>
+
+      </div>
+    </div>
+  </div>
 </pre>

-We added a standard HTML `<input>` tag and used angular's {@link api/angular.Array.filter $filter}
-function to process the input for the `ng:repeater`.
+We added a standard HTML `<input>` tag and used angular's
+{@link api/angular.module.ng.$filter.filter $filter} function to process the input for the
+`ngRepeate` directive.

 This lets a user enter search criteria and immediately see the effects of their search on the phone
 list. This new code demonstrates the following:
@@ -53,17 +65,17 @@ list. This new code demonstrates the following:
 name of the input box to a variable of the same name in the data model and keeps the two in sync.

  In this code, the data that a user types into the input box (named __`query`__) is immediately
-available as a filter input in the list repeater (`phone in phones.$filter(`__`query`__`)`). When
+available as a filter input in the list repeater (`phone in phones | filter:`__`query`__). When
 changes to the data model cause the repeater's input to change, the repeater efficiently updates
 the DOM to reflect the current state of the model.

-      <img src="img/tutorial/tutorial_03_final.png">
+      <img  class="diagram" src="img/tutorial/tutorial_03.png">

-* Use of `$filter`. The {@link api/angular.Array.filter $filter} method uses the `query` value to
-create a new array that contains only those records that match the `query`.
+* Use of `filter` filter. The {@link api/angular.module.ng.$filter.filter filter} function uses the
+`query` value to create a new array that contains only those records that match the `query`.

-  `ng:repeat` automatically updates the view in response to the changing number of phones returned
-by the `$filter`. The process is completely transparent to the developer.
+  `ngRepeat` automatically updates the view in response to the changing number of phones returned
+by the `filter` filter. The process is completely transparent to the developer.

 ## Test

@@ -85,6 +97,7 @@ describe('PhoneCat App', function() {
      browser().navigateTo('../../app/index.html');
    });

+
    it('should filter the phone list as user types into the search box', function() {
      expect(repeater('.phones li').count()).toBe(3);

@@ -99,9 +112,8 @@ describe('PhoneCat App', function() {
 </pre>

 Even though the syntax of this test looks very much like our controller unit test written with
-Jasmine, the end-to-end test uses APIs of {@link
-https://docs.google.com/document/d/11L8htLKrh6c92foV71ytYpiKkeKpM4_a5-9c3HywfIc/edit?hl=en&pli=1#
-Angular's end-to-end test runner}.
+Jasmine, the end-to-end test uses APIs of {@link guide/dev_guide.e2e-testing Angular's end-to-end
+test runner}.

 To run the end-to-end test, open one of the following in a new browser tab:

@@ -128,23 +140,23 @@ really is that easy to set up any functional, readable, end-to-end test.
  However, when you reload the page, you won't see the expected result. This is because the "query"
 model lives in the scope defined by the body element:

-          <body ng:controller="PhoneListCtrl">
+          <body ng-controller="PhoneListCtrl">

  If you want to bind to the query model from the `<title>` element, you must __move__ the
-`ng:controller` declaration to the HTML element because it is the common parent of both the body
+`ngController` declaration to the HTML element because it is the common parent of both the body
 and title elements:

-          <html ng:controller="PhoneListCtrl">
+          <html ng-app ng-controller="PhoneListCtrl">

-  Be sure to *remove* the `ng:controller` declaration from the body element.
+  Be sure to *remove* the `ng-controller` declaration from the body element.

  While using double curlies works fine in within the title element, you might have noticed that
 for a split second they are actually displayed to the user while the page is loading. A better
-solution would be to use the {@link api/angular.directive.ng:bind ng:bind} or {@link
-api/angular.directive.ng:bind-template ng:bind-template} directives, which are invisible to the
-user while the page is loading:
+solution would be to use the {@link api/angular.module.ng.$compileProvider.directive.ngBind
+ngBind} or {@link api/angular.module.ng.$compileProvider.directive.ngBindTemplate
+ngBindTemplate} directives, which are invisible to the user while the page is loading:

-          <title ng:bind-template="Google Phone Gallery: {{query}}">Google Phone Gallery</title>
+          <title ng-bind-template="Google Phone Gallery: {{query}}">Google Phone Gallery</title>

 * Add the following end-to-end test into the `describe` block within `test/e2e/scenarios.js`:

@@ -178,5 +190,5 @@ We have now added full text search and included a test to verify that search wor
 to {@link step_04 step 4} to learn how to add sorting capability to the phone app.


-<ul doc:tutorial-nav="3"></ul>
+<ul doc-tutorial-nav="3"></ul>

@@ -2,7 +2,7 @@
@name Tutorial: 4 - Two-way Data Binding
@description

-<ul doc:tutorial-nav="4"></ul>
+<ul doc-tutorial-nav="4"></ul>


 In this step, you will add a feature to let your users control the order of the items in the phone
@@ -10,7 +10,7 @@ list. The dynamic ordering is implemented by creating a new model property, wiri
 the repeater, and letting the data binding magic do the rest of the work.


-<doc:tutorial-instructions step="4"></doc:tutorial-instructions>
+<div doc-tutorial-reset="4"></div>


 You should see that in addition to the search box, the app displays a drop down menu that allows
@@ -24,27 +24,20 @@ The most important differences between Steps 3 and 4 are listed below. You can s

 __`app/index.html`:__
 <pre>
-...
-  <ul class="controls">
-    <li>
-      Search: <input type="text" ng:model="query"/>
-    </li>
-    <li>
-      Sort by:
-      <select ng:model="orderProp">
-        <option value="name">Alphabetical</option>
-        <option value="age">Newest</option>
-      </select>
-    </li>
-  </ul>
+  Search: <input ng-model="query">
+  Sort by:
+  <select ng-model="orderProp">
+    <option value="name">Alphabetical</option>
+    <option value="age">Newest</option>
+  </select>
+

  <ul class="phones">
-    <li ng:repeat="phone in phones.$filter(query).$orderBy(orderProp)">
+    <li ng-repeat="phone in phones | filter:query | orderBy:orderProp">
      {{phone.name}}
      <p>{{phone.snippet}}</p>
    </li>
  </ul>
-...
 </pre>

 We made the following changes to the `index.html` template:
@@ -52,14 +45,14 @@ We made the following changes to the `index.html` template:
 * First, we added a `<select>` html element named `orderProp`, so that our users can pick from the
 two provided sorting options.

-      <img src="img/tutorial/tutorial_04-06_final.png">
+      <img  class="diagram" src="img/tutorial/tutorial_04.png">

-* We then chained the `$filter` method with {@link api/angular.Array.orderBy `$orderBy`} method to
-further process the input into the repeater. `$orderBy` is a utility method similar to {@link
-api/angular.Array.filter `$filter`}, but instead of filtering an array, it reorders it.
+* We then chained the `filter` filter with {@link api/angular.module.ng.$filter.orderBy `orderBy`}
+filter to further process the input into the repeater. `orderBy` is a filter that takes an input
+array, copies it and reorders the copy which is then returned.

 Angular creates a two way data-binding between the select element and the `orderProp` model.
-`orderProp` is then used as the input for the `$orderBy` method.
+`orderProp` is then used as the input for the `orderBy` filter.

 As we discussed in the section about data-binding and the repeater in step 3, whenever the model
 changes (for example because a user changes the order with the select drop down menu), Angular's
@@ -72,20 +65,20 @@ necessary!

 __`app/js/controller.js`:__
 <pre>
-/* App Controllers */
+function PhoneListCtrl($scope) {
+  $scope.phones = [
+    {"name": "Nexus S",
+     "snippet": "Fast just got faster with Nexus S.",
+     "age": 0},
+    {"name": "Motorola XOOM™ with Wi-Fi",
+     "snippet": "The Next, Next Generation tablet.",
+     "age": 1},
+    {"name": "MOTOROLA XOOM™",
+     "snippet": "The Next, Next Generation tablet.",
+     "age": 2}
+  ];

-function PhoneListCtrl() {
-  this.phones = [{"name": "Nexus S",
-                  "snippet": "Fast just got faster with Nexus S.",
-                  "age": 0},
-                 {"name": "Motorola XOOM™ with Wi-Fi",
-                  "snippet": "The Next, Next Generation tablet.",
-                  "age": 1},
-                 {"name": "MOTOROLA XOOM™",
-                  "snippet": "The Next, Next Generation tablet.",
-                  "age": 2}];
-
-  this.orderProp = 'age';
+  $scope.orderProp = 'age';
 }
 </pre>

@@ -93,8 +86,8 @@ function PhoneListCtrl() {
 record. This property is used to order phones by age.

 * We added a line to the controller that sets the default value of `orderProp` to `age`. If we had
-not set the default value here, angular would have used the value of the first `<option>` element
-(`'name'`) when it initialized the data model.
+not set the default value here, the model would stay uninitialized until our user would pick an
+option from the drop down menu.

  This is a good time to talk about two-way data-binding. Notice that when the app is loaded in the
 browser, "Newest" is selected in the drop down menu. This is because we set `orderProp` to `'age'`
@@ -114,21 +107,22 @@ __`test/unit/controllerSpec.js`:__
 <pre>
 describe('PhoneCat controllers', function() {

-  describe('PhoneListCtrl', function() {
-    var scope, $browser, ctrl;
+  describe('PhoneListCtrl', function(){
+    var scope, ctrl;

    beforeEach(function() {
-      ctrl = new PhoneListCtrl();
+      scope = {},
+      ctrl = new PhoneListCtrl(scope);
    });


    it('should create "phones" model with 3 phones', function() {
-      expect(ctrl.phones.length).toBe(3);
+      expect(scope.phones.length).toBe(3);
    });


    it('should set the default value of orderProp model', function() {
-      expect(ctrl.orderProp).toBe('age');
+      expect(scope.orderProp).toBe('age');
    });
  });
 });
@@ -146,7 +140,7 @@ following output.
        Chrome: Runner reset.
        ..
        Total 2 tests (Passed: 2; Fails: 0; Errors: 0) (3.00 ms)
-          Chrome 11.0.696.57 Mac OS: Run 2 tests (Passed: 2; Fails: 0; Errors 0) (3.00 ms)
+          Chrome 19.0.1084.36 Mac OS: Run 2 tests (Passed: 2; Fails: 0; Errors 0) (3.00 ms)


 Let's turn our attention to the end-to-end test.
@@ -156,17 +150,16 @@ __`test/e2e/scenarios.js`:__
 ...
    it('should be possible to control phone order via the drop down select box',
        function() {
-
-      // narrow the dataset to make the test assertions shorter
+      //let's narrow the dataset to make the test assertions shorter
      input('query').enter('tablet');

-      expect(repeater('.phones li', 'Phone List').column('a')).
+      expect(repeater('.phones li', 'Phone List').column('phone.name')).
          toEqual(["Motorola XOOM\u2122 with Wi-Fi",
                   "MOTOROLA XOOM\u2122"]);

-      select('orderProp').option('alphabetical');
+      select('orderProp').option('Alphabetical');

-      expect(repeater('.phones li', 'Phone List').column('a')).
+      expect(repeater('.phones li', 'Phone List').column('phone.name')).
          toEqual(["MOTOROLA XOOM\u2122",
                   "Motorola XOOM\u2122 with Wi-Fi"]);
    });
@@ -183,8 +176,8 @@ Angular's server}.
 # Experiments

 * In the `PhoneListCtrl` controller, remove the statement that sets the `orderProp` value and
-you'll see that the ordering as well as the current selection in the dropdown menu will default to
-"Alphabetical".
+you'll see that Angular will temporarily add a new "unknown" option to the drop-down list and the
+ordering will default to unordered/natural order.

 * Add an `{{orderProp}}` binding into the `index.html` template to display its current value as
 text.
@@ -195,4 +188,4 @@ Now that you have added list sorting and tested the app, go to {@link step_05 st
 about Angular services and how Angular uses dependency injection.


-<ul doc:tutorial-nav="4"></ul>
+<ul doc-tutorial-nav="4"></ul>
@@ -2,16 +2,16 @@
@name Tutorial: 5 - XHRs & Dependency Injection
@description

-<ul doc:tutorial-nav="5"></ul>
+<ul doc-tutorial-nav="5"></ul>


 Enough of building an app with three phones in a hard-coded dataset! Let's fetch a larger dataset
-from our server using one of angular's built-in {@link api/angular.service services} called {@link
-api/angular.service.$xhr $xhr}. We will use angular's {@link guide/dev_guide.di dependency
+from our server using one of angular's built-in {@link api/angular.module.ng services} called {@link
+api/angular.module.ng.$http $http}. We will use angular's {@link guide/dev_guide.di dependency
 injection (DI)} to provide the service to the `PhoneListCtrl` controller.


-<doc:tutorial-instructions step="5"></doc:tutorial-instructions>
+<div doc-tutorial-reset="5"></div>


 You should now see a list of 20 phones.
@@ -42,9 +42,9 @@ Following is a sample of the file:

 ## Controller

-We'll use angular's {@link api/angular.service.$xhr $xhr} service in our controller to make an HTTP
-request to your web server to fetch the data in the `app/phones/phones.json` file. `$xhr` is just
-one of several built-in {@link api/angular.service angular services} that handle common operations
+We'll use angular's {@link api/angular.module.ng.$http $http} service in our controller to make an HTTP
+request to your web server to fetch the data in the `app/phones/phones.json` file. `$http` is just
+one of several built-in {@link api/angular.module.ng angular services} that handle common operations
 in web apps. Angular injects these services for you where you need them.

 Services are managed by angular's {@link guide/dev_guide.di DI subsystem}. Dependency injection
@@ -54,39 +54,42 @@ components themselves, but by the DI subsystem).

 __`app/js/controllers.js:`__
 <pre>
-function PhoneListCtrl($xhr) {
-  var self = this;
-
-  $xhr('GET', 'phones/phones.json', function(code, response) {
-    self.phones = response;
+function PhoneListCtrl($scope, $http) {
+  $http.get('phones/phones.json').success(function(data) {
+    $scope.phones = data;
  });

-  self.orderProp = 'age';
+  $scope.orderProp = 'age';
 }

-//PhoneListCtrl.$inject = ['$xhr'];
+//PhoneListCtrl.$inject = ['$scope', '$http'];
 </pre>

-`$xhr` makes an HTTP GET request to our web server, asking for `phone/phones.json` (the url is
+`$http` makes an HTTP GET request to our web server, asking for `phone/phones.json` (the url is
 relative to our `index.html` file). The server responds by providing the data in the json file.
 (The response might just as well have been dynamically generated by a backend server. To the
 browser and our app they both look the same. For the sake of simplicity we used a json file in this
 tutorial.)

-The `$xhr` service takes a callback as the last argument. This callback is used to process the
-response. We assign the response to the scope controlled by the controller, as a model called
-`phones`. Notice that angular detected the json response and parsed it for us!
+The `$http` service returns a {@link api/angular.module.ng.$q promise object} with a `success`
+method. We call this method to handle the asynchronous response and assign the phone data to the
+scope controlled by this controller, as a model called `phones`. Notice that angular detected the
+json response and parsed it for us!

-To use a service in angular, you simply declare the names of the services you need as arguments to
-the controller's constructor function, as follows:
+To use a service in angular, you simply declare the names of the dependencies you need as arguments
+to the controller's constructor function, as follows:

-    function PhoneListCtrl($xhr) {...}
+    function PhoneListCtrl($scope, $http) {...}

 Angular's dependency injector provides services to your controller when the controller is being
 constructed. The dependency injector also takes care of creating any transitive dependencies the
 service may have (services often depend upon other services).

-<img src="img/tutorial/xhr_service_final.png">
+Note that the names of arguments are significant, because the injector uses these to look up the
+dependencies.
+
+
+<img  class="diagram" src="img/tutorial/xhr_service_final.png">


 ### '$' Prefix Naming Convention
@@ -107,7 +110,16 @@ To overcome issues caused by minification, just assign an array with service ide
 into the `$inject` property of the controller function, just like the last line in the snippet
 (commented out) suggests:

-    PhoneListCtrl.$inject = ['$xhr'];
+    PhoneListCtrl.$inject = ['$scope', '$http'];
+
+There is also one more way to specify this dependency list and avoid minification issues — using the
+bracket notation which wraps the function to be injected into an array of strings (representing the
+dependency names) followed by the function to be injected:
+
+    var PhoneListCtrl = ['$scope', '$http', function($scope, $http) { /* constructor body */ }];
+
+Both of these methods work with any function that can be injected by Angular, so it's up to your
+project's style guide to decide which one you use.


 ## Test
@@ -116,63 +128,73 @@ __`test/unit/controllersSpec.js`:__

 Because we started using dependency injection and our controller has dependencies, constructing the
 controller in our tests is a bit more complicated. We could use the `new` operator and provide the
-constructor with some kind of fake `$xhr` implementation. However, the recommended (and easier) way
+constructor with some kind of fake `$http` implementation. However, the recommended (and easier) way
 is to create a controller in the test environment in the same way that angular does it in the
 production code behind the scenes, as follows:

 <pre>
 describe('PhoneCat controllers', function() {

-  describe('PhoneListCtrl', function() {
-    var scope, $browser, ctrl;
+  describe('PhoneListCtrl', function(){
+    var scope, ctrl, $httpBackend;

-    beforeEach(function() {
-      scope = angular.scope();
-      $browser = scope.$service('$browser');
+    beforeEach(inject(function(_$httpBackend_, $rootScope, $controller) {
+      $httpBackend = _$httpBackend_;
+      $httpBackend.expectGET('phones/phones.json').
+          respond([{name: 'Nexus S'}, {name: 'Motorola DROID'}]);

-      $browser.xhr.expectGET('phones/phones.json')
-          .respond([{name: 'Nexus S'},
-                    {name: 'Motorola DROID'}]);
-      ctrl = scope.$new(PhoneListCtrl);
-    });
-  });
+      scope = $rootScope.$new();
+      ctrl = $controller(PhoneListCtrl, {$scope: scope});
+    }));
 </pre>

+Note: Because we loaded Jasmine and `angular-mocks.js` in our test environment, we got two helper
+methods {@link api/angular.mock.module module} and {@link api/angular.mock.inject inject} that we'll
+use to access and configure the injector.
+
 We created the controller in the test environment, as follows:

-* We created a root scope object by calling `angular.scope()`
+* We used the `inject` helper method to inject instances of
+{@link api/angular.module.ng.$rootScope $rootScope},
+{@link api/angular.module.ng.$controller $controller} and
+{@link api/angular.module.ng.$httpBackend $httpBackend} services into the Jasmine's `beforeEach`
+function. These instances come from an injector which is recreated from scratch for every single
+test. This guarantees that each test starts from a well known starting point and each test is
+isolated from the work done in other tests.

-* We called `scope.$new(PhoneListCtrl)` to get angular to create the child scope associated with
-the `PhoneListCtrl` controller
+* We created a new scope for our controller by calling `$rootScope.$new()`

-Because our code now uses the `$xhr` service to fetch the phone list data in our controller, before
+* We called `scope.$new(PhoneListCtrl)` to get Angular to create the child scope associated with
+the `PhoneListCtrl` controller.
+
+Because our code now uses the `$http` service to fetch the phone list data in our controller, before
 we create the `PhoneListCtrl` child scope, we need to tell the testing harness to expect an
 incoming request from the controller. To do this we:

-* Use the {@link api/angular.scope.$service `$service`} method to retrieve the `$browser` service,
-a service that angular uses to represent various browser APIs. In tests, angular automatically uses
-a mock version of this service that allows you to write tests without having to deal with these
-native APIs and the global state associated with them.
+* Request `$httpBackend` service to be injected into our `beforeEach` function. This is a mock
+mock version of the service that in production environment facilitates all XHR and JSONP requests.
+The mock version of this service allows you to write tests without having to deal with
+native APIs and the global state associated with them — both of which make testing a nightmare.

-* Use the `$browser.xhr.expectGET` method to train the `$browser` object to expect an incoming HTTP
-request and tell it what to respond with. Note that the responses are not returned before we call
-the `$browser.xhr.flush` method.
+* Use the `$httpBackend.expectGET` method to train the `$httpBackend` service to expect an incoming
+HTTP request and tell it what to respond with. Note that the responses are not returned until we call
+the `$httpBackend.flush` method.

 Now, we will make assertions to verify that the `phones` model doesn't exist on the scope, before
 the response is received:

 <pre>
    it('should create "phones" model with 2 phones fetched from xhr', function() {
-      expect(ctrl.phones).toBeUndefined();
-      $browser.xhr.flush();
+      expect(scope.phones).toBeUndefined();
+      $httpBackend.flush();

-      expect(ctrl.phones).toEqual([{name: 'Nexus S'},
+      expect(scope.phones).toEqual([{name: 'Nexus S'},
                                   {name: 'Motorola DROID'}]);
    });
 </pre>

-* We flush the xhr queue in the browser by calling `$browser.xhr.flush()`. This causes the callback
-we passed into the `$xhr` service to be executed with the trained response.
+* We flush the request queue in the browser by calling `$httpBackend.flush()`. This causes the
+promise returned by the `$http` service to be resolved with the trained response.

 * We make the assertions, verifying that the phone model now exists on the scope.

@@ -180,7 +202,7 @@ Finally, we verify that the default value of `orderProp` is set correctly:

 <pre>
    it('should set the default value of orderProp model', function() {
-      expect(ctrl.orderProp).toBe('age');
+      expect(scope.orderProp).toBe('age');
    });
  });
 });
@@ -192,25 +214,25 @@ output.
       Chrome: Runner reset.
       ..
       Total 2 tests (Passed: 2; Fails: 0; Errors: 0) (3.00 ms)
-         Chrome 11.0.696.57 Mac OS: Run 2 tests (Passed: 2; Fails: 0; Errors 0) (3.00 ms)
+         Chrome 19.0.1084.36 Mac OS: Run 2 tests (Passed: 2; Fails: 0; Errors 0) (3.00 ms)


 # Experiments

-* At the bottom of `index.html`, add a `{{phones}}` binding to see the list of phones displayed in
-json format.
+* At the bottom of `index.html`, add a `{{phones | json}}` binding to see the list of phones
+  displayed in json format.

-* In the `PhoneListCtrl` controller, pre-process the xhr response by limiting the number of phones
-to the first 5 in the list. Use the following code in the xhr callback:
+* In the `PhoneListCtrl` controller, pre-process the http response by limiting the number of phones
+to the first 5 in the list. Use the following code in the $http callback:

-         self.phones = response.splice(0, 5);
+         $scope.phones = data.splice(0, 5);


 # Summary

-Now that you have learned how easy it is to use angular services (thanks to angular's
-implementation of dependency injection), go to {@link step_06 step 6}, where you will add some
+Now that you have learned how easy it is to use angular services (thanks to Angular's dependency
+injection), go to {@link step_06 step 6}, where you will add some
 thumbnail images of phones and some links.


-<ul doc:tutorial-nav="5"></ul>
+<ul doc-tutorial-nav="5"></ul>
@@ -2,7 +2,7 @@
@name Tutorial: 6 - Templating Links & Images
@description

-<ul doc:tutorial-nav="6"></ul>
+<ul doc-tutorial-nav="6"></ul>


 In this step, you will add thumbnail images for the phones in the phone list, and links that, for
@@ -10,7 +10,7 @@ now, will go nowhere. In subsequent steps you will use the links to display addi
 about the phones in the catalog.


-<doc:tutorial-instructions step="6"></doc:tutorial-instructions>
+<div doc-tutorial-reset="6"></div>


 You should now see links and images of the phones in the list.
@@ -45,26 +45,27 @@ __`app/phones/phones.json`__ (sample snippet):
 __`app/index.html`:__
 <pre>
 ...
-  <ul class="phones">
-    <li ng:repeat="phone in phones.$filter(query).$orderBy(orderProp)">
-      <a href="#/phones/{{phone.id}}">{{phone.name}}</a>
-      <a href="#/phones/{{phone.id}}" class="thumb"><img ng:src="{{phone.imageUrl}}"></a>
-      <p>{{phone.snippet}}</p>
-    </li>
-  </ul>
+        <ul class="phones">
+          <li ng-repeat="phone in phones | filter:query | orderBy:orderProp" class="thumbnail">
+            <a href="#/phones/{{phone.id}}" class="thumb"><img ng-src="{{phone.imageUrl}}"></a>
+            <a href="#/phones/{{phone.id}}">{{phone.name}}</a>
+            <p>{{phone.snippet}}</p>
+          </li>
+        </ul>
 ...
 </pre>

 To dynamically generate links that will in the future lead to phone detail pages, we used the
-now-familiar {@link guide/dev_guide.compiler.markup double-curly brace markup} in the `href`
-attribute values. In step 2, we added the `{{phone.name}}` binding as the element content. In this
-step the `{{phone.id}}` binding is used in the element attribute.
+now-familiar double-curly brace binding in the `href` attribute values. In step 2, we added the
+`{{phone.name}}` binding as the element content. In this step the `{{phone.id}}` binding is used in
+the element attribute.

 We also added phone images next to each record using an image tag with the {@link
-api/angular.directive.ng:src ng:src} directive. That directive prevents the browser from treating
-the angular `{{ expression }}` markup literally, which it would have done if we had only specified
-an attribute binding in a regular `src` attribute (`<img src="{{phone.imageUrl}}">`). Using
-`ng:src` prevents the browser from making an http request to an invalid location.
+api/angular.module.ng.$compileProvider.directive.ngSrc ngSrc} directive. That directive prevents the
+browser from treating the angular `{{ expression }}` markup literally, and initiating a request to
+invalid url `http://localhost:8000/app/{{phone.imageUrl}}`, which it would have done if we had only
+specified an attribute binding in a regular `src` attribute (`<img  class="diagram" src="{{phone.imageUrl}}">`).
+Using `ngSrc` (`ng-src`) prevents the browser from making an http request to an invalid location.


 ## Test
@@ -75,7 +76,7 @@ __`test/e2e/scenarios.js`__:
    it('should render phone specific links', function() {
      input('query').enter('nexus');
      element('.phones li a').click();
-      expect(browser().location().hash()).toBe('/phones/nexus-s');
+      expect(browser().location().url()).toBe('/phones/nexus-s');
    });
 ...
 </pre>
@@ -90,10 +91,10 @@ angular's server}.

 # Experiments

-* Replace the `ng:src` directive with a plain old `<src>` attribute. Using tools such as Firebug,
+* Replace the `ng-src` directive with a plain old `src` attribute. Using tools such as Firebug,
 or Chrome's Web Inspector, or inspecting the webserver access logs, confirm that the app is indeed
 making an extraneous request to `/app/%7B%7Bphone.imageUrl%7D%7D` (or
-`/app/index.html/{{phone.imageUrl}}`).
+`/app/{{phone.imageUrl}}`).


 # Summary
@@ -102,4 +103,4 @@ Now that you have added phone images and links, go to {@link step_07 step 7} to
 layout templates and how angular makes it easy to create applications that have multiple views.


-<ul doc:tutorial-nav="6"></ul>
+<ul doc-tutorial-nav="6"></ul>
@@ -2,18 +2,19 @@
@name Tutorial: 7 - Routing & Multiple Views
@description

-<ul doc:tutorial-nav="7"></ul>
+<ul doc-tutorial-nav="7"></ul>


 In this step, you will learn how to create a layout template and how to build an app that has
 multiple views by adding routing.


-<doc:tutorial-instructions step="7"></doc:tutorial-instructions>
+<div doc-tutorial-reset="7"></div>


-Note that you are redirected to `app/index.html#/phones` and the same phone list appears in the
-browser. When you click on a phone link the stub of a phone detail page is displayed.
+Note that when you now navigate to `app/index.html`, you are redirected to `app/index.html#/phones`
+and the same phone list appears in the browser. When you click on a phone link the stub of a phone
+detail page is displayed.


 The most important changes are listed below. You can see the full diff on {@link
@@ -34,42 +35,61 @@ template into what we call a "layout template". This is a template that is commo
 our application. Other "partial templates" are then included into this layout template depending on
 the current "route" — the view that is currently displayed to the user.

-Application routes in angular are declared via the {@link api/angular.service.$route $route}
-service. This service makes it easy to wire together controllers, view templates, and the current
+Application routes in angular are declared via the
+{@link api/angular.module.ng.$routeProvider $routeProvider}, which is the provider of the
+{@link api/angular.module.ng.$route $route service}. This service makes it easy to wire together
+controllers, view templates, and the current
 URL location in the browser. Using this feature we can implement {@link
 http://en.wikipedia.org/wiki/Deep_linking deep linking}, which lets us utilize the browser's
 history (back and forward navigation) and bookmarks.


-## Controllers
+### A Note About DI, Injector and Providers

-__`app/js/controller.js`:__
+As you noticed the dependency injection is the core feature of AngularJS, so it's important for you
+to understand a thing or two about how it works.
+
+When the application bootstraps, Angular creates an injector that will be used for all DI stuff in
+this app. The injector itself doesn't know anything about what `$http` or `$route` services do, in
+fact it doesn't even know about the existence of these services unless it is configured with proper
+module definitions. The sole responsibilities of the injector are to load specified module
+definition(s), register all service providers defined in these modules and when asked inject
+a specified function with dependencies (services) that it lazily instantiates via their providers.
+
+Providers are objects that provide (create) instances of services and expose configuration apis
+that can be used to control the creation and runtime behavior of a service. In case of the `$route`
+service, the `$routeProvider` exposes apis that allow you to define routes for your application.
+
+Angular modules solve the problem of removing global state from the application and provide a way
+of configuring the injector. As opposed to AMD or require.js modules, Angular modules don't try to
+solve the problem of script load ordering or lazy script fetching. These goals are orthogonal and
+both module systems can live side by side and fulfil their goals.
+
+## The App Module
+
+__`app/js/app.js`:__
 <pre>
-function PhoneCatCtrl($route) {
-  var self = this;
-
-  $route.when('/phones',
-      {template: 'partials/phone-list.html',   controller: PhoneListCtrl});
-  $route.when('/phones/:phoneId',
-      {template: 'partials/phone-detail.html', controller: PhoneDetailCtrl});
-  $route.otherwise({redirectTo: '/phones'});
-
-  $route.onChange(function() {
-    self.params = $route.current.params;
-  });
-
-  $route.parent(this);
-}
-
-//PhoneCatCtrl.$inject = ['$route'];
-...
+angular.module('phonecat', []).
+  config(['$routeProvider', function($routeProvider) {
+  $routeProvider.
+      when('/phones', {template: 'partials/phone-list.html',   controller: PhoneListCtrl}).
+      when('/phones/:phoneId', {template: 'partials/phone-detail.html', controller: PhoneDetailCtrl}).
+      otherwise({redirectTo: '/phones'});
+}]);
 </pre>

-We created a new controller called `PhoneCatCtrl`. We declared its dependency on the `$route`
-service and used this service to declare that our application consists of two different views:
+In order to configure our application with routes, we need to create a module for our application.
+We call this module `phonecatApp` and using the `config` api we request the `$routeProvider` to be
+injected into our config function and use `$routeProvider.when` api to define our routes.
+
+Note that during the injector configuration phase, the providers can be injected as well, but they
+will not be available for injection once the injector is created and starts creating service
+instances.
+
+Our application routes were defined as follows:

 * The phone list view will be shown when the URL hash fragment is `/phones`. To construct this
-view, angular will use the `phone-list.html` template and the `PhoneListCtrl` controller.
+view, Angular will use the `phone-list.html` template and the `PhoneListCtrl` controller.

 * The phone details view will be shown when the URL hash fragment matches '/phone/:phoneId', where
 `:phoneId` is a variable part of the URL. To construct the phone details view, angular will use the
@@ -81,77 +101,107 @@ empty `PhoneDetailCtrl` controller to the `app/js/controllers.js` file for the p
 The statement `$route.otherwise({redirectTo: '/phones'})` triggers a redirection to `/phones` when
 the browser address doesn't match either of our routes.

-Thanks to the `$route.parent(this);` statement and `ng:controller="PhoneCatCtrl"` declaration in
-the `index.html` template, the `PhoneCatCtrl` controller has a special role in our app. It is the
-"root" controller and the parent controller for the other two sub-controllers (`PhoneListCtrl` and
-`PhoneDetailCtrl`). The sub-controllers inherit the model properties and behavior from the root
-controller.
-
 Note the use of the `:phoneId` parameter in the second route declaration. The `$route` service uses
 the route declaration — `'/phones/:phoneId'` — as a template that is matched against the current
-URL. All variables defined with the `:` notation are extracted into the `$route.current.params` map.
+URL. All variables defined with the `:` notation are extracted into the
+{@link api/angular.module.ng.$routeParams $routeParams} object.

-The `params` alias created in the {@link api/angular.service.$route `$route.onChange`} callback
-allows us to use the `phoneId` property of this map in the `phone-details.html` template.
+
+In order for our application to bootstrap with our newly created module we'll also need to specify
+the module name as the value of the {@link api/angular.module.ng.$compileProvider.directive.ngApp ngApp}
+directive:
+
+__`app/index.html`:__
+<pre>
+<!doctype html>
+<html ng-app="phonecat">
+...
+</pre>
+
+
+## Controllers
+
+__`app/js/controller.js`:__
+<pre>
+...
+function PhoneDetailCtrl($scope, $routeParams) {
+  $scope.phoneId = $routeParams.phoneId;
+}
+
+//PhoneDetailCtrl.$inject = ['$scope', '$routeParams'];
+</pre>


 ## Template

-The `$route` service is usually used in conjunction with the {@link api/angular.widget.ng:view
-ng:view} widget. The role of the `ng:view` widget is to include the view template for the current
+The `$route` service is usually used in conjunction with the {@link api/angular.module.ng.$compileProvider.directive.ngView
+ngView} directive. The role of the `ngView` directive is to include the view template for the current
 route into the layout template, which makes it a perfect fit for our `index.html` template.

 __`app/index.html`:__
 <pre>
+<html ng-app="phonecat">
+<head>
 ...
-<body ng:controller="PhoneCatCtrl">
+  <script src="lib/angular/angular.js"></script>
+  <script src="js/app.js"></script>
+</head>
+<body>

-  <ng:view></ng:view>
+  <div ng-view></div>

-  <script src="lib/angular/angular.js" ng:autobind></script>
-  <script src="js/controllers.js"></script>
 </body>
 </html>
 </pre>

 Note that we removed most of the code in the `index.html` template and replaced it with a single
-line containing the `ng:view` tag. The code that we removed was placed into the `phone-list.html`
-template:
+line containing a div with `ng-view` attribute. The code that we removed was placed into the
+`phone-list.html` template:

 __`app/partials/phone-list.html`:__
 <pre>
-<ul class="predicates">
-  <li>
-    Search: <input type="text" ng:model="query"/>
-  </li>
-  <li>
-    Sort by:
-    <select ng:model="orderProp">
-      <option value="name">Alphabetical</option>
-      <option value="age">Newest</option>
-    </select>
-  </li>
-</ul>
+<div class="container-fluid">
+  <div class="row-fluid">
+    <div class="span2">
+      <!--Sidebar content-->

-<ul class="phones">
-  <li ng:repeat="phone in phones.$filter(query).$orderBy(orderProp)">
-    <a href="#/phones/{{phone.id}}">{{phone.name}}</a>
-    <a href="#/phones/{{phone.id}}" class="thumb"><img ng:src="{{phone.imageUrl}}"></a>
-    <p>{{phone.snippet}}</p>
-  </li>
-</ul>
+      Search: <input ng-model="query">
+      Sort by:
+      <select ng-model="orderProp">
+        <option value="name">Alphabetical</option>
+        <option value="age">Newest</option>
+      </select>
+
+    </div>
+    <div class="span10">
+      <!--Body content-->
+
+      <ul class="phones">
+        <li ng-repeat="phone in phones | filter:query | orderBy:orderProp" class="thumbnail">
+          <a href="#/phones/{{phone.id}}" class="thumb"><img ng-src="{{phone.imageUrl}}"></a>
+          <a href="#/phones/{{phone.id}}">{{phone.name}}</a>
+          <p>{{phone.snippet}}</p>
+        </li>
+      </ul>
+
+    </div>
+  </div>
+</div>
 </pre>

-<img src="img/tutorial/tutorial_07_final.png">
+<div style="display:none">
+TODO!
+<img  class="diagram" src="img/tutorial/tutorial_07_final.png">
+</div>

 We also added a placeholder template for the phone details view:

 __`app/partials/phone-detail.html`:__
 <pre>
-TBD: detail view for {{params.phoneId}}
+TBD: detail view for {{phoneId}}
 </pre>

-Note how we are using `params` model defined in the `PhoneCatCtrl` controller.
+Note how we are using `phoneId` model defined in the `PhoneDetailCtrl` controller.


 ## Test
@@ -162,21 +212,21 @@ to various URLs and verify that the correct view was rendered.
 <pre>
 ...
  it('should redirect index.html to index.html#/phones', function() {
-   browser().navigateTo('../../app/index.html');
-   expect(browser().location().hash()).toBe('/phones');
+    browser().navigateTo('../../app/index.html');
+    expect(browser().location().url()).toBe('/phones');
  });
 ...

 describe('Phone detail view', function() {

-   beforeEach(function() {
+    beforeEach(function() {
      browser().navigateTo('../../app/index.html#/phones/nexus-s');
-   });
+    });


-   it('should display placeholder page with phoneId', function() {
-      expect(binding('params.phoneId')).toBe('nexus-s');
-   });
+    it('should display placeholder page with phoneId', function() {
+      expect(binding('phoneId')).toBe('nexus-s');
+    });
 });
 </pre>

@@ -191,14 +241,16 @@ angular's server}.

 * Try to add an `{{orderProp}}` binding to `index.html`, and you'll see that nothing happens even
 when you are in the phone list view. This is because the `orderProp` model is visible only in the
-scope managed by `PhoneListCtrl`, which is associated with the `<ng:view>` element. If you add the
-same binding into the `phone-list.html` template, the binding will work as expected.
+scope managed by `PhoneListCtrl`, which is associated with the `<div ng-view>` element. If you add
+the same binding into the `phone-list.html` template, the binding will work as expected.

+<div style="display: none">
 * In `PhoneCatCtrl`, create a new model called "`hero`" with `this.hero = 'Zoro'`. In
 `PhoneListCtrl` let's shadow it with `this.hero = 'Batman'`, and in `PhoneDetailCtrl` we'll use
 `this.hero = "Captain Proton"`. Then add the `<p>hero = {{hero}}</p>` to all three of our templates
 (`index.html`, `phone-list.html`, and `phone-detail.html`). Open the app and you'll see scope
 inheritance and model property shadowing do some wonders.
+</div>

 # Summary

@@ -206,4 +258,4 @@ With the routing set up and the phone list view implemented, we're ready to go t
 step 8} to implement the phone details view.


-<ul doc:tutorial-nav="7"></ul>
+<ul doc-tutorial-nav="7"></ul>
@@ -2,21 +2,21 @@
@name Tutorial: 8 - More Templating
@description

-<ul doc:tutorial-nav="8"></ul>
+<ul doc-tutorial-nav="8"></ul>


 In this step, you will implement the phone details view, which is displayed when a user clicks on a
 phone in the phone list.


-<doc:tutorial-instructions step="8"></doc:tutorial-instructions>
+<div doc-tutorial-reset="8"></div>


 Now when you click on a phone on the list, the phone details page with phone-specific information
 is displayed.

-To implement the phone details view we will use {@link api/angular.service.$xhr $xhr} to fetch our
-data, and we'll flesh out the `phone-details.html` view template.
+To implement the phone details view we will use {@link api/angular.module.ng.$http $http} to fetch
+our data, and we'll flesh out the `phone-details.html` view template.

 The most important changes are listed below. You can see the full diff on {@link
 https://github.com/angular/angular-phonecat/compare/step-7...step-8
@@ -56,44 +56,42 @@ show this data in the phone detail view.

 ## Controller

-We'll expand the `PhoneDetailCtrl` by using the `$xhr` service to fetch the json files. This works
+We'll expand the `PhoneDetailCtrl` by using the `$http` service to fetch the json files. This works
 the same way as the phone list controller.

 __`app/js/controller.js`:__
 <pre>
-function PhoneDetailCtrl($xhr) {
-  var self = this;
-
-  $xhr('GET', 'phones/' + self.params.phoneId + '.json', function(code, response) {
-    self.phone = response;
+function PhoneDetailCtrl($scope, $routeParams, $http) {
+  $http.get('phones/' + $routeParams.phoneId + '.json').success(function(data) {
+    $scope.phone = data;
  });
 }

-//PhoneDetailCtrl.$inject = ['$xhr'];
+//PhoneDetailCtrl.$inject = ['$scope', '$routeParams', '$http'];
 </pre>

-To construct the URL for the HTTP request, we use `params.phoneId` extracted from the current route
-in the `PhoneCatCtrl` controller.
+To construct the URL for the HTTP request, we use `$routeParams.phoneId` extracted from the current
+route by the `$route` service.


 ## Template

 The TBD placeholder line has been replaced with lists and bindings that comprise the phone details.
-Note where we use the angular `{{expression}}` markup and `ng:repeater`s to project phone data from
+Note where we use the angular `{{expression}}` markup and `ngRepeater`s to project phone data from
 our model into the view.


 __`app/partials/phone-details.html`:__
 <pre>
-<img ng:src="{{phone.images[0]}}" class="phone"/>
+<img ng-src="{{phone.images[0]}}" class="phone">

 <h1>{{phone.name}}</h1>

 <p>{{phone.description}}</p>

 <ul class="phone-thumbs">
-  <li ng:repeat="img in phone.images">
-    <img ng:src="{{img}}"/>
+  <li ng-repeat="img in phone.images">
+    <img ng-src="{{img}}">
  </li>
 </ul>

@@ -102,7 +100,7 @@ __`app/partials/phone-details.html`:__
    <span>Availability and Networks</span>
    <dl>
      <dt>Availability</dt>
-      <dd ng:repeat="availability in phone.availability">{{availability}}</dd>
+      <dd ng-repeat="availability in phone.availability">{{availability}}</dd>
    </dl>
  </li>
    ...
@@ -113,7 +111,10 @@ __`app/partials/phone-details.html`:__
 </ul>
 </pre>

-<img src="img/tutorial/tutorial_08-09_final.png">
+<div style="display: none">
+TODO!
+<img  class="diagram" src="img/tutorial/tutorial_08-09_final.png">
+</div>

 ## Test

@@ -123,16 +124,26 @@ step 5.
 __`test/unit/controllerSpec.js`:__
 <pre>
 ...
+  describe('PhoneDetailCtrl', function(){
+    var scope, $httpBackend, ctrl;
+
+    beforeEach(inject(function(_$httpBackend_, $rootScope, $routeParams, $controller) {
+      $httpBackend = _$httpBackend_;
+      $httpBackend.expectGET('phones/xyz.json').respond({name:'phone xyz'});
+
+      $routeParams.phoneId = 'xyz';
+      scope = $rootScope.$new();
+      ctrl = $controller(PhoneDetailCtrl, {$scope: scope});
+    }));
+
+
    it('should fetch phone detail', function() {
-      scope.params = {phoneId:'xyz'};
-      $browser.xhr.expectGET('phones/xyz.json').respond({name:'phone xyz'});
-      ctrl = scope.$new(PhoneDetailCtrl);
+      expect(scope.phone).toBeUndefined();
+      $httpBackend.flush();

-      expect(ctrl.phone).toBeUndefined();
-      $browser.xhr.flush();
-
-      expect(ctrl.phone).toEqual({name:'phone xyz'});
+      expect(scope.phone).toEqual({name:'phone xyz'});
    });
+  });
 ...
 </pre>

@@ -142,7 +153,7 @@ output.
    Chrome: Runner reset.
    ...
    Total 3 tests (Passed: 3; Fails: 0; Errors: 0) (5.00 ms)
-      Chrome 11.0.696.57 Mac OS: Run 3 tests (Passed: 3; Fails: 0; Errors 0) (5.00 ms)
+      Chrome 19.0.1084.36 Mac OS: Run 3 tests (Passed: 3; Fails: 0; Errors 0) (5.00 ms)


 We also added a new end-to-end test that navigates to the Nexus S detail page and verifies that the
@@ -173,10 +184,8 @@ angular's server}.

 # Experiments

-* Using the {@link
-https://docs.google.com/document/d/11L8htLKrh6c92foV71ytYpiKkeKpM4_a5-9c3HywfIc/edit?hl=en&pli=1#
-end-to-end test runner API}, write a test that verifies that we display 4 thumbnail images on the
-Nexus S details page.
+* Using the {@link guide/dev_guide.e2e-testing Angular's end-to-end test runner API}, write a test
+that verifies that we display 4 thumbnail images on the Nexus S details page.


 # Summary
@@ -185,4 +194,4 @@ Now that the phone details view is in place, proceed to {@link step_09 step 9} t
 write your own custom display filter.


-<ul doc:tutorial-nav="8"></ul>
+<ul doc-tutorial-nav="8"></ul>
@@ -2,13 +2,13 @@
@name Tutorial: 9 - Filters
@description

-<ul doc:tutorial-nav="9"></ul>
+<ul doc-tutorial-nav="9"></ul>


 In this step you will learn how to create your own custom display filter.


-<doc:tutorial-instructions step="9"></doc:tutorial-instructions>
+<div doc-tutorial-reset="9"></div>


 Navigate to one of the detail pages.
@@ -24,13 +24,15 @@ GitHub}:

 ## Custom Filter

-In order to create a new filter, simply register your custom filter function with the {@link
-api/angular.filter `angular.filter`} API.
+In order to create a new filter, you are going to create a `phonecatFilters` module and register
+your custom filter with this module:

 __`app/js/filters.js`:__
 <pre>
-angular.filter('checkmark', function(input) {
-  return input ? '\u2713' : '\u2718';
+angular.module('phonecatFilters', []).filter('checkmark', function() {
+  return function(input) {
+    return input ? '\u2713' : '\u2718';
+  };
 });
 </pre>

@@ -38,6 +40,16 @@ The name of our filter is "checkmark". The `input` evaluates to either `true` or
 return one of two unicode characters we have chosen to represent true or false (`\u2713` and
 `\u2718`).

+Now that our filter is ready, we need to register the `phonecatFilters` module as a dependency for
+our main `phonecat` module.
+
+__`app/js/app.js`:__
+<pre>
+...
+angular.module('phonecat', ['phonecatFilters']).
+...
+</pre>
+

 ## Template

@@ -79,27 +91,37 @@ Filters, like any other component, should be tested and these tests are very eas

 __`test/unit/filtersSpec.js`:__
 <pre>
-describe('checkmark filter', function() {
+describe('filter', function() {

-  it('should convert boolean values to unicode checkmark or cross', function() {
-    expect(angular.filter.checkmark(true)).toBe('\u2713');
-    expect(angular.filter.checkmark(false)).toBe('\u2718');
+  beforeEach(module('phonecatFilters'));
+
+
+  describe('checkmark', function() {
+
+    it('should convert boolean values to unicode checkmark or cross',
+        inject(function(checkmarkFilter) {
+      expect(checkmarkFilter(true)).toBe('\u2713');
+      expect(checkmarkFilter(false)).toBe('\u2718');
+    }));
  });
-})
+});
 </pre>

+Note that you need to configure our test injector with the `phonecatFilters` module before any of
+our filter tests execute.
+
 To run the unit tests, execute the `./scripts/test.sh` script and you should see the following
 output.

        Chrome: Runner reset.
        ....
        Total 4 tests (Passed: 4; Fails: 0; Errors: 0) (3.00 ms)
-          Chrome 11.0.696.57 Mac OS: Run 4 tests (Passed: 4; Fails: 0; Errors 0) (3.00 ms)
+          Chrome 19.0.1084.36 Mac OS: Run 4 tests (Passed: 4; Fails: 0; Errors 0) (3.00 ms)


 # Experiments

-* Let's experiment with some of the {@link api/angular.filter built-in angular filters} and add the
+* Let's experiment with some of the {@link api/angular.module.ng.$filter built-in angular filters} and add the
 following bindings to `index.html`:
  * `{{ "lower cap string" | uppercase }}`
  * `{{ {foo: "bar", baz: 23} | json }}`
@@ -109,7 +131,7 @@ following bindings to `index.html`:
 *  We can also create a model with an input element, and combine it with a filtered binding. Add
 the following to index.html:

-        <input ng:model="userInput"> Uppercased: {{ userInput | uppercase }}
+        <input ng-model="userInput"> Uppercased: {{ userInput | uppercase }}


 # Summary
@@ -118,4 +140,4 @@ Now that you have learned how to write and test a custom filter, go to {@link st
 learn how we can use angular to enhance the phone details page further.


-<ul doc:tutorial-nav="9"></ul>
+<ul doc-tutorial-nav="9"></ul>
@@ -2,13 +2,13 @@
@name Tutorial: 10 - Event Handlers
@description

-<ul doc:tutorial-nav="10"></ul>
+<ul doc-tutorial-nav="10"></ul>


 In this step, you will add a clickable phone image swapper to the phone details page.


-<doc:tutorial-instructions step="10"></doc:tutorial-instructions>
+<div doc-tutorial-reset="10"></div>


 The phone details view displays one large image of the current phone and several smaller thumbnail
@@ -25,52 +25,53 @@ GitHub}:
 __`app/js/controllers.js`:__
 <pre>
 ...
-function PhoneDetailCtrl($xhr) {
-  var self = this;
-
-  $xhr('GET', 'phones/' + self.params.phoneId + '.json', function(code, response) {
-    self.phone = response;
-    self.mainImageUrl = response.images[0];
+function PhoneDetailCtrl($scope, $routeParams, $http) {
+  $http.get('phones/' + $routeParams.phoneId + '.json').success(function(data) {
+    $scope.phone = data;
+    $scope.mainImageUrl = data.images[0];
  });

-  self.setImage = function(imageUrl) {
-    self.mainImageUrl = imageUrl;
+  $scope.setImage = function(imageUrl) {
+    $scope.mainImageUrl = imageUrl;
  }
 }

-//PhoneDetailCtrl.$inject = ['$xhr'];
+//PhoneDetailCtrl.$inject = ['$scope', '$routeParams', '$http'];
 </pre>

 In the `PhoneDetailCtrl` controller, we created the `mainImageUrl` model property and set its
 default value to the first phone image url.

-We also created a `setImage` controller method to change the value of `mainImageUrl`.
+We also created a `setImage` event handler function that will change the value of `mainImageUrl`.


 ## Template

 __`app/partials/phone-detail.html`:__
 <pre>
-<img ng:src="{{mainImageUrl}}" class="phone"/>
+<img ng-src="{{mainImageUrl}}" class="phone">

 ...

 <ul class="phone-thumbs">
-  <li ng:repeat="img in phone.images">
-    <img ng:src="{{img}}" ng:click="setImage(img)">
+  <li ng-repeat="img in phone.images">
+    <img ng-src="{{img}}" ng-click="setImage(img)">
  </li>
 </ul>
 ...
 </pre>

-We bound the `ng:src` attribute of the large image to the `mainImageUrl` property.
+We bound the `ngSrc` directive of the large image to the `mainImageUrl` property.

-We also registered an {@link api/angular.directive.ng:click `ng:click`} handler with thumbnail
-images. When a user clicks on one of the thumbnail images, the handler will use the `setImage`
-controller method to change the value of the `mainImageUrl` property to the url of the thumbnail
-image.
+We also registered an {@link api/angular.module.ng.$compileProvider.directive.ngClick `ngClick`}
+handler with thumbnail images. When a user clicks on one of the thumbnail images, the handler will
+use the `setImage` event handler function to change the value of the `mainImageUrl` property to the
+url of the thumbnail image.

-<img src="img/tutorial/tutorial_10-11_final.png">
+<div style="display: none">
+TODO!
+<img  class="diagram" src="img/tutorial/tutorial_10-11_final.png">
+</div>

 ## Test

@@ -83,13 +84,10 @@ __`test/e2e/scenarios.js`:__
 ...
  describe('Phone detail view', function() {

-    beforeEach(function() {
-      browser().navigateTo('../../app/index.html#/phones/nexus-s');
-    });
-
+...

    it('should display the first phone image as the main phone image', function() {
-       expect(element('img.phone').attr('src')).toBe('img/phones/nexus-s.0.jpg');
+      expect(element('img.phone').attr('src')).toBe('img/phones/nexus-s.0.jpg');
    });


@@ -111,24 +109,27 @@ angular's server}.

 # Experiments

-* Let's add a new controller method to `PhoneCatCtrl`:
+* Let's add a new controller method to `PhoneDetailCtrl`:

-          this.hello = function(name) {
+          $scope.hello = function(name) {
              alert('Hello ' + (name || 'world') + '!');
          }

  and add:

-          <button ng:click="hello('Elmo')">Hello</button>
+          <button ng-click="hello('Elmo')">Hello</button>

-  to the `index.html` template.
+  to the `phone-details.html` template.

+<div style="display: none">
+TODO!
  The controller methods are inherited between controllers/scopes, so you can use the same snippet
 in the `phone-list.html` template as well.

 * Move the `hello` method from `PhoneCatCtrl` to `PhoneListCtrl` and you'll see that the button
 declared in `index.html` will stop working, while the one declared in the `phone-list.html`
 template remains operational.
+</div>


 # Summary
@@ -137,4 +138,4 @@ With the phone image swapper in place, we're ready for {@link step_11 step 11} (
 learn an even better way to fetch data.


-<ul doc:tutorial-nav="10"></ul>
+<ul doc-tutorial-nav="10"></ul>
@@ -2,19 +2,19 @@
@name Tutorial: 11 - REST and Custom Services
@description

-<ul doc:tutorial-nav="11"></ul>
+<ul doc-tutorial-nav="11"></ul>


 In this step, you will improve the way our app fetches data.


-<doc:tutorial-instructions step="11"></doc:tutorial-instructions>
+<div doc-tutorial-reset="11"></div>


 The last improvement we will make to our app is to define a custom service that represents a {@link
 http://en.wikipedia.org/wiki/Representational_State_Transfer RESTful} client. Using this client we
 can make xhr requests for data in an easier way, without having to deal with the lower-level {@link
-api/angular.service.$xhr $xhr} API, HTTP methods and URLs.
+api/angular.module.ng.$http $http} API, HTTP methods and URLs.

 The most important changes are listed below. You can see the full diff on {@link
 https://github.com/angular/angular-phonecat/compare/step-10...step-11
@@ -24,12 +24,14 @@ GitHub}:
 ## Template

 The custom service is defined in `app/js/services.js` so we need to include this file in our layout
-template:
+template. Additionally, we also need to load the `angular-resource.js` file, which contains the
+`ngResource` module and in it the `$resource` service, that we'll soon use:

 __`app/index.html`.__
 <pre>
 ...
  <script src="js/services.js"></script>
+  <script src="lib/angular/angular-resource.js"></script>
 ...
 </pre>

@@ -37,64 +39,68 @@ __`app/index.html`.__

 __`app/js/services.js`.__
 <pre>
- angular.service('Phone', function($resource) {
+angular.module('phonecatServices', ['ngResource']).
+    factory('Phone', function($resource){
  return $resource('phones/:phoneId.json', {}, {
-    query: {method: 'GET', params: {phoneId: 'phones'}, isArray: true}
+    query: {method:'GET', params:{phoneId:'phones'}, isArray:true}
  });
- });
+});
 </pre>

-We used the {@link api/angular.service} API to register a custom service. We passed in the name of
-the service - 'Phone' - and a factory function. The factory function is similar to a controller's
-constructor in that both can declare dependencies via function arguments. The Phone service
-declared a dependency on the `$resource` service.
+We used the module API to register a custom service using a factory function. We passed in the name
+of the service - 'Phone' - and the factory function. The factory function is similar to a
+controller's constructor in that both can declare dependencies via function arguments. The Phone
+service declared a dependency on the `$resource` service.

-The {@link api/angular.service.$resource `$resource`} service makes it easy to create a {@link
-http://en.wikipedia.org/wiki/Representational_State_Transfer RESTful} client with just a few lines
-of code. This client can then be used in our application, instead of the lower-level {@link
-api/angular.service.$xhr $xhr} service.
+The {@link api/angular.module.ngResource.$resource `$resource`} service makes it easy to create a
+{@link http://en.wikipedia.org/wiki/Representational_State_Transfer RESTful} client with just a few
+lines of code. This client can then be used in our application, instead of the lower-level {@link
+api/angular.module.ng.$http $http} service.


 ## Controller

 We simplified our sub-controllers (`PhoneListCtrl` and `PhoneDetailCtrl`) by factoring out the
-lower-level {@link api/angular.service.$xhr $xhr} service, replacing it with a new service called
-`Phone`. Angular's {@link api/angular.service.$resource `$resource`} service is easier to use than
-{@link api/angular.service.$xhr $xhr} for interacting with data sources exposed as RESTful
-resources. It is also easier now to understand what the code in our controllers is doing.
+lower-level {@link api/angular.module.ng.$http $http} service, replacing it with a new service called
+`Phone`. Angular's {@link api/angular.module.ngResource.$resource `$resource`} service is easier to
+use than `$http for interacting with data sources exposed as RESTful resources. It is also easier
+now to understand what the code in our controllers is doing.

 __`app/js/controllers.js`.__
 <pre>
 ...

-function PhoneListCtrl(Phone) {
-  this.orderProp = 'age';
-  this.phones = Phone.query();
+function PhoneListCtrl($scope, Phone) {
+  $scope.phones = Phone.query();
+  $scope.orderProp = 'age';
 }
-//PhoneListCtrl.$inject = ['Phone'];
+
+//PhoneListCtrl.$inject = ['$scope', 'Phone'];


-function PhoneDetailCtrl(Phone) {
-  var self = this;

-  self.phone = Phone.get({phoneId: self.params.phoneId}, function(phone) {
-    self.mainImageUrl = phone.images[0];
+function PhoneDetailCtrl($scope, $routeParams, Phone) {
+  $scope.phone = Phone.get({phoneId: $routeParams.phoneId}, function(phone) {
+    $scope.mainImageUrl = phone.images[0];
  });

-  ...
+  $scope.setImage = function(imageUrl) {
+    $scope.mainImageUrl = imageUrl;
+  }
 }
-//PhoneDetailCtrl.$inject = ['Phone'];
+
+//PhoneDetailCtrl.$inject = ['$scope', '$routeParams', 'Phone'];
 </pre>

 Notice how in `PhoneListCtrl` we replaced:

-    $xhr('GET', 'phones/phones.json', function(code, response) {
-      self.phones = response;
+    $http.get('phones/phones.json').success(function(data) {
+      $scope.phones = data;
    });

 with:

-    this.phones = Phone.query();
+    $scope.phones = Phone.query();

 This is a simple statement that we want to query for all phones.

@@ -116,10 +122,10 @@ We have modified our unit tests to verify that our new service is issuing HTTP r
 processing them as expected. The tests also check that our controllers are interacting with the
 service correctly.

-The {@link api/angular.service.$resource $resource} service augments the response object with
-methods for updating and deleting the resource. If we were to use the standard `toEqual` matcher,
-our tests would fail because the test values would not match the responses exactly. To solve the
-problem, we use a newly-defined `toEqualData` {@link
+The {@link api/angular.module.ngResource.$resource $resource} service augments the response object
+with methods for updating and deleting the resource. If we were to use the standard `toEqual`
+matcher, our tests would fail because the test values would not match the responses exactly. To
+solve the problem, we use a newly-defined `toEqualData` {@link
 http://pivotal.github.com/jasmine/jsdoc/symbols/jasmine.Matchers.html Jasmine matcher}. When the
 `toEqualData` matcher compares two objects, it takes only object properties into account and
 ignores methods.
@@ -129,7 +135,7 @@ __`test/unit/controllersSpec.js`:__
 <pre>
 describe('PhoneCat controllers', function() {

-  beforeEach(function() {
+  beforeEach(function(){
    this.addMatchers({
      toEqualData: function(expected) {
        return angular.equals(this.actual, expected);
@@ -137,54 +143,63 @@ describe('PhoneCat controllers', function() {
    });
  });

-  describe('PhoneListCtrl', function() {
-    var scope, $browser, ctrl;

-    beforeEach(function() {
-      scope = angular.scope();
-      $browser = scope.$service('$browser');
+  beforeEach(module('phonecatServices'));
+
+
+  describe('PhoneListCtrl', function(){
+    var scope, ctrl, $httpBackend;
+
+    beforeEach(inject(function(_$httpBackend_, $rootScope, $controller) {
+      $httpBackend = _$httpBackend_;
+      $httpBackend.expectGET('phones/phones.json').
+          respond([{name: 'Nexus S'}, {name: 'Motorola DROID'}]);
+
+      scope = $rootScope.$new();
+      ctrl = $controller(PhoneListCtrl, {$scope: scope});
+    }));

-      $browser.xhr.expectGET('phones/phones.json')
-          .respond([{name: 'Nexus S'}, {name: 'Motorola DROID'}]);
-      ctrl = scope.$new(PhoneListCtrl);
-    });

    it('should create "phones" model with 2 phones fetched from xhr', function() {
-      expect(ctrl.phones).toEqual([]);
-      $browser.xhr.flush();
+      expect(scope.phones).toEqual([]);
+      $httpBackend.flush();

-      expect(ctrl.phones).toEqualData([{name: 'Nexus S'},
-                                       {name: 'Motorola DROID'}]);
+      expect(scope.phones).toEqualData(
+          [{name: 'Nexus S'}, {name: 'Motorola DROID'}]);
    });

+
    it('should set the default value of orderProp model', function() {
-      expect(ctrl.orderProp).toBe('age');
+      expect(scope.orderProp).toBe('age');
    });
  });


-  describe('PhoneDetailCtrl', function() {
-    var scope, $browser, ctrl;
+  describe('PhoneDetailCtrl', function(){
+    var scope, $httpBackend, ctrl,
+        xyzPhoneData = function() {
+          return {
+            name: 'phone xyz',
+                images: ['image/url1.png', 'image/url2.png']
+          }
+        };

-    beforeEach(function() {
-      scope = angular.scope();
-      $browser = scope.$service('$browser');
-    });

-    beforeEach(function() {
-      scope = angular.scope();
-      $browser = scope.$service('$browser');
-    });
+    beforeEach(inject(function(_$httpBackend_, $rootScope, $routeParams, $controller) {
+      $httpBackend = _$httpBackend_;
+      $httpBackend.expectGET('phones/xyz.json').respond(xyzPhoneData());
+
+      $routeParams.phoneId = 'xyz';
+      scope = $rootScope.$new();
+      ctrl = $controller(PhoneDetailCtrl, {$scope: scope});
+    }));
+

    it('should fetch phone detail', function() {
-      scope.params = {phoneId:'xyz'};
-      $browser.xhr.expectGET('phones/xyz.json').respond({name:'phone xyz'});
-      ctrl = scope.$new(PhoneDetailCtrl);
+      expect(scope.phone).toEqualData({});
+      $httpBackend.flush();

-      expect(ctrl.phone).toEqualData({});
-      $browser.xhr.flush();
-
-      expect(ctrl.phone).toEqualData({name:'phone xyz'});
+      expect(scope.phone).toEqualData(xyzPhoneData());
    });
  });
 });
@@ -196,7 +211,7 @@ output.
    Chrome: Runner reset.
    ....
    Total 4 tests (Passed: 4; Fails: 0; Errors: 0) (3.00 ms)
-      Chrome 11.0.696.57 Mac OS: Run 4 tests (Passed: 4; Fails: 0; Errors 0) (3.00 ms)
+      Chrome 19.0.1084.36 Mac OS: Run 4 tests (Passed: 4; Fails: 0; Errors 0) (3.00 ms)


 # Summary
@@ -205,4 +220,4 @@ There you have it!  We have created a web app in a relatively short amount of ti
 the_end closing notes} we'll cover were to go from here.


-<ul doc:tutorial-nav="11"></ul>
+<ul doc-tutorial-nav="11"></ul>
@@ -1,2 +0,0 @@
-controller: {{name}}<br />
-Book Id: {{params.bookId}}<br />
@@ -1,3 +0,0 @@
-controller: {{name}}<br />
-Book Id: {{prams.bookId}}<br />
-Chapter Id: {{params.chapterId}}
@@ -1 +0,0 @@
-Content of template1.html
@@ -1 +0,0 @@
-Content of template2.html
@@ -1,18 +0,0 @@
-<label>Name:</label>
-<input type="text" ng:model="form.name" required>
-
-<div ng:repeat="contact in form.contacts">
-  <select ng:model="contact.type">
-    <option>url</option>
-    <option>email</option>
-    <option>phone</option>
-  </select>
-  <input type="text" ng:model="contact.url">
-  [ <a href="" ng:click="form.contacts.$remove(contact)">X</a> ]
-</div>
-<div>
-  [ <a href="" ng:click="form.contacts.$add()">add</a> ]
-</div>
-
-<button ng:click="cancel()">Cancel</button>
-<button ng:click="save()">Save</button>
@@ -1,5 +0,0 @@
-Hello {{person.name}},
-<div>
- Your contact information:
- <div ng:repeat="contact in person.contacts">{{contact.type}}: {{contact.url|linky}}</div>
-</div>
--- a/Show More
+++ b/Show More