Angularjs directive watching binded attribues -

i need create simple directive show value if value change. example watch 'event' , if event.eventduration === 'now' have change it's value 'surprise!'.

with code see valid event in console once. if changes {{event.eventduration}} changes, not directive. did wrong?

in html code used have this:

    <event-time event="event"></event-time>{{event.eventduration}} 

this custom directive:

angular.module('my-app').directive('eventtime', function ($c, $compile) {     var linker = function(scope, element, attrs) {         scope.$watch('event', function(newvalue){             if (newvalue !== undefined && newvalue.eventduration !== undefined) {                 scope.value = newvalue.eventduration;                 element.html(scope.value);                 $compile(element.contents())(scope);             }         });     };      return {         restrict: 'e',         template: '{{value}}',         transclude: true,         scope: {             'event': '='         },         link: linker,         controller: function ($scope) {             //init value             $scope.value = 'x';         }     }; }); 

you can $watch expression, so:

scope.$watch("event.eventduration", function(v){    if (v === "now"){       // whatever need display "surprise!"    } }); 

it's not clear question "surprise!" string should rendered. if it's scope.value display in template, don't need $compile anything. assign $scope.value = "surprise!".