JSFiddle - React, Tailwind, and code Playground

HTML

<div ng-app="app">
    <div ng-controller="ctrl">
        <div class="item" resizer ng-class="{ 'large': isLarge }"></div>
    </div>
</div>

CSS

.item {
    background-color: tomato;
    height: 100px;
    width: 100px;
}

.large {
    background-color: dodgerblue;
}

JavaScript

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

app.directive('resizer', ['$window', function ($window) {
    return {
        restrict: 'A',
        link: function (scope, elem, attrs) {      
            angular.element($window).on('resize', function () {
                scope.$apply(function(){
                    scope.isLarge = $window.innerWidth > 500 ? true : false;
                })
            });
        }
    }
}]);

app.controller('ctrl', ['$scope', function($scope) {

}]);