JSFiddle - React, Tailwind, and code Playground

by Edward Tanguay

HTML

<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<ul ng-controller="MyCtrl">
    <li ng-repeat="person in persons | orderBy:'score'" style="margin: 0 0 2px 0">{{person.name}} = {{person.score}} 
        <button ng-click="incrementScore(person)" class="btn btn-default btn-xs">increment score</button></li>
</ul>

CSS

body {
    padding: 30px;
}

JavaScript

var myApp = angular.module('myApp',[]);

function MyCtrl($scope, $window) {
    
    $scope.persons = [
        {score: 11, name: ' Jim'},
        {score: 12, name: 'Joe'},
        {score: 13, name: 'Angie'}
    ];
    
    $scope.incrementScore = function(person) {
    	person.score++;   
    }
    
}