JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://code.angularjs.org/angular-1.0.0rc2.js"></script>
<div ng-app="myApp">
    <div ng-controller="MyCtrl">
        <ul>
            <li ng-repeat="item in items |  orderBy:predicate">{{item.name}}</li>
        </ul>
        <input ng-model="newItem" type="text"></input>
        <button ng-click="add(newItem)">Add</button>
        <button ng-click="predicate = 'name'">name</button>
        <button ng-click="predicate = 'num'">num</button>
    </div>
</div>

CSS

.ng-invalid { border: 2px solid red; }

JavaScript

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

function MyCtrl($scope) {
    $scope
    $scope.predicate = 'name';
    $scope.items = [
        {
            name:"D",
            num:1
        }
        ,
        {
            name:"C",
            num:2
        }
        , 
        {
            name:"B",
            num:3
        }
        , 
       {
            name:"A",
            num:4
        }
    ];
    console.log($scope.items)
    $scope.add = function(item) {
        numer = $scope.items.length+1
        obj = {name:item, num: numer}
        $scope.items.push(obj);
        console.log($scope.items)
    };    

}