p.
    Mission: You should be able to display data from both properties and lists from a component’s controller to the
    view.
.l-main-section
    h2#section-examples Examples:
    ul
     li
        a(href='http://plnkr.co/edit/pQojSb3CTfTEejX0wGjO?p=preview') TypeScript
     li
        a(href='http://plnkr.co/edit/GOJiWOEem9jrOyEeY3uW?p=preview') ES5
    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.
    p.
     Let's walk through how we'd display a property, a list of properties, and then conditionally show content
     based on state.
    p.
     We'll end up with a UI that looks like this:
    div(align='center')
      img(src='displaying-data-example1.png')

.l-main-section
    h2#section-create-an-entry-point Create an entry point
    p Open your favorite editor and create a show-properties.html file with the content:
    pre.prettyprint.linenums.lang-javascript
        code.
           //ES5
           <display></display>

    pre.prettyprint.linenums.lang-typescript
        code.
          //TypeScript
          <display></display>

    p
     | The <code>&lt;display&gt;</code> component here acts as the site where you'll insert your application.
     | We'll assume a structure like this for the rest of the examples here and just focus on the parts that
     | are different.

.l-main-section
    h2#section-showing-properties-with-interpolation Showing properties with interpolation
    p.text-body(ng-non-bindable)
     | The simple method for binding text into templates is through interpolation where you put the name of a property
     | inside <strong>{{ }}</strong>.

    p To see this working, create another file, show-properties.js, and add the following: