<!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 with more options iterating over Object</h2>
   <div><h3>Order By:</h3>
      <select data-ng-model='selectedSortOrder2'
           data-ng-options="k as v for (k,v) in {'+name': 'Name: A-Z','-name': 'Name: Z-A', '+lastName': 'Last Name: A-Z', '-lastName': 'Last Name: Z-A ', '+age': 'Age: Young to Experienced', '-age': 'Age: Experienced to Young' }" 
           data-ng-init="selectedSortOrder2='+name'">
      </select>  
   </div>
   <div>
     <h3>List of results:</h3>
     <div ng-repeat="person in results | orderBy:selectedSortOrder2">
       {{person.name}} {{person.lastName}} - {{person.age}}
     </div>
   </div>
   <h4>Debugging...</h4>
   <div>
     Selected Sort Order: <pre>{{selectedSortOrder2 | 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 */