docs(tutorial): update all the remaining steps

I made some diagrams and portions of the text that are stil stale
invisible. We'll fix these in the next relese.

1 files changed, 34 insertions, 42 deletions

diff --git a/docs/content/tutorial/step_04.ngdoc b/docs/content/tutorial/step_04.ngdoc
index 39e8eeec..900a0340 100644
--- a/docs/content/tutorial/step_04.ngdoc
+++ b/docs/content/tutorial/step_04.ngdoc
@@ -25,25 +25,21 @@ 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 ng-model="query">
-    </li>
-    <li>
-      Sort by:
-      <select ng-model="orderProp">
-        <option value="name">Alphabetical</option>
-        <option value="age">Newest</option>
-      </select>
-    </li>
-  </ul>
-
-  <ul class="phones">
-    <li ng-repeat="phone in phones | filter:query | orderBy:orderProp">
-      {{phone.name}}
-      <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>
+
+...
+
+        <ul class="phones">
+          <li ng-repeat="phone in phones | filter:query | orderBy:orderProp">
+            {{phone.name}}
+            <p>{{phone.snippet}}</p>
+          </li>
+        </ul>
 ...
 </pre>
 
@@ -72,18 +68,18 @@ 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}];
+  $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}
+  ];
 
   $scope.orderProp = 'age';
 }
@@ -114,11 +110,11 @@ __`test/unit/controllerSpec.js`:__
 <pre>
 describe('PhoneCat controllers', function() {
 
-  describe('PhoneListCtrl', function() {
-    var scope, $browser, ctrl;
+  describe('PhoneListCtrl', function(){
+    var scope, ctrl;
 
     beforeEach(function() {
-      scope = {};
+      scope = {},
       ctrl = new PhoneListCtrl(scope);
     });
 
@@ -147,7 +143,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.
@@ -157,15 +153,14 @@ __`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('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('phone.name')).
           toEqual(["MOTOROLA XOOM\u2122",
@@ -183,12 +178,9 @@ Angular's server}.
 
 # Experiments
 
-<div style="display:none">
-!!!!! TODO(i): we need to fix select/option to support unknown option !!!!!
 * 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".
-</div>
+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.