JSFiddle - React, Tailwind, and code Playground

HTML

<div ng-app="miniapp" ng-controller="AppController">
    
    <div width-check class="fess"
       resize>
    window.width: {{windowWidth}} <br />
    desktop plus: {{desktopPlus}} <br />
    is mobile: {{isMobile}} <br />
    </div>
</div>

CSS

.fess { border:1px solid red; }

JavaScript

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

function AppController($scope) {}

	app.directive('widthCheck', function ($window) {
		return function (scope, element, attr) {

			function widthCheck(windowWidth) {
				if (windowWidth > 1399) {
					scope.desktopPlus = true;
				}
				else if (windowWidth < 769) {
					scope.isMobile = true;
				}
				else {
					scope.desktopPlus = false;
					scope.isMoblie = false;
				}
			}	
			windowSizeChanged();

			angular.element($window).bind('resize', function () {
				windowSizeChanged();			
				scope.$apply();
			});
			function windowSizeChanged(){
				scope.windowWidth = $window.innerWidth;
				scope.desktopPlus = false;
				scope.isMobile = false;
				widthCheck(scope.windowWidth);
			}
		}
	});