docs(examples): give all examples a name

Closes #14958

Author: petebacondarwin

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']">

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 }" />

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

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'">

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) {

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', {

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">

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() {

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>

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>

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>

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 }}