<!DOCTYPE html> <html ng-app="PhonecatApp" xmlns="http://www.w3.org/1999/xhtml"> <head> <meta charset="utf-8"/> <script src="assets/angular-min.js" lang="text/javascript"></script> <title>AnguarJS demonstration</title> <script lang="text/javascript"> const PhonecatApp = angular.module("PhonecatApp", []); PhonecatApp.controller("PhoneListCtrl", function($scope) { $scope.phones = [ {name: "Nexus S", snippet: "Fast just got faster with Nexus S.", age: 1}, {name: "Motorola XOOM™ with Wi-Fi", snippet: "The Next, Next Generation tablet.", age: 2}, {name: "Motorola XOOM™", snippet: "The Next, Next Generation tablet.", age: 3} ]; $scope.orderProp = "age" }) </script> </head> <body ng-controller="PhoneListCtrl"> Search: <input ng-model="query"/> Sort by: <select ng-model="orderProp"> <option value="name">Alphabetical</option> <option value="age">Newest</option> </select> <ul> <li ng-repeat="phone in phones | filter:query | orderBy:orderProp"> {{phone.name}} <p>{{phone.snippet}}</p> </li> </ul> </body> </html>