angularjs - modifying ng-class from directive -

I am trying to write a command that looks at the width of an element, and determines the ng-class variable conditionally . It is not absolutely certain that I am going right about this and appreciate some help! My html

  & lt; Div ng-class = "{'compact': compact}" calc-width & gt; Stuff here & lt; / Div & gt;  

My instructions (to date)

  app.directive ('calcwidth', function () {return {restricted: 'a', link: function (Scope, amm, ethers) {var width = elem [0] .clientWidth; scope.compact = false; if (width> 600) {scope.compact = true;}}}}}};  

First of all, it does not modify the NG-class variable as expected. Second, how do I look for a change in the width of the element? Normally I could just use the window resize function, but the size of the element also changes in other cases such as opening a side panel, am I doing this also? Or would it be better to trigger this instruction from any other instructions / controller / service, which controls the panel? $ watch

You can see the contents of your link function by $ watch function.

  link: function (scope, amm, ethers) {scope. $ Watch (function () {// This function will be executed for each digest cycle. Var width = elem [0] .clientWidth; scope.compact = false; if (width <600) {scope.compact = true; }}}}