1 files changed, 82 insertions, 77 deletions
diff --git a/docs/content/guide/expression.ngdoc b/docs/content/guide/expression.ngdoc
index b0d6c836..5aa05236 100644
--- a/docs/content/guide/expression.ngdoc
+++ b/docs/content/guide/expression.ngdoc
@@ -33,55 +33,58 @@ controller method and call the method. If you want to `eval()` an angular expres
 JavaScript, use the {@link ng.$rootScope.Scope#methods_$eval `$eval()`} method.
 
 ## Example
-<doc:example>
-<doc:source>
- 1+2={{1+2}}
-</doc:source>
-<doc:protractor>
- it('should calculate expression in binding', function() {
-   expect(element(by.binding('1+2')).getText()).toEqual('1+2=3');
- });
-</doc:protractor>
-</doc:example>
+<example>
+  <file name="index.html">
+    1+2={{1+2}}
+  </file>
+
+  <file name="protractor.js" type="protractor">
+    it('should calculate expression in binding', function() {
+      expect(element(by.binding('1+2')).getText()).toEqual('1+2=3');
+    });
+  </file>
+</example>
 
 You can try evaluating different expressions here:
 
-<doc:example>
-<doc:source>
- <script>
-   function Cntl2($scope) {
-     var exprs = $scope.exprs = [];
-     $scope.expr = '3*10|currency';
-     $scope.addExp = function(expr) {
+<example>
+  <file name="index.html">
+    <div ng-controller="Cntl2" class="expressions">
+      Expression:
+      <input type='text' ng-model="expr" size="80"/>
+      <button ng-click="addExp(expr)">Evaluate</button>
+      <ul>
+       <li ng-repeat="expr in exprs track by $index">
+         [ <a href="" ng-click="removeExp($index)">X</a> ]
+         <tt>{{expr}}</tt> => <span ng-bind="$parent.$eval(expr)"></span>
+        </li>
+      </ul>
+    </div>
+  </file>
+
+  <file name="script.js">
+    function Cntl2($scope) {
+      var exprs = $scope.exprs = [];
+      $scope.expr = '3*10|currency';
+      $scope.addExp = function(expr) {
         exprs.push(expr);
-     };
-
-     $scope.removeExp = function(index) {
-       exprs.splice(index, 1);
-     };
-   }
- </script>
- <div ng-controller="Cntl2" class="expressions">
-   Expression:
-   <input type='text' ng-model="expr" size="80"/>
-   <button ng-click="addExp(expr)">Evaluate</button>
-   <ul>
-    <li ng-repeat="expr in exprs track by $index">
-      [ <a href="" ng-click="removeExp($index)">X</a> ]
-      <tt>{{expr}}</tt> => <span ng-bind="$parent.$eval(expr)"></span>
-     </li>
-   </ul>
- </div>
-</doc:source>
-<doc:protractor>
- it('should allow user expression testing', function() {
-    element(by.css('.expressions button')).click();
-    var lis = element(by.css('.expressions ul')).element.all(by.repeater('expr in exprs'));
-    expect(lis.count()).toBe(1);
-    expect(lis.get(0).getText()).toEqual('[ X ] 3*10|currency => $30.00');
- });
-</doc:protractor>
-</doc:example>
+      };
+
+      $scope.removeExp = function(index) {
+        exprs.splice(index, 1);
+      };
+    }
+  </file>
+
+  <file name="protractor.js" type="protractor">
+    it('should allow user expression testing', function() {
+      element(by.css('.expressions button')).click();
+      var lis = element(by.css('.expressions ul')).element.all(by.repeater('expr in exprs'));
+      expect(lis.count()).toBe(1);
+      expect(lis.get(0).getText()).toEqual('[ X ] 3*10|currency => $30.00');
+    });
+  </file>
+</example>
 
 
 # Property Evaluation
@@ -92,38 +95,40 @@ to global window properties, Angular expressions have to use {@link ng.$window
 defined on `window`, in an expression you must use `$window.alert()`. This is done intentionally to
 prevent accidental access to the global state (a common source of subtle bugs).
 
-<doc:example>
-<doc:source>
- <script>
-   function Cntl1($window, $scope){
-     $scope.name = 'World';
-
-     $scope.greet = function() {
-       $window.alert('Hello ' + $scope.name);
-     }
-   }
- </script>
- <div class="example2" ng-controller="Cntl1">
-   Name: <input ng-model="name" type="text"/>
-   <button ng-click="greet()">Greet</button>
- </div>
-</doc:source>
-<doc:protractor>
-  it('should calculate expression in binding', function() {
-    if (browser.params.browser = 'safari') {
-      // Safari can't handle dialogs.
-      return;
-    };
-    element(by.css('[ng-click="greet()"]')).click();
-
-    var alertDialog = browser.switchTo().alert();
-
-    expect(alertDialog.getText()).toEqual('Hello World');
-
-    alertDialog.accept();
-  });
-</doc:protractor>
-</doc:example>
+<example>
+  <file name="index.html">
+    <div class="example2" ng-controller="Cntl1">
+      Name: <input ng-model="name" type="text"/>
+      <button ng-click="greet()">Greet</button>
+    </div>
+  </file>
+
+  <file name="script.js">
+    function Cntl1($window, $scope){
+      $scope.name = 'World';
+
+      $scope.greet = function() {
+        $window.alert('Hello ' + $scope.name);
+      };
+    }
+  </file>
+
+  <file name="protractor.js" type="protractor">
+    it('should calculate expression in binding', function() {
+      if (browser.params.browser == 'safari') {
+        // Safari can't handle dialogs.
+        return;
+      }
+      element(by.css('[ng-click="greet()"]')).click();
+
+      var alertDialog = browser.switchTo().alert();
+
+      expect(alertDialog.getText()).toEqual('Hello World');
+
+      alertDialog.accept();
+    });
+  </file>
+</example>
 
 ## Forgiving