JSFiddle - React, Tailwind, and code Playground

HTML

<div ng-app="initialViewModule" class="row">
    <div ng-controller="initialViewController">
        <input type="text" ng-model="Model.name" /> <span ng-bind="Model.name"></span>

        <br/>{{Model.name | uppercase}}
        <ul>
            <li ng-repeat="user in Model.users | filter: { user: Model.name} | orderBy:'price'">{{user.user + ' bought phone worth ' + user.price}}</li>
        </ul>
    </div>
</div>

JavaScript

var initialViewModule = angular.module('initialViewModule', []);
initialViewModule.controller('initialViewController', function ($scope) {
    var initialViewModel = $scope.Model = {
        name: 'a' //a,g,m,n,o,s,u,z
    };

    var getMobileUsers = function () {
        initialViewModel.users = [{
            user: 'Nithin',
            phone: 'Azus',
            price: 13000
        }, {
            user: 'Saritha',
            phone: 'MotoG1',
            price: 12000
        }, {
            user: 'Renjith',
            phone: 'MotoG2',
            price: 14000
        }, {
            user: 'Felix',
            phone: 'Nexus',
            price: 21000
        }];
    };
        getMobileUsers();
});