Docs changes.

public/docs/js/latest/guide/displaying-data.jade

@@ -1,4 +1,10 @@
+.callout.is-helpful
+  header Live Examples
+  p.
+    If you want to skip to the working examples you can check out these links on Plunker. <a href='http://plnkr.co/edit/pQojSb3CTfTEejX0wGjO?p=preview')> TypeScript Example</a> or <a href='http://plnkr.co/edit/GOJiWOEem9jrOyEeY3uW?p=preview> ES5 Example</a>.
+
 .l-main-section
+
   p.
       Displaying data is job number one for any good application.  In Angular, you bind data to elements in HTML
       templates and Angular automatically updates the UI as data changes.
@@ -10,16 +16,6 @@
   div(align='center')
         img(src='displaying-data-example1.png')
 
-    .l-sub-section
-        h3#section-examples Live Examples
-        p.
-          If you want to skip the working examples you can check out these links on Plunker.
-        ul
-         li
-            a(href='http://plnkr.co/edit/pQojSb3CTfTEejX0wGjO?p=preview') TypeScript
-         li
-            a(href='http://plnkr.co/edit/GOJiWOEem9jrOyEeY3uW?p=preview') ES5
-
 .l-main-section
     h2#section-create-an-entry-point Create an entry point
 

public/docs/js/latest/guide/setup.jade

@@ -1,4 +1,10 @@
 .l-main-section
+
+  .callout.is-helpful
+    header Live Examples
+    p.
+      If you want to skip to the working examples you can check out these links on Plunker. <a href='http://plnkr.co/edit/MRz2i7sjupzxERPAa3SF?p=preview')> TypeScript Example</a> or <a href='http://plnkr.co/edit/wzzKo4etk24t0oAnL6ep?p=preview'> ES5 Example</a>.
+
   h2#section-install-or-plunker Install Angular or Use Plunker
   p There are four steps to create any Angular app:
   ol
@@ -22,10 +28,6 @@
   pre.prettyprint.lang-bash
     code python -m SimpleHTTPServer 8000
 
-  p.
-    If you want to skip the working examples you can check out these links on Plunker. <a href='http://plnkr.co/edit/MRz2i7sjupzxERPAa3SF?p=preview')> TypeScript Example</a> or
-    <a href='http://plnkr.co/edit/wzzKo4etk24t0oAnL6ep?p=preview'> ES5 Example</a>.
-
 .l-main-section
   h2#section-create-an-entry-point Create an entry point
   p.

public/docs/js/latest/guide/user-input.jade

@@ -1,7 +1,13 @@
 .l-main-section
+
+  .callout.is-helpful
+    header Live Examples
+    p.
+      If you want to skip to the working examples you can check out these links on Plunker. <a href='http://plnkr.co/edit/htvpvg2RxemT2W0mYu0y?p=preview')> TypeScript Example</a> or <a href='http://plnkr.co/edit/sjRKtQd10ARLM2GTsQKi?p=preview> ES5 Example</a>.
+          
   p.
     You can make your application respond to user input by associating events with functions in your controller
-    using the event syntax using <strong>()</strong> to surround the name of an event.
+    using the event syntax using <code>(event)</code> to surround the name of an event.
   p.
     For a particular control like an input you can have it call methods on your controller on keyup event like so:
 
@@ -10,7 +16,7 @@
       &lt;input (keyup)="myControllerMethod()"&gt;
   p.
     As in previous examples, you can make element references available to other parts of the template as a local
-    variable using the # syntax.  With this and events, we can do the old "update text as you type" example:
+    variable using the <code>#var</code> syntax.  With this and events, we can do the old "update text as you type" example:
 
   pre.prettyprint.lang-html
     code.
@@ -18,20 +24,20 @@
       &lt;p&gt;{{myname.value}}&lt;/p&gt;
 
   p.text-body(ng-non-bindable).
-    The <code>#my-name</code> creates a local variable in the template that we'll refer to below in the
+    The <code>#myname</code> creates a local variable in the template that we'll refer to below in the
     <code>&lt;p&gt;</code> element.  The <code>(keyup)</code> tells Angular to trigger updates when it gets a keyup
-    event.  And the <code>{{my-name.value}}</code> binds the text node of the  <code>&lt;p&gt;</code> element to the
+    event.  And the <code>{{myname.value}}</code> binds the text node of the  <code>&lt;p&gt;</code> element to the
     input's value property.
   p Let's do something a little more complex where users enter items and add them to a list like this:
   div(align='center')
       img(src='user-input-example1.png')
 
 
-.l-main-section
+.l-ain-section
   h2#section-create-an-array-property Create an array property
   p.
-    With the default bootstrapping in place, create a TodoController class that will manage interactions with the
+    With the default bootstrapping in place, create a controller class that will manage interactions with the
-    list. Inside TodoController, add an array with an initial list of items.  Then add a method that pushes new items
+    list. Inside the controller, add an array with an initial list of items.  Then add a method that pushes new items
     on the array when called.
 
   pre.prettyprint.linenums.lang-javascript
@@ -48,7 +54,7 @@
     code.
       //TypeScript
       class TodoList {
-        todos: Array<string>;
+        todos: Array&lt;string&gt;
         constructor() {
           this.todos = ["Eat Breakfast", "Walk Dog", "Breathe"];
         }
@@ -61,7 +67,7 @@
   header Production Best Practice
   p.
       As with the previous example, in a production application you will separate your model out into another class
-      and inject it into <code>TodoController</code>.  We've omitted it here for brevity.
+      and inject it into <code>TodoList</code>.  We've omitted it here for brevity.
 
 .l-main-section
   h2#section-display-the-list-of-todos Display the list of todos
@@ -95,7 +101,7 @@
     code.
         &lt;button (click)="addTodo(todotext.domElement.value)"&gt;Add Todo&lt;/button&gt;
 
-  p And then create the doneTyping() method on TodoList and handle adding the todo text.
+  p And then create the <code>doneTyping()</code> method on TodoList and handle adding the todo text.
 
   pre.prettyprint.lang-javascript
     code.
@@ -188,7 +194,3 @@
       }
 
       bootstrap(TodoList);
-
-
-
-