JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>

<html ng-app="myApp">
<head>
    <title>TODO supply a title</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">        
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-filter/0.4.7/angular-filter.js"></script>
</head>
<body>
<div ng-controller="MainController"> 

    <div class="searchBar">
        <input type="text" name="title" ng-model="title" placeholder="Search..." />
    </div>
    <ul class="angularList" ng-repeat="(key, value) in movies  | groupBy: 'category'">
        <h3>{{ key[0]}}</h3>
        <li ng-repeat="movie in value| filter:title">
            <a href="#">{{ movie.title}}</a><br />
            <div class="rating_box">
                <div class="rating" style="width:{{movie.rating * 10}}%"></div>
            </div>
        </li>               
    </ul>

</div>

JavaScript

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

            .controller('MainController', function ($scope) {
                $scope.movies =
                        [
                            {title: 'The Matrix', rating: 7.5, category: 'Action'},
                            {title: 'Focus', rating: 6.9, category: 'Comedy'},
                            {title: 'The Lazarus Effect', rating: 6.4, category: 'Thriller'},
                            {title: 'Everly', rating: 5.0, category: 'Action'},
                            {title: 'Maps to the Stars', rating: 7.5, category: 'Drama'}
                        ];
            });