Get a div width with angular

<!DOCTYPE html>
<html>

  <head>
    <script data-require="angular.js@1.2.16" data-semver="1.2.16" src="https://code.angularjs.org/1.2.16/angular.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body ng-app="testApp">
    <div class="test" get-width>{{ width }}</div>
    <div class="test" get-width style="width: 100px">{{ width }}</div>
  </body>

</html>

angular.module('testApp', [])
.directive "getWidth", ($window)->
  restrict: 'A'
  scope: true
  controller: ($scope, $element) ->
    
    setWidth = ->
      $scope.width = $element[0].clientWidth
    
    $scope.$watch($element[0].clientWidth, ->
      setWidth()
      return
    , true)
  
    angular.element($window).bind 'resize', () ->
      setWidth()
      $scope.$apply()
      return
      
    return

/* Styles go here */

* {
  box-sizing: border-box;
}

.test {
  background-color: lightgrey;
  padding: 10px;
  position: relative;
}

.score {
  background-color: grey;
  padding: 1px;
  position: absolute;
  bottom: 2px;
  right: 0px;
  font-size: 12px;
}