doc(guide): corrected examples

docs/content/guide/compiler.ngdoc

@@ -66,45 +66,45 @@ to write directives.
 Here is a directive which makes any element draggable. Notice the `draggable` attribute on the
 `<span>` element.
 
-<doc-example module="drag">
-  <doc-source>
-    <script>
-      angular.module('drag', []).
-        directive('draggable', function($document) {
-          var startX=0, startY=0, x = 0, y = 0;
-          return function(scope, element, attr) {
+<example module="drag">
+  <file name="script.js">
+    angular.module('drag', []).
+      directive('draggable', function($document) {
+        var startX=0, startY=0, x = 0, y = 0;
+        return function(scope, element, attr) {
+          element.css({
+           position: 'relative',
+           border: '1px solid red',
+           backgroundColor: 'lightgrey',
+           cursor: 'pointer'
+          });
+          element.bind('mousedown', function(event) {
+            startX = event.screenX - x;
+            startY = event.screenY - y;
+            $document.bind('mousemove', mousemove);
+            $document.bind('mouseup', mouseup);
+          });
+
+          function mousemove(event) {
+            y = event.screenY - startY;
+            x = event.screenX - startX;
             element.css({
-             position: 'relative',
-             border: '1px solid red',
-             backgroundColor: 'lightgrey',
-             cursor: 'pointer'
+              top: y + 'px',
+              left:  x + 'px'
             });
-            element.bind('mousedown', function(event) {
-              startX = event.screenX - x;
-              startY = event.screenY - y;
-              $document.bind('mousemove', mousemove);
-              $document.bind('mouseup', mouseup);
-            });
-            
-            function mousemove(event) {
-              y = event.screenY - startY;
-              x = event.screenX - startX;
-              element.css({
-                top: y + 'px',
-                left:  x + 'px'
-              });
-            }
-            
-            function mouseup() {
-              $document.unbind('mousemove', mousemove);
-              $document.unbind('mouseup', mouseup);
-            }
           }
-        });
-    </script>
+
+          function mouseup() {
+            $document.unbind('mousemove', mousemove);
+            $document.unbind('mouseup', mouseup);
+          }
+        }
+      });
+  </file>
+  <file name="index.html">
     <span draggable>Drag ME</span>
-  </doc-source>
-</doc-example>
+  </file>
+</file>
 
 
 The presence of `draggable` attribute an any element gives the element new behavior. The beauty of

docs/content/guide/overview.ngdoc

@@ -75,14 +75,14 @@ concepts which the application developer may face:
   * computing new values based on the model.
   * formatting output in a user specific locale.
 
-<doc-example>
-  <doc-source>
-    <script>
-      function InvoiceCntl($scope) {
-        $scope.qty = 1;
-        $scope.cost = 19.95;
-      }
-    </script>
+<example>
+  <file name="script.js">
+    function InvoiceCntl($scope) {
+      $scope.qty = 1;
+      $scope.cost = 19.95;
+    }
+  </file>
+  <file name="index.html">
     <div ng-controller="InvoiceCntl">
       <b>Invoice:</b>
       <br>
@@ -97,16 +97,16 @@ concepts which the application developer may face:
       <hr>
       <b>Total:</b> {{qty * cost | currency}}
     </div>
-  </doc-source>
-  <doc-scenario>
+  </file>
+  <file name="scenario.js">
     it('should show of angular binding', function() {
       expect(binding('qty * cost')).toEqual('$19.95');
       input('qty').enter('2');
       input('cost').enter('5.00');
       expect(binding('qty * cost')).toEqual('$10.00');
     });
-  </doc-scenario>
-</doc-example>
+  </file>
+</example>
 
 Try out the Live Preview above, and then let's walk through the example and describe what's going
 on.

docs/content/guide/scope.ngdoc

@@ -38,17 +38,17 @@ arrangement isolates the controller from the directive as well as from DOM. This
 point since it makes the controllers view agnostic, which greatly improves the testing story of
 the applications.
 
-<doc-example>
-  <doc-source>
-    <script>
-      function MyController($scope) {
-        $scope.username = 'World';
+<example>
+  <file name="script.js">
+    function MyController($scope) {
+      $scope.username = 'World';
 
-        $scope.sayHello = function() {
-          $scope.greeting = 'Hello ' + $scope.username + '!';
-        };
-      }
-    </script>
+      $scope.sayHello = function() {
+        $scope.greeting = 'Hello ' + $scope.username + '!';
+      };
+    }
+  </file>
+  <file name="index.html">
     <div ng-controller="MyController">
       Your name:
         <input type="text" ng-model="username">
@@ -56,8 +56,8 @@ the applications.
       <hr>
       {{greeting}}
     </div>
-  </doc-source>
-</doc-example>
+  </file>
+</example>
 
 In the above example notice that the `MyController` assigns `World` to the `username` property of
 the scope. The scope then notifies the `input` of the assignment, which then renders the input
@@ -117,26 +117,26 @@ inheritance, and child scopes prototypically inherit from their parents.
 
 This example illustrates scopes in application, and prototypical inheritance of properties.
 
-<doc-example>
-  <doc-source>
-    <style>
-      /* remove .doc-example-live in jsfiddle */
-      .doc-example-live .ng-scope {
-        border: 1px dashed red;
-      }
-    </style>
-    <script>
-      function EmployeeController($scope) {
-        $scope.department = 'Engineering';
-        $scope.employee = {
-          name: 'Joe the Manager',
-          reports: [
-            {name: 'John Smith'},
-            {name: 'Mary Run'}
-          ]
-        };
-      }
-    </script>
+<example>
+  <file name="style.css">
+    /* remove .doc-example-live in jsfiddle */
+    .doc-example-live .ng-scope {
+      border: 1px dashed red;
+    }
+  </file>
+  <file name="script.js">
+    function EmployeeController($scope) {
+      $scope.department = 'Engineering';
+      $scope.employee = {
+        name: 'Joe the Manager',
+        reports: [
+          {name: 'John Smith'},
+          {name: 'Mary Run'}
+        ]
+      };
+    }
+  </file>
+  <file name="index.html">
     <div ng-controller="EmployeeController">
       Manager: {{employee.name}} [ {{department}} ]<br>
       Reports:
@@ -148,8 +148,8 @@ This example illustrates scopes in application, and prototypical inheritance of
       <hr>
       {{greeting}}
     </div>
-  </doc-source>
-</doc-example>
+  </file>
+</example>
 
 Notice that the Angular automatically places `ng-scope` class on elements where scopes are
 attached. The `<style>` definition in this example highlights in red the new scope locations. The
@@ -185,16 +185,16 @@ Scopes can propagate events in similar fashion to DOM events. The event can be {
 api/angular.module.ng.$rootScope.Scope#$broadcast broadcasted} to the scope children or {@link
 api/angular.module.ng.$rootScope.Scope#$emit emitted} to scope parents.
 
-<doc-example>
-  <doc-source>
-    <script>
-      function EventController($scope) {
-        $scope.count = 0;
-        $scope.$on('MyEvent', function() {
-          $scope.count++;
-        });
-      }
-    </script>
+<example>
+  <file name="script.js">
+    function EventController($scope) {
+      $scope.count = 0;
+      $scope.$on('MyEvent', function() {
+        $scope.count++;
+      });
+    }
+  </file>
+  <file name="index.html">
     <div ng-controller="EventController">
       Root scope <tt>MyEvent</tt> count: {{count}}
       <ul>
@@ -211,8 +211,8 @@ api/angular.module.ng.$rootScope.Scope#$emit emitted} to scope parents.
         </li>
       </ul>
     </div>
-  </doc-source>
-</doc-example>
+  </file>
+</example>