From 0de150af4c29987f3bd0531f549ed4b9fd4e3bb0 Mon Sep 17 00:00:00 2001
From: Peter Bacon Darwin <pete@bacondarwin.com>
Date: Wed, 27 Jul 2016 18:30:35 +0100
Subject: [PATCH] docs(examples): give all examples a name

---
 docs/content/error/ngModel/numfmt.ngdoc |  2 +-
 docs/content/guide/$location.ngdoc      |  2 +-
 docs/content/guide/accessibility.ngdoc  |  4 ++--
 docs/content/guide/animations.ngdoc     |  4 ++--
 docs/content/guide/compiler.ngdoc       |  2 +-
 docs/content/guide/component.ngdoc      |  2 +-
 docs/content/guide/controller.ngdoc     |  6 ++---
 docs/content/guide/directive.ngdoc      | 28 +++++++++++------------
 docs/content/guide/expression.ngdoc     | 10 ++++-----
 docs/content/guide/filter.ngdoc         |  6 ++---
 docs/content/guide/forms.ngdoc          | 16 ++++++-------
 docs/content/guide/module.ngdoc         |  4 ++--
 docs/content/guide/scope.ngdoc          |  8 +++----
 docs/content/guide/services.ngdoc       |  2 +-
 src/Angular.js                          |  6 ++---
 src/ng/anchorScroll.js                  |  4 ++--
 src/ng/cacheFactory.js                  |  2 +-
 src/ng/compile.js                       |  2 +-
 src/ng/directive/attrs.js               | 12 +++++-----
 src/ng/directive/form.js                |  2 +-
 src/ng/directive/ngBind.js              |  6 ++---
 src/ng/directive/ngClass.js             |  8 +++----
 src/ng/directive/ngCloak.js             |  2 +-
 src/ng/directive/ngEventDirs.js         | 30 ++++++++++++-------------
 src/ng/directive/ngIf.js                |  2 +-
 src/ng/directive/ngInclude.js           |  2 +-
 src/ng/directive/ngInit.js              |  2 +-
 src/ng/directive/ngModel.js             |  2 +-
 src/ng/directive/ngNonBindable.js       |  2 +-
 src/ng/directive/ngOptions.js           |  2 +-
 src/ng/directive/ngPluralize.js         |  2 +-
 src/ng/directive/ngRepeat.js            |  2 +-
 src/ng/directive/ngShowHide.js          |  4 ++--
 src/ng/directive/ngStyle.js             |  2 +-
 src/ng/directive/ngSwitch.js            |  2 +-
 src/ng/directive/ngTransclude.js        |  2 +-
 src/ng/directive/script.js              |  2 +-
 src/ng/document.js                      |  2 +-
 src/ng/filter/filter.js                 |  2 +-
 src/ng/filter/filters.js                |  8 +++----
 src/ng/filter/limitTo.js                |  2 +-
 src/ng/http.js                          |  2 +-
 src/ng/interpolate.js                   |  2 +-
 src/ng/interval.js                      |  2 +-
 src/ng/log.js                           |  2 +-
 src/ng/sce.js                           |  2 +-
 src/ng/window.js                        |  2 +-
 src/ngSanitize/filter/linky.js          |  2 +-
 src/ngSanitize/sanitize.js              |  2 +-
 src/ngTouch/directive/ngClick.js        |  2 +-
 src/ngTouch/directive/ngSwipe.js        |  4 ++--
 51 files changed, 117 insertions(+), 117 deletions(-)

diff --git a/docs/content/error/ngModel/numfmt.ngdoc b/docs/content/error/ngModel/numfmt.ngdoc
index 3451d26fdf84..d59248f79393 100644
--- a/docs/content/error/ngModel/numfmt.ngdoc
+++ b/docs/content/error/ngModel/numfmt.ngdoc
@@ -20,7 +20,7 @@ In this example, our model stores the number as a string, so we provide the `str
 directive to convert it into the format the `input[number]` directive expects.
 
 
-<example module="numfmt-error-module">
+<example module="numfmt-error-module" name="number-format-error">
  <file name="index.html">
   <table>
     <tr ng-repeat="x in ['0', '1']">
diff --git a/docs/content/guide/$location.ngdoc b/docs/content/guide/$location.ngdoc
index 51b3cb4a2ed4..cc41d81c92a5 100644
--- a/docs/content/guide/$location.ngdoc
+++ b/docs/content/guide/$location.ngdoc
@@ -834,7 +834,7 @@ then uses the information it obtains to compose hashbang URLs (such as
 Because `$location` uses getters/setters, you can use `ng-model-options="{ getterSetter: true }"`
 to bind it to `ngModel`:
 
-<example module="locationExample">
+<example module="locationExample" name="location-two-way-binding">
 <file name="index.html">
 <div ng-controller="LocationController">
   <input type="text" ng-model="locationPath" ng-model-options="{ getterSetter: true }" />
diff --git a/docs/content/guide/accessibility.ngdoc b/docs/content/guide/accessibility.ngdoc
index 2e85d616f55a..411492060502 100644
--- a/docs/content/guide/accessibility.ngdoc
+++ b/docs/content/guide/accessibility.ngdoc
@@ -62,7 +62,7 @@ attributes (if they have not been explicitly specified by the developer):
 
 ### Example
 
-<example module="ngAria_ngModelExample" deps="angular-aria.js">
+<example module="ngAria_ngModelExample" deps="angular-aria.js" name="accessibility-ng-model">
   <file name="index.html">
     <form ng-controller="formsController">
       <some-checkbox role="checkbox" ng-model="checked" ng-class="{active: checked}"
@@ -331,7 +331,7 @@ The attribute magic of ngAria may not work for every scenario. To disable indivi
 you can use the {@link ngAria.$ariaProvider#config config} method. Just keep in mind this will
 tell ngAria to ignore the attribute globally.
 
-<example module="ngAria_ngClickExample" deps="angular-aria.js">
+<example module="ngAria_ngClickExample" deps="angular-aria.js" name="accessibility-ng-click">
  <file name="index.html">
   <div ng-click="someFunction" show-attrs>
     &lt;div&gt; with ng-click and bindRoleForClick, tabindex set to false
diff --git a/docs/content/guide/animations.ngdoc b/docs/content/guide/animations.ngdoc
index 411a7bd3412b..82ad347e4d24 100644
--- a/docs/content/guide/animations.ngdoc
+++ b/docs/content/guide/animations.ngdoc
@@ -23,7 +23,7 @@ Animations are not available unless you include the {@link ngAnimate `ngAnimate`
 
 Below is a quick example of animations being enabled for `ngShow` and `ngHide`:
 
-<example module="ngAnimate" deps="angular-animate.js" animations="true">
+<example module="ngAnimate" deps="angular-animate.js" animations="true" name="animate-ng-show">
   <file name="index.html">
     <div ng-init="checked=true">
       <label>
@@ -188,7 +188,7 @@ able to capture class changes if an **expression** or the **ng-class** directive
 
 The example below shows how to perform animations during class changes:
 
-<example module="ngAnimate" deps="angular-animate.js" animations="true">
+<example module="ngAnimate" deps="angular-animate.js" animations="true" name="animate-css-class">
  <file name="index.html">
   <p>
     <input type="button" value="set" ng-click="myCssVar='css-class'">
diff --git a/docs/content/guide/compiler.ngdoc b/docs/content/guide/compiler.ngdoc
index c3952833c89f..1dd5bda50107 100644
--- a/docs/content/guide/compiler.ngdoc
+++ b/docs/content/guide/compiler.ngdoc
@@ -77,7 +77,7 @@ to write directives.
 Here is a directive which makes any element draggable. Notice the `draggable` attribute on the
 `<span>` element.
 
-<example module="drag">
+<example module="drag" name="draggable">
   <file name="script.js">
     angular.module('drag', []).
       directive('draggable', function($document) {
diff --git a/docs/content/guide/component.ngdoc b/docs/content/guide/component.ngdoc
index c5c2a6df228d..7e537b6cd7f8 100644
--- a/docs/content/guide/component.ngdoc
+++ b/docs/content/guide/component.ngdoc
@@ -383,7 +383,7 @@ but they are guaranteed to be available just before the `$onInit` method is exec
 
 Here is a tab pane example built from components:
 
-<example module="docsTabsExample">
+<example module="docsTabsExample" name="component-tabs-pane">
   <file name="script.js">
 angular.module('docsTabsExample', [])
   .component('myTabs', {
diff --git a/docs/content/guide/controller.ngdoc b/docs/content/guide/controller.ngdoc
index c307555153bf..947cae136abd 100644
--- a/docs/content/guide/controller.ngdoc
+++ b/docs/content/guide/controller.ngdoc
@@ -132,7 +132,7 @@ The message in our template contains a binding to the `spice` model which, by de
 string "very". Depending on which button is clicked, the `spice` model is set to `chili` or
 `jalapeño`, and the message is automatically updated by data-binding.
 
-<example module="spicyApp1">
+<example module="spicyApp1" name="controller-spicy-1">
   <file name="index.html">
     <div ng-controller="SpicyController">
      <button ng-click="chiliSpicy()">Chili</button>
@@ -173,7 +173,7 @@ its children).
 Controller methods can also take arguments, as demonstrated in the following variation of the
 previous example.
 
-<example module="spicyApp2">
+<example module="spicyApp2" name="controller-spicy-2">
   <file name="index.html">
   <div ng-controller="SpicyController">
    <input ng-model="customSpice">
@@ -210,7 +210,7 @@ have access to properties and methods defined by Controllers higher up the hiera
 See [Understanding Scopes](https://github.com/angular/angular.js/wiki/Understanding-Scopes) for
 more information about scope inheritance.
 
-<example module="scopeInheritance">
+<example module="scopeInheritance" name="controller-scope-inheritance">
   <file name="index.html">
     <div class="spicy">
       <div ng-controller="MainController">
diff --git a/docs/content/guide/directive.ngdoc b/docs/content/guide/directive.ngdoc
index 6b19db22d84f..beaf54235a9a 100644
--- a/docs/content/guide/directive.ngdoc
+++ b/docs/content/guide/directive.ngdoc
@@ -80,7 +80,7 @@ The **normalization** process is as follows:
 
 For example, the following forms are all equivalent and match the {@link ngBind} directive:
 
-<example module="docsBindExample">
+<example module="docsBindExample" name="directive-bind">
   <file name="index.html">
     <div ng-controller="Controller">
       Hello <input ng-model='name'> <hr/>
@@ -185,7 +185,7 @@ several others. This is a good opportunity to use a directive to simplify your t
 
 Let's create a directive that simply replaces its contents with a static template:
 
-<example module="docsSimpleDirective">
+<example module="docsSimpleDirective" name="directive-simple">
   <file name="script.js">
     angular.module('docsSimpleDirective', [])
       .controller('Controller', ['$scope', function($scope) {
@@ -224,7 +224,7 @@ its own HTML file and load it with the `templateUrl` option.
 If you are familiar with `ngInclude`, `templateUrl` works just like it. Here's the same example
 using `templateUrl` instead:
 
-<example module="docsTemplateUrlDirective">
+<example module="docsTemplateUrlDirective" name="directive-template-url">
   <file name="script.js">
     angular.module('docsTemplateUrlDirective', [])
       .controller('Controller', ['$scope', function($scope) {
@@ -258,7 +258,7 @@ element that the directive was called on, and an `attr` object associated with t
 function, since the template is requested before the scope is initialized.
 </div>
 
-<example module="docsTemplateUrlDirective">
+<example module="docsTemplateUrlDirective" name="directive-template-url-fn">
   <file name="script.js">
     angular.module('docsTemplateUrlDirective', [])
       .controller('Controller', ['$scope', function($scope) {
@@ -307,7 +307,7 @@ These restrictions can all be combined as needed:
 
 Let's change our directive to use `restrict: 'E'`:
 
-<example module="docsRestrictDirective">
+<example module="docsRestrictDirective" name="directive-restrict">
   <file name="script.js">
     angular.module('docsRestrictDirective', [])
       .controller('Controller', ['$scope', function($scope) {
@@ -363,7 +363,7 @@ given scope.
 In its current implementation, we'd need to create a different controller each time in order to
 re-use such a directive:
 
-<example module="docsScopeProblemExample">
+<example module="docsScopeProblemExample" name="directive-scope-problem">
   <file name="script.js">
     angular.module('docsScopeProblemExample', [])
       .controller('NaomiController', ['$scope', function($scope) {
@@ -405,7 +405,7 @@ What we want to be able to do is separate the scope inside a directive from the
 outside, and then map the outer scope to a directive's inner scope. We can do this by creating what
 we call an **isolate scope**. To do this, we can use a {@link $compile#-scope- directive's `scope`} option:
 
-<example module="docsIsolateScopeDirective">
+<example module="docsIsolateScopeDirective" name="directive-isolate">
   <file name="script.js">
     angular.module('docsIsolateScopeDirective', [])
       .controller('Controller', ['$scope', function($scope) {
@@ -478,7 +478,7 @@ scope has another effect.
 We can show this by adding another property, `vojta`, to our scope and trying to access it from
 within our directive's template:
 
-<example module="docsIsolationExample">
+<example module="docsIsolationExample" name="directive-isolate-2">
   <file name="script.js">
     angular.module('docsIsolationExample', [])
       .controller('Controller', ['$scope', function($scope) {
@@ -557,7 +557,7 @@ to call a handler on a regular basis. This is easier than using `$timeout` but a
 end-to-end testing, where we want to ensure that all `$timeout`s have completed before completing the test.
 We also want to remove the `$interval` if the directive is deleted so we don't introduce a memory leak.
 
-<example module="docsTimeDirective">
+<example module="docsTimeDirective" name="directive-link">
   <file name="script.js">
     angular.module('docsTimeDirective', [])
       .controller('Controller', ['$scope', function($scope) {
@@ -633,7 +633,7 @@ wrap any arbitrary content.
 
 To do this, we need to use the `transclude` option.
 
-<example module="docsTransclusionDirective">
+<example module="docsTransclusionDirective" name="directive-transclude">
   <file name="script.js">
     angular.module('docsTransclusionDirective', [])
       .controller('Controller', ['$scope', function($scope) {
@@ -664,7 +664,7 @@ this option have access to the scope **outside** of the directive rather than in
 To illustrate this, see the example below. Notice that we've added a `link` function in `script.js`
 that redefines `name` as `Jeff`. What do you think the `{{name}}` binding will resolve to now?
 
-<example module="docsTransclusionExample">
+<example module="docsTransclusionExample" name="directive-transclusion">
   <file name="script.js">
     angular.module('docsTransclusionExample', [])
       .controller('Controller', ['$scope', function($scope) {
@@ -714,7 +714,7 @@ arbitrary content.
 Next, we want to add buttons to this dialog box, and allow someone using the directive to bind their
 own behavior to it.
 
-<example module="docsIsoFnBindExample">
+<example module="docsIsoFnBindExample" name="directive-transclusion-scope">
   <file name="script.js">
     angular.module('docsIsoFnBindExample', [])
       .controller('Controller', ['$scope', '$timeout', function($scope, $timeout) {
@@ -791,7 +791,7 @@ its elements.
 For instance, what if we wanted to create a directive that lets a user drag an
 element?
 
-<example module="dragModule">
+<example module="dragModule" name="directive-drag">
   <file name="script.js">
     angular.module('dragModule', [])
       .directive('myDraggable', ['$document', function($document) {
@@ -848,7 +848,7 @@ Sometimes, you want a component that's built from a combination of directives.
 Imagine you want to have a container with tabs in which the contents of the container correspond
 to which tab is active.
 
-<example module="docsTabsExample">
+<example module="docsTabsExample" name="directive-tabs">
   <file name="script.js">
     angular.module('docsTabsExample', [])
       .directive('myTabs', function() {
diff --git a/docs/content/guide/expression.ngdoc b/docs/content/guide/expression.ngdoc
index a418f17dd7fa..0a0fe0a762f3 100644
--- a/docs/content/guide/expression.ngdoc
+++ b/docs/content/guide/expression.ngdoc
@@ -51,7 +51,7 @@ the method from your view. If you want to `eval()` an Angular expression yoursel
 {@link ng.$rootScope.Scope#$eval `$eval()`} method.
 
 ## Example
-<example>
+<example name="expression-simple">
   <file name="index.html">
     <span>
       1+2={{1+2}}
@@ -67,7 +67,7 @@ the method from your view. If you want to `eval()` an Angular expression yoursel
 
 You can try evaluating different expressions here:
 
-<example module="expressionExample">
+<example module="expressionExample" name="expression-eval">
   <file name="index.html">
     <div ng-controller="ExampleController" class="expressions">
       Expression:
@@ -122,7 +122,7 @@ provide mockable access to globals.
 It is possible to access the context object using the identifier `this` and the locals object using the
 identifier `$locals`.
 
-<example module="expressionExample">
+<example module="expressionExample" name="expression-locals">
   <file name="index.html">
     <div class="example2" ng-controller="ExampleController">
       Name: <input ng-model="name" type="text"/>
@@ -197,7 +197,7 @@ expose a `$event` object within the scope of that expression. The object is an i
 Event Object](http://api.jquery.com/category/events/event-object/) when jQuery is present or a
 similar jqLite object.
 
-<example module="eventExampleApp">
+<example module="eventExampleApp" name="expression-events">
   <file name="index.html">
     <div ng-controller="EventController">
       <button ng-click="clickMe($event)">Event</button>
@@ -241,7 +241,7 @@ An expression that starts with `::` is considered a one-time expression. One-tim
 will stop recalculating once they are stable, which happens after the first digest if the expression
 result is a non-undefined value (see value stabilization algorithm below).
 
-<example module="oneTimeBidingExampleApp">
+<example module="oneTimeBidingExampleApp" name="expression-one-time">
   <file name="index.html">
     <div ng-controller="EventController">
       <button ng-click="clickMe($event)">Click Me</button>
diff --git a/docs/content/guide/filter.ngdoc b/docs/content/guide/filter.ngdoc
index 1c548c75b09c..d438157d119c 100644
--- a/docs/content/guide/filter.ngdoc
+++ b/docs/content/guide/filter.ngdoc
@@ -69,7 +69,7 @@ The example below therefore calls the filter directly in the controller.
 By this, the controller is able to call the filter only when needed (e.g. when the data is loaded from the backend
 or the filter expression is changed).
 
-<example module="FilterInControllerModule">
+<example module="FilterInControllerModule" name="filter-in-controller">
   <file name="index.html">
     <div ng-controller="FilterController as ctrl">
       <div>
@@ -123,7 +123,7 @@ your filters, then you can use capitalization (`myappSubsectionFilterx`) or unde
 The following sample filter reverses a text string. In addition, it conditionally makes the
 text upper-case.
 
-<example module="myReverseFilterApp">
+<example module="myReverseFilterApp" name="filter-reverse">
   <file name="index.html">
     <div ng-controller="MyController">
       <input ng-model="greeting" type="text"><br>
@@ -168,7 +168,7 @@ argument for the filter.
 If you however do need to write a stateful filter, you have to mark the filter as `$stateful`, which
 means that it will be executed one or more times during the each `$digest` cycle.
 
-<example module="myStatefulFilterApp">
+<example module="myStatefulFilterApp" name="filter-stateful">
   <file name="index.html">
     <div ng-controller="MyController">
       Input: <input ng-model="greeting" type="text"><br>
diff --git a/docs/content/guide/forms.ngdoc b/docs/content/guide/forms.ngdoc
index 6e45b5737d58..77ee8b53474a 100644
--- a/docs/content/guide/forms.ngdoc
+++ b/docs/content/guide/forms.ngdoc
@@ -22,7 +22,7 @@ The `ngModel` directive provides the two-way data-binding by synchronizing the m
 as well as view to the model. In addition it provides an {@link ngModel.NgModelController API}
 for other directives to augment its behavior.
 
-<example module="formExample">
+<example module="formExample" name="forms-simple">
   <file name="index.html">
     <div ng-controller="ExampleController">
       <form novalidate class="simple-form">
@@ -84,7 +84,7 @@ with red background only after the input is blurred (loses focus).
 This ensures that the user is not distracted with an error until after interacting with the control,
 and failing to satisfy its validity.
 
-<example module="formExample">
+<example module="formExample" name="forms-css-classes">
   <file name="index.html">
     <div ng-controller="ExampleController">
       <form novalidate class="css-form">
@@ -150,7 +150,7 @@ This allows us to extend the above example with these features:
 didn't interact with a control
 
 
-<example module="formExample">
+<example module="formExample" name="forms-custom-error-messages">
   <file name="index.html">
     <div ng-controller="ExampleController">
       <form name="form" class="css-form" novalidate>
@@ -232,7 +232,7 @@ I.e. `ng-model-options="{ updateOn: 'default blur' }"`
 The following example shows how to override immediate updates. Changes on the inputs within the form
 will update the model only when the control loses focus (blur event).
 
-<example module="customTriggerExample">
+<example module="customTriggerExample" name="forms-custom-triggers">
   <file name="index.html">
     <div ng-controller="ExampleController">
       <form>
@@ -278,7 +278,7 @@ controls that inherit from it unless they are overridden.
 This example shows how to debounce model changes. Model will be updated only 250 milliseconds
 after last change.
 
-<example module="debounceExample">
+<example module="debounceExample" name="forms-debounce">
   <file name="index.html">
     <div ng-controller="ExampleController">
       <form>
@@ -331,7 +331,7 @@ In the following example we create two directives:
  * A `username` directive that asynchronously checks if a user-entered value is already taken.
  We mock the server request with a `$q` deferred.
 
-<example module="form-example1">
+<example module="form-example1" name="forms-async-validation">
   <file name="index.html">
     <form name="form" class="css-form" novalidate>
       <div>
@@ -421,7 +421,7 @@ in `input[email]` from a custom directive so that it requires a specific top-lev
 `example.com` to be present.
 Note that you can alternatively use `ng-pattern` to further restrict the validation.
 
-<example module="form-example-modify-validators">
+<example module="form-example-modify-validators" name="forms-modify-validators">
   <file name="index.html">
     <form name="form" class="css-form" novalidate>
       <div>
@@ -474,7 +474,7 @@ See {@link guide/directive `$compileProvider.directive`} for more info.
 
 The following example shows how to add two-way data-binding to contentEditable elements.
 
-<example module="form-example2">
+<example module="form-example2" name="forms-custom-form-controls">
   <file name="index.html">
     <div contentEditable="true" ng-model="content" title="Click to edit">Some</div>
     <pre>model = {{content}}</pre>
diff --git a/docs/content/guide/module.ngdoc b/docs/content/guide/module.ngdoc
index 09ac5ae944f8..879ee4fc10c3 100644
--- a/docs/content/guide/module.ngdoc
+++ b/docs/content/guide/module.ngdoc
@@ -27,7 +27,7 @@ should be bootstrapped. There are several advantages to this approach:
 
 I'm in a hurry. How do I get a Hello World module working?
 
-<example ng-app-included="true">
+<example ng-app-included="true" name="module-hello-world">
   <file name="index.html">
     <div ng-app="myApp">
       <div>
@@ -80,7 +80,7 @@ yourself when application grows.
 
 The above is a suggestion. Tailor it to your needs.
 
-<example module='xmpl'>
+<example module='xmpl' name="module-suggested-layout">
   <file name="index.html">
     <div ng-controller="XmplController">
       {{ greeting }}
diff --git a/docs/content/guide/scope.ngdoc b/docs/content/guide/scope.ngdoc
index 490dedfdee5a..824cfc5d1cd0 100644
--- a/docs/content/guide/scope.ngdoc
+++ b/docs/content/guide/scope.ngdoc
@@ -43,7 +43,7 @@ arrangement isolates the controller from the directive as well as from the DOM.
 point since it makes the controllers view agnostic, which greatly improves the testing story of
 the applications.
 
-<example module="scopeExample">
+<example module="scopeExample" name="scope-data-model">
   <file name="script.js">
     angular.module('scopeExample', [])
       .controller('MyController', ['$scope', function($scope) {
@@ -124,7 +124,7 @@ inheritance, and child scopes prototypically inherit from their parents.
 This example illustrates scopes in application, and prototypical inheritance of properties. The example is followed by
 a diagram depicting the scope boundaries.
 
-<example module="scopeExample">
+<example module="scopeExample" name="scope-hierarchies">
   <file name="index.html">
   <div class="show-scope-demo">
     <div ng-controller="GreetController">
@@ -192,7 +192,7 @@ Scopes can propagate events in similar fashion to DOM events. The event can be {
 ng.$rootScope.Scope#$broadcast broadcasted} to the scope children or {@link
 ng.$rootScope.Scope#$emit emitted} to scope parents.
 
-<example module="eventExample">
+<example module="eventExample" name="scope-events-propagation">
   <file name="script.js">
     angular.module('eventExample', [])
       .controller('EventController', ['$scope', function($scope) {
@@ -391,7 +391,7 @@ implementing custom event callbacks, or when working with third-party library ca
   5. The {@link ng.$rootScope.Scope#$watch $watch} list is a set of expressions
      which may have changed since last iteration. If a change is detected then the `$watch`
      function is called which typically updates the DOM with the new value.
-  6. Once the Angular {@link ng.$rootScope.Scope#$digest $digest} loop finishes, 
+  6. Once the Angular {@link ng.$rootScope.Scope#$digest $digest} loop finishes,
      the execution leaves the Angular and JavaScript context. This is followed by the browser
      re-rendering the DOM to reflect any changes.
 
diff --git a/docs/content/guide/services.ngdoc b/docs/content/guide/services.ngdoc
index a365cc302044..4428b7cdd662 100644
--- a/docs/content/guide/services.ngdoc
+++ b/docs/content/guide/services.ngdoc
@@ -30,7 +30,7 @@ To use an Angular service, you add it as a dependency for the component (control
 filter or directive) that depends on the service. Angular's {@link di dependency injection}
 subsystem takes care of the rest.
 
-<example module="myServiceModule">
+<example module="myServiceModule" name="services-usage">
   <file name="index.html">
     <div id="simple" ng-controller="MyController">
       <p>Let's try this simple notify service, injected into the controller...</p>
diff --git a/src/Angular.js b/src/Angular.js
index 092189e785ad..45d4273dbb15 100644
--- a/src/Angular.js
+++ b/src/Angular.js
@@ -766,7 +766,7 @@ function arrayRemove(array, value) {
  * @returns {*} The copy or updated `destination`, if `destination` was specified.
  *
  * @example
-  <example module="copyExample">
+  <example module="copyExample" name="angular-copy">
     <file name="index.html">
       <div ng-controller="ExampleController">
         <form novalidate class="simple-form">
@@ -1475,7 +1475,7 @@ function getNgAttribute(element, ngAttr) {
  *
  * `ngApp` is the easiest, and most common way to bootstrap an application.
  *
- <example module="ngAppDemo">
+ <example module="ngAppDemo" name="ng-app">
    <file name="index.html">
    <div ng-controller="ngAppDemoController">
      I can add: {{a}} + {{b}} =  {{ a+b }}
@@ -1491,7 +1491,7 @@ function getNgAttribute(element, ngAttr) {
  *
  * Using `ngStrictDi`, you would see something like this:
  *
- <example ng-app-included="true">
+ <example ng-app-included="true" name="strict-di">
    <file name="index.html">
    <div ng-app="ngAppStrictDemo" ng-strict-di>
        <div ng-controller="GoodController1">
diff --git a/src/ng/anchorScroll.js b/src/ng/anchorScroll.js
index cb3f6563aecb..3c739c142f22 100644
--- a/src/ng/anchorScroll.js
+++ b/src/ng/anchorScroll.js
@@ -74,7 +74,7 @@ function $AnchorScrollProvider() {
    * </div>
    *
    * @example
-     <example module="anchorScrollExample">
+     <example module="anchorScrollExample" name="anchor-scroll">
        <file name="index.html">
          <div id="scrollArea" ng-controller="ScrollController">
            <a ng-click="gotoBottom()">Go to bottom</a>
@@ -113,7 +113,7 @@ function $AnchorScrollProvider() {
    * See {@link ng.$anchorScroll#yOffset $anchorScroll.yOffset} for more details.
    *
    * @example
-     <example module="anchorScrollOffsetExample">
+     <example module="anchorScrollOffsetExample" name="anchor-scroll-offset">
        <file name="index.html">
          <div class="fixed-header" ng-controller="headerCtrl">
            <a href="" ng-click="gotoAnchor(x)" ng-repeat="x in [1,2,3,4,5]">
diff --git a/src/ng/cacheFactory.js b/src/ng/cacheFactory.js
index c1887d86e410..53d3acaa8688 100644
--- a/src/ng/cacheFactory.js
+++ b/src/ng/cacheFactory.js
@@ -39,7 +39,7 @@
  * - `{void}` `destroy()` — Removes references to this cache from $cacheFactory.
  *
  * @example
-   <example module="cacheExampleApp">
+   <example module="cacheExampleApp" name="cache-factory">
      <file name="index.html">
        <div ng-controller="CacheController">
          <input ng-model="newCacheKey" placeholder="Key">
diff --git a/src/ng/compile.js b/src/ng/compile.js
index 9355630dca69..dbaeba81f9b6 100644
--- a/src/ng/compile.js
+++ b/src/ng/compile.js
@@ -815,7 +815,7 @@
  * to illustrate how `$compile` works.
  * </div>
  *
- <example module="compileExample">
+ <example module="compileExample" name="compile">
    <file name="index.html">
     <script>
       angular.module('compileExample', [], function($compileProvider) {
diff --git a/src/ng/directive/attrs.js b/src/ng/directive/attrs.js
index e5db9db49fe8..0e3233ee9f35 100644
--- a/src/ng/directive/attrs.js
+++ b/src/ng/directive/attrs.js
@@ -30,7 +30,7 @@
  * @example
  * This example shows various combinations of `href`, `ng-href` and `ng-click` attributes
  * in links and their different behaviors:
-    <example>
+    <example name="ng-href">
       <file name="index.html">
         <input ng-model="value" /><br />
         <a id="link-1" href ng-click="value = 1">link 1</a> (link, don't reload)<br />
@@ -166,7 +166,7 @@
  * attribute. See the {@link guide/interpolation interpolation guide} for more info.
  *
  * @example
-    <example>
+    <example name="ng-disabled">
       <file name="index.html">
         <label>Click me to toggle: <input type="checkbox" ng-model="checked"></label><br/>
         <button ng-model="button" ng-disabled="checked">Button</button>
@@ -202,7 +202,7 @@
  * attribute. See the {@link guide/interpolation interpolation guide} for more info.
  *
  * @example
-    <example>
+    <example name="ng-checked">
       <file name="index.html">
         <label>Check me to check both: <input type="checkbox" ng-model="master"></label><br/>
         <input id="checkSlave" type="checkbox" ng-checked="master" aria-label="Slave input">
@@ -238,7 +238,7 @@
  * attribute. See the {@link guide/interpolation interpolation guide} for more info.
  *
  * @example
-    <example>
+    <example name="ng-readonly">
       <file name="index.html">
         <label>Check me to make text readonly: <input type="checkbox" ng-model="checked"></label><br/>
         <input type="text" ng-readonly="checked" value="I'm Angular" aria-label="Readonly field" />
@@ -279,7 +279,7 @@
  * </div>
  *
  * @example
-    <example>
+    <example name="ng-selected">
       <file name="index.html">
         <label>Check me to select: <input type="checkbox" ng-model="selected"></label><br/>
         <select aria-label="ngSelected demo">
@@ -320,7 +320,7 @@
  * recommended to use {@link ng.ngShow} and {@link ng.ngHide} instead.
  *
  * @example
-     <example>
+     <example name="ng-open">
        <file name="index.html">
          <label>Check me check multiple: <input type="checkbox" ng-model="open"></label><br/>
          <details id="details" ng-open="open">
diff --git a/src/ng/directive/form.js b/src/ng/directive/form.js
index cb3c475a0f63..dac2ebd05e5d 100644
--- a/src/ng/directive/form.js
+++ b/src/ng/directive/form.js
@@ -412,7 +412,7 @@ function FormController(element, attrs, $scope, $animate, $interpolate) {
  * </pre>
  *
  * @example
-    <example deps="angular-animate.js" animations="true" fixBase="true" module="formExample">
+    <example name="ng-form" deps="angular-animate.js" animations="true" fixBase="true" module="formExample">
       <file name="index.html">
        <script>
          angular.module('formExample', [])
diff --git a/src/ng/directive/ngBind.js b/src/ng/directive/ngBind.js
index 0444227e1d7b..e94b32dbb6ec 100644
--- a/src/ng/directive/ngBind.js
+++ b/src/ng/directive/ngBind.js
@@ -26,7 +26,7 @@
  *
  * @example
  * Enter a name in the Live Preview text box; the greeting below the text box changes instantly.
-   <example module="bindExample">
+   <example module="bindExample" name="ng-bind">
      <file name="index.html">
        <script>
          angular.module('bindExample', [])
@@ -86,7 +86,7 @@ var ngBindDirective = ['$compile', function($compile) {
  *
  * @example
  * Try it here: enter text in text box and watch the greeting change.
-   <example module="bindExample">
+   <example module="bindExample" name="ng-bind-template">
      <file name="index.html">
        <script>
          angular.module('bindExample', [])
@@ -159,7 +159,7 @@ var ngBindTemplateDirective = ['$interpolate', '$compile', function($interpolate
  *
  * @example
 
-   <example module="bindHtmlExample" deps="angular-sanitize.js">
+   <example module="bindHtmlExample" deps="angular-sanitize.js" name="ng-bind-html">
      <file name="index.html">
        <div ng-controller="ExampleController">
         <p ng-bind-html="myHTML"></p>
diff --git a/src/ng/directive/ngClass.js b/src/ng/directive/ngClass.js
index e84bd1d47fea..3e377bfc1bf6 100644
--- a/src/ng/directive/ngClass.js
+++ b/src/ng/directive/ngClass.js
@@ -172,7 +172,7 @@ function classDirective(name, selector) {
  *   element.
  *
  * @example Example that demonstrates basic bindings via ngClass directive.
-   <example>
+   <example name="ng-class">
      <file name="index.html">
        <p ng-class="{strike: deleted, bold: important, 'has-error': error}">Map Syntax Example</p>
        <label>
@@ -265,7 +265,7 @@ function classDirective(name, selector) {
 
    The example below demonstrates how to perform animations using ngClass.
 
-   <example module="ngAnimate" deps="angular-animate.js" animations="true">
+   <example module="ngAnimate" deps="angular-animate.js" animations="true" name="ng-class">
      <file name="index.html">
       <input id="setbtn" type="button" value="set" ng-click="myVar='my-class'">
       <input id="clearbtn" type="button" value="clear" ng-click="myVar=''">
@@ -328,7 +328,7 @@ var ngClassDirective = classDirective('', true);
  *   of the evaluation can be a string representing space delimited class names or an array.
  *
  * @example
-   <example>
+   <example name="ng-class-odd">
      <file name="index.html">
         <ol ng-init="names=['John', 'Mary', 'Cate', 'Suz']">
           <li ng-repeat="name in names">
@@ -376,7 +376,7 @@ var ngClassOddDirective = classDirective('Odd', 0);
  *   result of the evaluation can be a string representing space delimited class names or an array.
  *
  * @example
-   <example>
+   <example name="ng-class-even">
      <file name="index.html">
         <ol ng-init="names=['John', 'Mary', 'Cate', 'Suz']">
           <li ng-repeat="name in names">
diff --git a/src/ng/directive/ngCloak.js b/src/ng/directive/ngCloak.js
index 19bd25c83252..7615261569b5 100644
--- a/src/ng/directive/ngCloak.js
+++ b/src/ng/directive/ngCloak.js
@@ -36,7 +36,7 @@
  * @element ANY
  *
  * @example
-   <example>
+   <example name="ng-cloak">
      <file name="index.html">
         <div id="template1" ng-cloak>{{ 'hello' }}</div>
         <div id="template2" class="ng-cloak">{{ 'world' }}</div>
diff --git a/src/ng/directive/ngEventDirs.js b/src/ng/directive/ngEventDirs.js
index c14b173a2b48..998785754d16 100644
--- a/src/ng/directive/ngEventDirs.js
+++ b/src/ng/directive/ngEventDirs.js
@@ -14,7 +14,7 @@
  * click. ({@link guide/expression#-event- Event object is available as `$event`})
  *
  * @example
-   <example>
+   <example name="ng-click">
      <file name="index.html">
       <button ng-click="count = count + 1" ng-init="count=0">
         Increment
@@ -89,7 +89,7 @@ forEach(
  * a dblclick. (The Event object is available as `$event`)
  *
  * @example
-   <example>
+   <example name="ng-dblclick">
      <file name="index.html">
       <button ng-dblclick="count = count + 1" ng-init="count=0">
         Increment (on double click)
@@ -113,7 +113,7 @@ forEach(
  * mousedown. ({@link guide/expression#-event- Event object is available as `$event`})
  *
  * @example
-   <example>
+   <example name="ng-mousedown">
      <file name="index.html">
       <button ng-mousedown="count = count + 1" ng-init="count=0">
         Increment (on mouse down)
@@ -137,7 +137,7 @@ forEach(
  * mouseup. ({@link guide/expression#-event- Event object is available as `$event`})
  *
  * @example
-   <example>
+   <example name="ng-mouseup">
      <file name="index.html">
       <button ng-mouseup="count = count + 1" ng-init="count=0">
         Increment (on mouse up)
@@ -160,7 +160,7 @@ forEach(
  * mouseover. ({@link guide/expression#-event- Event object is available as `$event`})
  *
  * @example
-   <example>
+   <example name="ng-mouseover">
      <file name="index.html">
       <button ng-mouseover="count = count + 1" ng-init="count=0">
         Increment (when mouse is over)
@@ -184,7 +184,7 @@ forEach(
  * mouseenter. ({@link guide/expression#-event- Event object is available as `$event`})
  *
  * @example
-   <example>
+   <example name="ng-mouseenter">
      <file name="index.html">
       <button ng-mouseenter="count = count + 1" ng-init="count=0">
         Increment (when mouse enters)
@@ -208,7 +208,7 @@ forEach(
  * mouseleave. ({@link guide/expression#-event- Event object is available as `$event`})
  *
  * @example
-   <example>
+   <example name="ng-mouseleave">
      <file name="index.html">
       <button ng-mouseleave="count = count + 1" ng-init="count=0">
         Increment (when mouse leaves)
@@ -232,7 +232,7 @@ forEach(
  * mousemove. ({@link guide/expression#-event- Event object is available as `$event`})
  *
  * @example
-   <example>
+   <example name="ng-mousemove">
      <file name="index.html">
       <button ng-mousemove="count = count + 1" ng-init="count=0">
         Increment (when mouse moves)
@@ -256,7 +256,7 @@ forEach(
  * keydown. (Event object is available as `$event` and can be interrogated for keyCode, altKey, etc.)
  *
  * @example
-   <example>
+   <example name="ng-keydown">
      <file name="index.html">
       <input ng-keydown="count = count + 1" ng-init="count=0">
       key down count: {{count}}
@@ -278,7 +278,7 @@ forEach(
  * keyup. (Event object is available as `$event` and can be interrogated for keyCode, altKey, etc.)
  *
  * @example
-   <example>
+   <example name="ng-keyup">
      <file name="index.html">
        <p>Typing in the input box below updates the key count</p>
        <input ng-keyup="count = count + 1" ng-init="count=0"> key up count: {{count}}
@@ -305,7 +305,7 @@ forEach(
  * and can be interrogated for keyCode, altKey, etc.)
  *
  * @example
-   <example>
+   <example name="ng-keypress">
      <file name="index.html">
       <input ng-keypress="count = count + 1" ng-init="count=0">
       key press count: {{count}}
@@ -338,7 +338,7 @@ forEach(
  * ({@link guide/expression#-event- Event object is available as `$event`})
  *
  * @example
-   <example module="submitExample">
+   <example module="submitExample" name="ng-submit">
      <file name="index.html">
       <script>
         angular.module('submitExample', [])
@@ -434,7 +434,7 @@ forEach(
  * copy. ({@link guide/expression#-event- Event object is available as `$event`})
  *
  * @example
-   <example>
+   <example name="ng-copy">
      <file name="index.html">
       <input ng-copy="copied=true" ng-init="copied=false; value='copy me'" ng-model="value">
       copied: {{copied}}
@@ -455,7 +455,7 @@ forEach(
  * cut. ({@link guide/expression#-event- Event object is available as `$event`})
  *
  * @example
-   <example>
+   <example name="ng-cut">
      <file name="index.html">
       <input ng-cut="cut=true" ng-init="cut=false; value='cut me'" ng-model="value">
       cut: {{cut}}
@@ -476,7 +476,7 @@ forEach(
  * paste. ({@link guide/expression#-event- Event object is available as `$event`})
  *
  * @example
-   <example>
+   <example name="ng-paste">
      <file name="index.html">
       <input ng-paste="paste=true" ng-init="paste=false" placeholder='paste here'>
       pasted: {{paste}}
diff --git a/src/ng/directive/ngIf.js b/src/ng/directive/ngIf.js
index 9e0d96b5ad81..117f13e4788e 100644
--- a/src/ng/directive/ngIf.js
+++ b/src/ng/directive/ngIf.js
@@ -47,7 +47,7 @@
  *     element is added to the DOM tree.
  *
  * @example
-  <example module="ngAnimate" deps="angular-animate.js" animations="true">
+  <example module="ngAnimate" deps="angular-animate.js" animations="true" name="ng-if">
     <file name="index.html">
       <label>Click me: <input type="checkbox" ng-model="checked" ng-init="checked=true" /></label><br/>
       Show when checked:
diff --git a/src/ng/directive/ngInclude.js b/src/ng/directive/ngInclude.js
index 7845b48ead91..bc87af195a62 100644
--- a/src/ng/directive/ngInclude.js
+++ b/src/ng/directive/ngInclude.js
@@ -51,7 +51,7 @@
  *                  - Otherwise enable scrolling only if the expression evaluates to truthy value.
  *
  * @example
-  <example module="includeExample" deps="angular-animate.js" animations="true">
+  <example module="includeExample" deps="angular-animate.js" animations="true" name="ng-include">
     <file name="index.html">
      <div ng-controller="ExampleController">
        <select ng-model="template" ng-options="t.name for t in templates">
diff --git a/src/ng/directive/ngInit.js b/src/ng/directive/ngInit.js
index 2e9a7c8127ba..8e4318c10ef1 100644
--- a/src/ng/directive/ngInit.js
+++ b/src/ng/directive/ngInit.js
@@ -31,7 +31,7 @@
  * @param {expression} ngInit {@link guide/expression Expression} to eval.
  *
  * @example
-   <example module="initExample">
+   <example module="initExample" name="ng-init">
      <file name="index.html">
    <script>
      angular.module('initExample', [])
diff --git a/src/ng/directive/ngModel.js b/src/ng/directive/ngModel.js
index 90b4bafabcbc..382c1523eb24 100644
--- a/src/ng/directive/ngModel.js
+++ b/src/ng/directive/ngModel.js
@@ -997,7 +997,7 @@ var NgModelController = ['$scope', '$exceptionHandler', '$attrs', '$element', '$
  * </pre>
  *
  * @example
- * <example deps="angular-animate.js" animations="true" fixBase="true" module="inputExample">
+ * <example deps="angular-animate.js" animations="true" fixBase="true" module="inputExample" name="ng-model">
      <file name="index.html">
        <script>
         angular.module('inputExample', [])
diff --git a/src/ng/directive/ngNonBindable.js b/src/ng/directive/ngNonBindable.js
index 21c17abeaff0..6ac7d1cffc56 100644
--- a/src/ng/directive/ngNonBindable.js
+++ b/src/ng/directive/ngNonBindable.js
@@ -19,7 +19,7 @@
  * but the one wrapped in `ngNonBindable` is left alone.
  *
  * @example
-    <example>
+    <example name="ng-non-bindable">
       <file name="index.html">
         <div>Normal: {{1 + 2}}</div>
         <div ng-non-bindable>Ignored: {{1 + 2}}</div>
diff --git a/src/ng/directive/ngOptions.js b/src/ng/directive/ngOptions.js
index 781d68b423d1..5f25db40e2f0 100644
--- a/src/ng/directive/ngOptions.js
+++ b/src/ng/directive/ngOptions.js
@@ -156,7 +156,7 @@ var ngOptionsMinErr = minErr('ngOptions');
  *      even when the options are recreated (e.g. reloaded from the server).
  *
  * @example
-    <example module="selectExample">
+    <example module="selectExample" name="select">
       <file name="index.html">
         <script>
         angular.module('selectExample', [])
diff --git a/src/ng/directive/ngPluralize.js b/src/ng/directive/ngPluralize.js
index 667ebd046ec8..1cbb8a595d0f 100644
--- a/src/ng/directive/ngPluralize.js
+++ b/src/ng/directive/ngPluralize.js
@@ -92,7 +92,7 @@
  * @param {number=} offset Offset to deduct from the total number.
  *
  * @example
-    <example module="pluralizeExample">
+    <example module="pluralizeExample" name="ng-pluralize">
       <file name="index.html">
         <script>
           angular.module('pluralizeExample', [])
diff --git a/src/ng/directive/ngRepeat.js b/src/ng/directive/ngRepeat.js
index f44b90220c3c..53d950f2d5c7 100644
--- a/src/ng/directive/ngRepeat.js
+++ b/src/ng/directive/ngRepeat.js
@@ -232,7 +232,7 @@
  * @example
  * This example uses `ngRepeat` to display a list of people. A filter is used to restrict the displayed
  * results by name. New (entering) and removed (leaving) items are animated.
-  <example module="ngRepeat" name="ngRepeat" deps="angular-animate.js" animations="true">
+  <example module="ngRepeat" name="ngRepeat" deps="angular-animate.js" animations="true" name="ng-repeat">
     <file name="index.html">
       <div ng-controller="repeatController">
         I have {{friends.length}} friends. They are:
diff --git a/src/ng/directive/ngShowHide.js b/src/ng/directive/ngShowHide.js
index cd6002fe17b5..22df6b50c0ca 100644
--- a/src/ng/directive/ngShowHide.js
+++ b/src/ng/directive/ngShowHide.js
@@ -99,7 +99,7 @@ var NG_HIDE_IN_PROGRESS_CLASS = 'ng-hide-animate';
  *     then the element is shown or hidden respectively.
  *
  * @example
-  <example module="ngAnimate" deps="angular-animate.js" animations="true">
+  <example module="ngAnimate" deps="angular-animate.js" animations="true" name="ng-show">
     <file name="index.html">
       Click me: <input type="checkbox" ng-model="checked" aria-label="Toggle ngHide"><br/>
       <div>
@@ -266,7 +266,7 @@ var ngShowDirective = ['$animate', function($animate) {
  *     the element is shown or hidden respectively.
  *
  * @example
-  <example module="ngAnimate" deps="angular-animate.js" animations="true">
+  <example module="ngAnimate" deps="angular-animate.js" animations="true" name="ng-hide">
     <file name="index.html">
       Click me: <input type="checkbox" ng-model="checked" aria-label="Toggle ngShow"><br/>
       <div>
diff --git a/src/ng/directive/ngStyle.js b/src/ng/directive/ngStyle.js
index 27ee73b3c6a4..844029904202 100644
--- a/src/ng/directive/ngStyle.js
+++ b/src/ng/directive/ngStyle.js
@@ -24,7 +24,7 @@
  * See the 'background-color' style in the example below.
  *
  * @example
-   <example>
+   <example name="ng-style">
      <file name="index.html">
         <input type="button" value="set color" ng-click="myStyle={color:'red'}">
         <input type="button" value="set background" ng-click="myStyle={'background-color':'blue'}">
diff --git a/src/ng/directive/ngSwitch.js b/src/ng/directive/ngSwitch.js
index c76bf6b04102..4d2831e485a0 100644
--- a/src/ng/directive/ngSwitch.js
+++ b/src/ng/directive/ngSwitch.js
@@ -57,7 +57,7 @@
  *
  *
  * @example
-  <example module="switchExample" deps="angular-animate.js" animations="true">
+  <example module="switchExample" deps="angular-animate.js" animations="true" name="ng-switch">
     <file name="index.html">
       <div ng-controller="ExampleController">
         <select ng-model="selection" ng-options="item for item in items">
diff --git a/src/ng/directive/ngTransclude.js b/src/ng/directive/ngTransclude.js
index 6b02963f16d9..d9406f727f0e 100644
--- a/src/ng/directive/ngTransclude.js
+++ b/src/ng/directive/ngTransclude.js
@@ -69,7 +69,7 @@
  * This example shows how to use `NgTransclude` with fallback content, that
  * is displayed if no transcluded content is provided.
  *
- * <example module="transcludeFallbackContentExample">
+ * <example module="transcludeFallbackContentExample" name="ng-transclude">
  * <file name="index.html">
  * <script>
  * angular.module('transcludeFallbackContentExample', [])
diff --git a/src/ng/directive/script.js b/src/ng/directive/script.js
index 59ff310ad610..519548b45eb2 100644
--- a/src/ng/directive/script.js
+++ b/src/ng/directive/script.js
@@ -16,7 +16,7 @@
  * @param {string} id Cache name of the template.
  *
  * @example
-  <example>
+  <example  name="script-tag">
     <file name="index.html">
       <script type="text/ng-template" id="/tpl.html">
         Content of the template.
diff --git a/src/ng/document.js b/src/ng/document.js
index 27f9a33951e8..4842804105c4 100644
--- a/src/ng/document.js
+++ b/src/ng/document.js
@@ -9,7 +9,7 @@
  * A {@link angular.element jQuery or jqLite} wrapper for the browser's `window.document` object.
  *
  * @example
-   <example module="documentExample">
+   <example module="documentExample" name="document">
      <file name="index.html">
        <div ng-controller="ExampleController">
          <p>$document title: <b ng-bind="title"></b></p>
diff --git a/src/ng/filter/filter.js b/src/ng/filter/filter.js
index da2c10ba4f77..3c346ae07fbe 100644
--- a/src/ng/filter/filter.js
+++ b/src/ng/filter/filter.js
@@ -64,7 +64,7 @@
  *     By default `$`.
  *
  * @example
-   <example>
+   <example name="filter-filter">
      <file name="index.html">
        <div ng-init="friends = [{name:'John', phone:'555-1276'},
                                 {name:'Mary', phone:'800-BIG-MARY'},
diff --git a/src/ng/filter/filters.js b/src/ng/filter/filters.js
index 8342858e3c52..66e764d2d641 100644
--- a/src/ng/filter/filters.js
+++ b/src/ng/filter/filters.js
@@ -20,7 +20,7 @@ var ZERO_CHAR = '0';
  *
  *
  * @example
-   <example module="currencyExample">
+   <example module="currencyExample" name="currency-filter">
      <file name="index.html">
        <script>
          angular.module('currencyExample', [])
@@ -98,7 +98,7 @@ function currencyFilter($locale) {
  *                   include "," group separators after each third digit).
  *
  * @example
-   <example module="numberFilterExample">
+   <example module="numberFilterExample" name="number-filter">
      <file name="index.html">
        <script>
          angular.module('numberFilterExample', [])
@@ -547,7 +547,7 @@ var DATE_FORMATS_SPLIT = /((?:[^yMLdHhmsaZEwG']+)|(?:'(?:[^']|'')*')|(?:E+|y+|M+
  * @returns {string} Formatted string or the input if input is not recognized as date/millis.
  *
  * @example
-   <example>
+   <example name="filter-date">
      <file name="index.html">
        <span ng-non-bindable>{{1288323623006 | date:'medium'}}</span>:
            <span>{{1288323623006 | date:'medium'}}</span><br>
@@ -666,7 +666,7 @@ function dateFilter($locale) {
  *
  *
  * @example
-   <example>
+   <example name="filter-json">
      <file name="index.html">
        <pre id="default-spacing">{{ {'name':'value'} | json }}</pre>
        <pre id="custom-spacing">{{ {'name':'value'} | json:4 }}</pre>
diff --git a/src/ng/filter/limitTo.js b/src/ng/filter/limitTo.js
index b3ba2abd43a2..7c87a594345d 100644
--- a/src/ng/filter/limitTo.js
+++ b/src/ng/filter/limitTo.js
@@ -24,7 +24,7 @@
  *     less than `limit` elements.
  *
  * @example
-   <example module="limitToExample">
+   <example module="limitToExample" name="limit-to-filter">
      <file name="index.html">
        <script>
          angular.module('limitToExample', [])
diff --git a/src/ng/http.js b/src/ng/http.js
index 158a4748e8c3..59cfb112ca61 100644
--- a/src/ng/http.js
+++ b/src/ng/http.js
@@ -851,7 +851,7 @@ function $HttpProvider() {
      *
      *
      * @example
-<example module="httpExample">
+<example module="httpExample" name="http-service">
 <file name="index.html">
   <div ng-controller="FetchController">
     <select ng-model="method" aria-label="Request method">
diff --git a/src/ng/interpolate.js b/src/ng/interpolate.js
index 7edf0af277e8..972b1b89c21c 100644
--- a/src/ng/interpolate.js
+++ b/src/ng/interpolate.js
@@ -184,7 +184,7 @@ function $InterpolateProvider() {
      * this is typically useful only when user-data is used in rendering a template from the server, or
      * when otherwise untrusted data is used by a directive.
      *
-     * <example>
+     * <example name="interpolation">
      *  <file name="index.html">
      *    <div ng-init="username='A user'">
      *      <p ng-init="apptitle='Escaping demo'">{{apptitle}}: \{\{ username = "defaced value"; \}\}
diff --git a/src/ng/interval.js b/src/ng/interval.js
index 36b655e2ce65..4346c3fea46a 100644
--- a/src/ng/interval.js
+++ b/src/ng/interval.js
@@ -43,7 +43,7 @@ function $IntervalProvider() {
       * @returns {promise} A promise which will be notified on each iteration.
       *
       * @example
-      * <example module="intervalExample">
+      * <example module="intervalExample" name="interval-service">
       * <file name="index.html">
       *   <script>
       *     angular.module('intervalExample', [])
diff --git a/src/ng/log.js b/src/ng/log.js
index 6d4d18105538..8f3ebd55489f 100644
--- a/src/ng/log.js
+++ b/src/ng/log.js
@@ -15,7 +15,7 @@
  * {@link ng.$logProvider ng.$logProvider#debugEnabled} to change this.
  *
  * @example
-   <example module="logExample">
+   <example module="logExample" name="log-service">
      <file name="script.js">
        angular.module('logExample', [])
          .controller('LogController', ['$scope', '$log', function($scope, $log) {
diff --git a/src/ng/sce.js b/src/ng/sce.js
index 51d70e377aeb..bf881f8c9fd8 100644
--- a/src/ng/sce.js
+++ b/src/ng/sce.js
@@ -585,7 +585,7 @@ function $SceDelegateProvider() {
  *
  * ## Show me an example using SCE.
  *
- * <example module="mySceApp" deps="angular-sanitize.js">
+ * <example module="mySceApp" deps="angular-sanitize.js" name="sce-service">
  * <file name="index.html">
  *   <div ng-controller="AppController as myCtrl">
  *     <i ng-bind-html="myCtrl.explicitlyTrustedHtml" id="explicitlyTrustedHtml"></i><br><br>
diff --git a/src/ng/window.js b/src/ng/window.js
index 1b0ebb0d3bbc..ae983eb3673c 100644
--- a/src/ng/window.js
+++ b/src/ng/window.js
@@ -16,7 +16,7 @@
  * expression.
  *
  * @example
-   <example module="windowExample">
+   <example module="windowExample" name="window-service">
      <file name="index.html">
        <script>
          angular.module('windowExample', [])
diff --git a/src/ngSanitize/filter/linky.js b/src/ngSanitize/filter/linky.js
index cdc9af0bb9d5..6ecdd889a10d 100644
--- a/src/ngSanitize/filter/linky.js
+++ b/src/ngSanitize/filter/linky.js
@@ -30,7 +30,7 @@
    <span ng-bind-html="linky_expression | linky"></span>
  *
  * @example
-   <example module="linkyExample" deps="angular-sanitize.js">
+   <example module="linkyExample" deps="angular-sanitize.js" name="linky-filter">
      <file name="index.html">
        <div ng-controller="ExampleController">
        Snippet: <textarea ng-model="snippet" cols="60" rows="3"></textarea>
diff --git a/src/ngSanitize/sanitize.js b/src/ngSanitize/sanitize.js
index 4e722273cf45..a7741a784ba6 100644
--- a/src/ngSanitize/sanitize.js
+++ b/src/ngSanitize/sanitize.js
@@ -58,7 +58,7 @@ var htmlSanitizeWriter;
  * @returns {string} Sanitized HTML.
  *
  * @example
-   <example module="sanitizeExample" deps="angular-sanitize.js">
+   <example module="sanitizeExample" deps="angular-sanitize.js" name="sanitize-service">
    <file name="index.html">
      <script>
          angular.module('sanitizeExample', ['ngSanitize'])
diff --git a/src/ngTouch/directive/ngClick.js b/src/ngTouch/directive/ngClick.js
index fcf22dc99257..226541939d50 100644
--- a/src/ngTouch/directive/ngClick.js
+++ b/src/ngTouch/directive/ngClick.js
@@ -36,7 +36,7 @@
  * upon tap. (Event object is available as `$event`)
  *
  * @example
-    <example module="ngClickExample" deps="angular-touch.js">
+    <example module="ngClickExample" deps="angular-touch.js" name="ng-touch-ng-click">
       <file name="index.html">
         <button ng-click="count = count + 1" ng-init="count=0">
           Increment
diff --git a/src/ngTouch/directive/ngSwipe.js b/src/ngTouch/directive/ngSwipe.js
index e331ebf9fbfe..e05632044747 100644
--- a/src/ngTouch/directive/ngSwipe.js
+++ b/src/ngTouch/directive/ngSwipe.js
@@ -22,7 +22,7 @@
  * upon left swipe. (Event object is available as `$event`)
  *
  * @example
-    <example module="ngSwipeLeftExample" deps="angular-touch.js">
+    <example module="ngSwipeLeftExample" deps="angular-touch.js" name="ng-swipe-left">
       <file name="index.html">
         <div ng-show="!showActions" ng-swipe-left="showActions = true">
           Some list content, like an email in the inbox
@@ -55,7 +55,7 @@
  * upon right swipe. (Event object is available as `$event`)
  *
  * @example
-    <example module="ngSwipeRightExample" deps="angular-touch.js">
+    <example module="ngSwipeRightExample" deps="angular-touch.js" name="ng-swipe-right">
       <file name="index.html">
         <div ng-show="!showActions" ng-swipe-left="showActions = true">
           Some list content, like an email in the inbox