<!doctype html>
<html lang="en" ng-app>
    <head>
        <meta charset="utf-8">
        <title>Google Phone Gallery</title>
        <link rel="stylesheet" href="css/app.css">
        <link rel="stylesheet" href="css/bootstrap.css">
        <script src="lib/angular/angular.js"></script>
        <script src="js/controllers.js"></script>
    </head>
    <body ng-controller="PhoneListCtrl">

        <div class="container-fluid">
            <div class="row-fluid">
                <div class="span2">
                    <!--Sidebar content-->
                    {{or}}
                    Search: <input ng-model="query">
                    Sort by:
                    <select ng-model="orderProp">
                        <option value="name">Alphabetical</option>
                        <option value="age">Newest</option>
                    </select>

                </div>
                <div class="span10">
                    <!--Body content-->

                    <ul class="phones">
                        <li ng-repeat="phone in phones | filter:query | orderBy:orderProp">
                            {{phone.name}}
                            <p>{{phone.snippet}}</p>
                        </li>
                    </ul>

                </div>
            </div>
        </div>

    </body>
</html>