<!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 Array</h2>
   <div>
      <h3>Order By:</h3>
      <select data-ng-model='selectedSortOrder'
           data-ng-options="option.value as option.name for option in [{'value':'+name','name':'Name: A-Z'},{'value':'-name','name':'Name: Z-A'}, {'value':'+lastName','name':'Last Name: A-Z'}, {'value':'-lastName','name':'Last Name: Z-A'}, {'value':'+age','name':'Age: Young to Experienced'}, {'value':'-age','name':'Age: Experienced to Young'}]" 
           data-ng-init="selectedSortOrder='+age'">
      </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>{{selectedSortOrder3 | 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 */