javascript - Angular Application tutorial -

i following tutorial angular js on website.

instead of dropdown selecting order[alphabetically or newest], made 2 buttons , defined ng-click on them.

here code:

html partial code:

<nav class="top-bar" data-topbar>     <ul class="title-area">         <li class="name">             <h1><a href="#">my site</a></h1>         </li>         <li class="toggle-topbar menu-icon"><a href="#">menu</a></li>     </ul>      <section class="top-bar-section">         <ul class="right">             <li>sort by: </li>             <li class="active"><a href="#" ng-click="setorder('age')">newest</a></li>             <li><a href="#" ng-click="setorder('name')">alphabetical</a></li>         </ul>         <ul class="left">             <li class="divider"></li>             <li class="has-form">             <input type="text" ng-model="query" placeholder="find stuff"> </li>         </ul>     </section> </nav>  <div class="row">     <ul class="phones">         <li ng-repeat="phone in phones | filter: query | orderby: orderprop"  class="thumbnail">             <a href="#/phones/{{phone.id}}" class="thumb"><img src="" alt="" ng-src="{{phone.imageurl}}"></a>             <a href="#/phones/{{phone.id}}" class="thumb">{{phone.name}}</a>             <p>{{phone.snippet}}</p>         </li>     </ul> </div> 

and controller:

phonecatcontrollers.controller('phonelistctrl', ['$scope', 'phone', function($scope, phone) {     $scope.phones= phone.query();      $scope.orderprop= 'age';      $scope.setorder= function(order) {         $scope.orderprop= order.tostring();     } }]); 

routers:

phonecatapp.config(['$routeprovider',     function($routeprovider) {          $routeprovider.             when('/phones', {                 templateurl: 'partials/phone-list.html',                 controller: 'phonelistctrl'             }).             when('/phones/:phoneid', {                 templateurl: 'partials/phone-details.html',                 controller: 'phonedetailctrl'             }).             otherwise({                 redirectto: '/phones'             }); }]); 

setorder function being called when clicking on link, cannot see changes in order listing.

what doing wrong here?

there typo in jsfiddle example...

first should put filter statement ng-repeat expression...

<li ng-repeat="todo in todos | orderby: order"> 

second, order name object has no field name change object text field name or reverse...

$scope.todos = [     {name:'learn angular', done:true, age: 0},     {name:'build angular app', done:false, age: 1}]; 

here fixed jsfiddle...