JSFiddle - React, Tailwind, and code Playground

by Ajay Bhosale

HTML

<div ng-app ng-controller="PlayerListContoller">
    <p>Total number of players: {{players.length}}</p>
    <ul>
        <li ng-repeat="player in players">
            <img src='{{player.image}}'/> <br/>
            {{player.name}} - {{player.noOfTests}}
        </li>
    </ul>
</div>
<!--
Append following lines to ng-repeat
 | orderBy:'-noOfTests'
 | orderBy:'name'
-->

JavaScript

function PlayerListContoller($scope) {
  $scope.players = [
     {
       name: "Sourav Ganguly",
       noOfTests : 113,
       image: "http://www.espncricinfo.com/inline/content/image/361899.html?alt=1"
     },
     {
       name: "Sachin Tendulkar",
       noOfTests : 180,
       image: "http://www.espncricinfo.com/inline/content/image/501527.html?alt=1"
     },
     {
       name: "Rahul Dravid",
       noOfTests : 164,
       image: "http://www.espncricinfo.com/inline/content/image/425831.html?alt=1"
     }
  ];
}