JSFiddle - React, Tailwind, and code Playground

HTML

<div ng-repeat="x in allSubjects">

        <div class="col-md-2 subject-card">
            {{ x.name }}
            <!-- reviews go here with their own loop?  -->
            <div ng-controller="reviewsCtrl" ng-init="loadReviews(x.subject_id)">
                reviews count : {{len(reviews)}}
                <div ng-repeat="review in reviews">
                    {{review.someData}}
                </div>
            </div>
        </div>
</div>

JavaScript

(function(){
    var gridFactory = function($http, $q){
        var factory = {};
        var url = "http://127.0.0.1:8000/";

        factory.getReviews = function(query, subject_id){
            var deferred = $q.defer();
            if(subject_id != ""){
                subject_id = "&subject=" + subject_id.toString();
            }
            $http.get(url + "api/reviews/" + query + subject_id)
                .then(function(result) {
                    deferred.resolve(result);
                })
                .catch(function(error){
                    deferred.reject('REJECTED');
                });

            return deferred.promise;

        };

        factory.getAllReviews = function(id){
            var deferred = $q.defer();
            $http.get(url + "api/reviews/"+id)
                .then(function(result) {
                    deferred.resolve(result);
                })
                .catch(function(error){
                    deferred.reject('REJECTED');
                });

            return deferred.promise;

        };

        factory.getAllSubjects = function(){
            var deferred = $q.defer();
            $http.get(url + "api/subjects/?created=True")
                .then(function(result){
                    deferred.resolve(result);
                })
                .catch(function(error){
                    deferred.reject('REJECTEd');
                });
            return deferred.promise;
        };

        return factory;
    };

    gridFactory.$inject = ['$http', '$q'];
    angular.module('mainApp').factory('gridFactory', gridFactory);
}());


(function(){

    var gridController = function($scope, $http, gridFactory){
        console.log("gridController ONLINE");
        $scope.allSubjects = [];
        function populateAllSubjects(){
            gridFactory.getAllSubjects()
                .then(function(subjects){
                    $scope.allSubjects = subjects.data;
                   ...