PhoneCat Tutorial App

<!doctype html>
<html ng-app="phonecatApp">

<head>
  <meta charset="utf-8">
  <title>My HTML File</title>
  <link rel="stylesheet" href="style.css">
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.6/angular.min.js"></script>
  <script src="script.js"></script>

  <!-- SCROLLS -->
  <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" />
</head>

<body ng-controller="PhoneListCtrl">

  <div class="container-fluid">
    <div class="row">
      <div class="col-md-2">
        <!--Sidebar content-->

        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" class="thumbnail">
            <a href="#/phones/{{phone.id}}" class="thumb"><img ng-src="{{phone.imageUrl}}"></a>
            <a href="#/phones/{{phone.id}}">{{phone.name}}</a>
            <p>{{phone.snippet}}</p>
          </li>
        </ul>

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




</body>

</html>

var phonecatApp = angular.module('phonecatApp', []);

phonecatApp.controller('PhoneListCtrl', function ($scope, $http) {
  $http.get('phones/phones.json').success(function(data) {
    $scope.phones = data;
  });

  $scope.orderProp = 'age';
});

/* Styles go here */

[
    {
        "age": 0, 
        "id": "motorola-xoom-with-wi-fi", 
        "imageUrl": "https://raw.githubusercontent.com/angular/angular-phonecat/master/app/img/phones/motorola-xoom-with-wi-fi.0.jpg", 
        "name": "Motorola XOOM\u2122 with Wi-Fi", 
        "snippet": "The Next, Next Generation\r\n\r\nExperience the future with Motorola XOOM with Wi-Fi, the world's first tablet powered by Android 3.0 (Honeycomb)."
    }, 
    {
        "age": 3, 
        "id": "dell-streak-7", 
        "imageUrl": "https://raw.githubusercontent.com/angular/angular-phonecat/master/app/img/phones/dell-streak-7.0.jpg", 
        "name": "Dell Streak 7", 
        "snippet": "Introducing Dell\u2122 Streak 7. Share photos, videos and movies together. It\u2019s small enough to carry around, big enough to gather around."
    }, 
    {
        "age": 8, 
        "id": "samsung-galaxy-tab", 
        "imageUrl": "https://github.com/angular/angular-phonecat/blob/master/app/img/phones/samsung-galaxy-tab.0.jpg?raw=true", 
        "name": "Samsung Galaxy Tab\u2122", 
        "snippet": "Feel Free to Tab\u2122. The Samsung Galaxy Tab\u2122 brings you an ultra-mobile entertainment experience through its 7\u201d display, high-power processor and Adobe\u00ae Flash\u00ae Player compatibility."
    }, 
    {
        "age": 13, 
        "carrier": "T-Mobile", 
        "id": "motorola-defy-with-motoblur", 
        "imageUrl": "https://github.com/angular/angular-phonecat/blob/master/app/img/phones/motorola-defy-with-motoblur.0.jpg?raw=true", 
        "name": "Motorola DEFY\u2122 with MOTOBLUR\u2122", 
        "snippet": "Are you ready for everything life throws your way?"
    }, 
    {
        "age": 14, 
        "carrier": "T-Mobile", 
        "id": "t-mobile-mytouch-4g", 
        "imageUrl": "https://github.com/angular/angular-phonecat/blob/master/app/img/phones/t-mobile-mytouch-4g.0.jpg?raw=true", 
        "name": "T-Mobile myTouch 4G", 
        "snippet": "The T-Mobile myTouch 4G is a premium smartphone designed to deliver blazing fast 4G speeds so that you can video chat from practically anywhere, with or without Wi-Fi."
    }, 
    {
        "age": 15, 
        "carrier": "US Cellular", 
        "id": "samsung-mesmerize-a-galaxy-s-phone", 
        "imageUrl": "https://github.com/angular/angular-phonecat/blob/master/app/img/phones/samsung-mesmerize-a-galaxy-s-phone.0.jpg?raw=true", 
        "name": "Samsung Mesmerize\u2122 a Galaxy S\u2122 phone", 
        "snippet": "The Samsung Mesmerize\u2122 delivers a cinema quality experience like you\u2019ve never seen before. Its innovative 4\u201d touch display technology provides rich picture brilliance,even outdoors"
    }, 
    {
        "age": 18, 
        "id": "t-mobile-g2", 
        "imageUrl": "https://github.com/angular/angular-phonecat/blob/master/app/img/phones/t-mobile-g2.0.jpg?raw=true", 
        "name": "T-Mobile G2", 
        "snippet": "The T-Mobile G2 with Google is the first smartphone built for 4G speeds on T-Mobile's new network. Get the information you need, faster than you ever thought possible."
    }, 
    {
        "age": 19, 
        "id": "motorola-charm-with-motoblur", 
        "imageUrl": "https://github.com/angular/angular-phonecat/blob/master/app/img/phones/motorola-charm-with-motoblur.0.jpg?raw=true", 
        "name": "Motorola CHARM\u2122 with MOTOBLUR\u2122", 
        "snippet": "Motorola CHARM fits easily in your pocket or palm.  Includes MOTOBLUR service."
    }
]