Stack Overflow 17159652 - 2

HTML

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div ng-app="myApp">
    <div ng-controller="MainCtrl">
      <dir1 id="d1"></dir1>
    </div>
</div>

CSS

#d1{
    display: block;
    position: absolute;
    border: 1px solid red;
    width: 100%;
    height: 300px;
}

JavaScript

var app = angular.module('myApp',[]);
app.controller('MainCtrl', function($scope) {

});
app.directive('dir1', ['$timeout', function(timer){
  return {
    restrict: 'E',
    template : '<div>dir1 width = {{message}} {{message2}}</div>',
    link : function(scope, el, attrs) {
      scope.getMessage = function(){ return $(el).width(); }; 
      scope.$watch(function(){
          return $(el).width();
        }, function(newVal){
        //scope.message = $(el).width();
        scope.message2 = timer(scope.getMessage, 250);
            
      });
    }
  };
}]);

$(function(){
  
  $(window).on('resize', function() {
    var domElement = document.getElementById('d1');
    var scope = angular.element(domElement).scope(); 
    scope.message = $(domElement).width();
    scope.$apply();
  });  
  
});