Angular/Bootswatchpaper - binding

Learning Angular via Lynda and http://bootswatch.com/paper/

by Susan Delgado

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js"></script>
<script src="http://fonts.googleapis.com/css?family=Roboto:300,400,500"></script>
<div ng-app="myApp" class="container">
    <div class="main row" ng-controller="MyController">
        <div class="search col-xs-12 col-sm-12 col-md-12 page-header navbar">
             <h1>Directory</h1>

            <input ng-model="query" placeholder="Search for artist" autofocus="" class="form-control" id="focusedInput" />
            <label class="form-group">by:
                <select ng-model="artistOrder">
                    <option value="name" selected>Name</option>
                    <option value="reknown">Renknown</option>
                </select>
            </label>
            <label class="form-group">
                <input type="radio" checked="" ng-model="direction" name="direction" /> ascending
            </label>
            <label class="form-group">
                <input type="radio" ng-model="direction" name="direction" value="reverse"/> descending
            </label>
        </div>
        <ul class="artistlist">
            <li class="artist cf col-xs-12 col-sm-12 col-md-12 btn btn-default" ng-repeat="item in artists | limitTo: 5 | filter: query | orderBy:artistOrder:direction">
           
                    <img class="col-xs-2 col-sm-2col-md-2" ng-src="{{item.shortname}}" alt="{{item.name}}" />
                    <div class="info col-xs-10 col-sm-10 col-md-10">
                         <h4>{{item.name | uppercase }}</h4>

                        <p>{{item.reknown}}</p>
                        <p>{{item.bio}}</p>
                    </div>
            </li>
        </ul>
    </div>
</div>

CSS

/*!
 * bootswatch v3.3.1+2
 * Homepage: http://bootswatch.com
 * Copyright 2012-2014 Thomas Park
 * Licensed under MIT
 * Based on Bootstrap
*/

/*! normalize.css v3.0.2 | MIT License | git.io/normalize */
 html {
    font-family: sans-serif;
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
}
body {
    margin: 0;
}
article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary {
    display: block;
}
audio, canvas, progress, video {
    display: inline-block;
    vertical-align: baseline;
}
audio:not([controls]) {
    display: none;
    height: 0;
}
[hidden], template {
    display: none;
}
a {
    background-color: transparent;
}
a:active, a:hover {
    outline: 0;
}
abbr[title] {
    border-bottom: 1px dotted;
}
b, strong {
    font-weight: bold;
}
dfn {
    font-style: italic;
}
h1 {
    font-size: 2em;
    margin: 0.67em 0;
}
mark {
    background: #ff0;
    color: #000;
}
small {
    font-size: 80%;
}
sub, sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
}
sup {
    top: -0.5em;
}
sub {
    bottom: -0.25em;
}
img {
    border: 0;
}
svg:not(:root) {
    overflow: hidden;
}
figure {
    margin: 1em 40px;
}
hr {
    -moz-box-sizing: content-box;
    -webkit-box-sizing: content-box;
    box-sizing: content-box;
    height: 0;
}
pre {
    overflow: auto;
}
code, kbd, pre, samp {
    font-family: monospace, monospace;
    font-size: 1em;
}
button, input, optgroup, select, textarea {
    color: inherit;
    font: inherit;
    margin: 0;
}
button {
    overflow: visible;
}
button, select {
    text-transform: none;
}
button, html input[type="button"], input[type="reset"], input[type="submit"] {
    -webkit-appearance: button;
    cursor: pointer;
}
button[disabled], html input[disabled] {
    cursor: default;
}
button::-moz-focus-inner, input::-moz-focus-inner {
    border: 0;
    padding: 0;
}
input {
    line-height: normal;
}
input[type="checkbox"],...

JavaScript

//Name spacing
var myApp = angular.module('myApp', []);

myApp.controller('MyController',

function MyController($scope) {

    $scope.artists = [{
        "name": "Barot Bellingham",
            "shortname": "http://lorempixel.com/100/100/",
            "reknown": "Royal Academy of Painting and Sculpture",
            "bio": "Barot has just finished his final year at The Royal Academy of Painting and Sculpture, where he excelled in glass etching paintings and portraiture. Hailed as one of the most diverse artists of his generation, Barot is equally as skilled with watercolors as he is with oils, and is just as well-balanced in different subject areas. Barot's collection entitled \"The Un-Collection\" will adorn the walls of Gilbert Hall, depicting his range of skills and sensibilities - all of them, uniquely Barot, yet undeniably different"
    }, {
        "name": "Jonathan G. Ferrar II",
            "shortname": "http://lorempixel.com/100/100/",
            "reknown": "Artist to Watch in 2012",
            "bio": "The Artist to Watch in 2012 by the London Review, Johnathan has already sold one of the highest priced-commissions paid to an art student, ever on record. The piece, entitled Gratitude Resort, a work in oil and mixed media, was sold for $750,000 and Jonathan donated all the proceeds to Art for Peace, an organization that provides college art scholarships for creative children in developing nations"
    }, {
        "name": "Hillary Hewitt Goldwynn-Post",
            "shortname": "http://lorempixel.com/100/100/",
            "reknown": "New York University",
            "bio": "Hillary is a sophomore art sculpture student at New York University, and has already won all the major international prizes for new sculptors, including the Divinity Circle, the International Sculptor's Medal, and the Academy of Paris Award. Hillary's CAC exhibit features 25 abstract watercolor paintings that contain only water images including waves, deep sea, and river."
   ...