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 />
    desktop plus: {{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) {

        var w = angular.element($window);
        scope.$watch(function () {
            return {
                'w': window.innerWidth
            };
        }, function (newValue, oldValue, desktopPlus, isMobile) {
            scope.windowWidth = newValue.w;
            scope.desktopPlus = false;
            scope.isMobile = false;
            scope.widthCheck = function (windowWidth, desktopPlus) {
            	if (windowWidth > 1399) {
               scope.desktopPlus = true;
              }
              else if (windowWidth < 769) {
                scope.isMobile = true;
              }
              else {
                scope.desktopPlus = false;
                scope.isMoblie = false;
              }
            }

        }, true);

        w.bind('resize', function () {
            scope.$apply();
        });
    }
});