click off directive

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.5/angular.min.js"></script>
<section ng-init="message = 'do it!'">
  {{message}}
  <div click-off="message='good job'">
    Click anywhere but here.
  </div>
</section>

CSS

html{
  height : 100%;
  width : 100%;
}

body {
  background: #808080;
  cursor: pointer;
  font-family: sans-serif;
  font-size: 18px;
  color: #000;
  height : 100%;
  width : 100%;
}
section {
  margin: 25px;
  background: #5a5a5a;
  display: inline-block;
  padding: 25px;
  -webkit-box-shadow: 0 5px 5px rgba(0,0,0,0.3);
  box-shadow: 0 5px 5px rgba(0,0,0,0.3);
}
section div {
  color: #333;
  cursor: default;
  padding: 25px;
  margin-top: 25px;
  background: #a6a6a6;
  -webkit-box-shadow: 0 5px 5px rgba(0,0,0,0.3);
  box-shadow: 0 5px 5px rgba(0,0,0,0.3);
}
section button {
  padding: 5px;
  margin-left: 25px;
}

CoffeeScript

angular.module 'myModule', []

angular.module('myModule').directive 'clickOff', ->
  restrict : 'A'
  link     : (scope, element, attrs) ->
    isOff = true
        
    angular.element(document.body).bind 'click', ->
      if isOff
        scope.$eval attrs.clickOff
        scope.$digest()
      isOff = true

    element.bind 'click', -> 
      isOff = false
      return
    
angular.bootstrap document, ['myModule']