AngularJS $watch window resize inside directive

You shouldn't need a $watch. Just bind to resize event on window:

DEMO

'use strict';var app = angular.module('plunker', []);app.directive('myDirective', ['$window', function ($window) {     return {        link: link,        restrict: 'E',        template: '<div>window size: {{width}}px</div>'     };     function link(scope, element, attrs){       scope.width = $window.innerWidth;       angular.element($window).bind('resize', function(){         scope.width = $window.innerWidth;         // manuall $digest required as resize event         // is outside of angular         scope.$digest();       });     } }]);

You can listen resize event and fire where some dimension change

directive

(function() {'use strict';    angular    .module('myApp.directives')    .directive('resize', ['$window', function ($window) {        return {            link: link,            restrict: 'A'        };        function link(scope, element, attrs){            scope.width = $window.innerWidth;            function onResize(){                // uncomment for only fire when $window.innerWidth change                   // if (scope.width !== $window.innerWidth)                {                    scope.width = $window.innerWidth;                    scope.$digest();                }            };            function cleanUp() {                angular.element($window).off('resize', onResize);            }            angular.element($window).on('resize', onResize);            scope.$on('$destroy', cleanUp);        }    }]);})();

In html

<div class="row" resize> ,    <div class="col-sm-2 col-xs-6" ng-repeat="v in tag.vod">         <h4 ng-bind="::v.known_as"></h4>    </div> </div> 

Controller :

$scope.$watch('width', function(old, newv){     console.log(old, newv); })

// Following is angular 2.0 directive for window re size that adjust scroll bar for give element as per your tag

---- angular 2.0 window resize directive.import { Directive, ElementRef} from 'angular2/core';@Directive({       selector: '[resize]',       host: { '(window:resize)': 'onResize()' } // Window resize listener})export class AutoResize {element: ElementRef; // Element that associated to attribute.$window: any;       constructor(_element: ElementRef) {         this.element = _element;         // Get instance of DOM window.         this.$window = angular.element(window);         this.onResize();    }    // Adjust height of element.    onResize() {         $(this.element.nativeElement).css('height', (this.$window.height() - 163) + 'px');   }}