         element.bind('mouseleave', deselect)
         deselect()
 
-      attrs.$observe('data', setData); # lets just observe only the data because it is 
-                                       # bad to use many observers, anyway this won't work
-                                       # without supplied data
-  )
+      scope.$watch 'data', setData # lets just observe only the data because it is
+                                   # bad to use many observers, anyway this won't work
+                                   # without supplied data

            labelElement.stop(true, true).html(label).fadeIn(200)
        )

      setData = ->
        element.css('width', width).css('height', height)
        donut = Morris.Donut(
          element: chartElement
          data: data
          colors: colors
          formatter: (value, data) ->
            executeOnSelect(value, data)
            setLabel(data.label)
            return Morris.commas(value, data)
        )

        deselect = ->
          for segment in donut.segments

'use strict'

angular.module('holmesApp')
  .directive 'donut', ($rootScope) ->
    restrict: 'E'
    template: '<div class="donut"><div class="donut-chart"></div><div class="donut-label"></div></div>'
    replace: true
