<!DOCTYPE html>
<html>

  <head>
    <script data-require="angular.js@1.1.5" data-semver="1.1.5" src="http://code.angularjs.org/1.1.5/angular.min.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body ng-app="myApp" ng-controller="myController">
   <h2>Basic Sort</h2>
   <div><h3>Order By:</h3>
      <select data-ng-model='selectedSortOrder'
           data-ng-options="option for option in ['name', 'lastName', 'age']" 
           data-ng-init="selectedSortOrder='name'">
      </select>
   </div>
   <div >
     <h3>List of results:</h3>
     <div ng-repeat="person in results | orderBy:selectedSortOrder">
       {{person.name}} {{person.lastName}} - {{person.age}}
     </div>
   </div>
   <h4>Debugging...</h4>
   <div>
     Selected Sort Order: <pre>{{selectedSortOrder | json}}</pre>
     Results: <pre>{{results | json}}</pre> 
   </div>
  </body>

</html>
var app = angular.module('myApp', []);
app.controller('myController', function($scope){
  $scope.results = [
    {
      "name": "Santiago",
      "lastName": "Doe",
      "age": 32
    },
    {
      "name": "Pablo",
      "lastName": "Zeta",
      "age": 28
    },
    {
      "name": "Veronica",
      "lastName": "Beta",
      "age": 27
    }
    ]

})
/* Styles go here */