angularjs - $observe within an Angular directive is only firing on the first attribute change -

i'm trying write custom directive attribute directive observing seems change on initial scope change. after that, binding in view (observed firebug) doesn't update longer. seems scope problem i'm out of ideas.

jsfiddle link showing code problem: http://jsfiddle.net/catalyst156/2gp78/ (contents of fiddle below, might useful mess around fiddle itself).

controller:

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.min.js></script> <script> var myapp = angular.module('myapp', []);  myapp.directive('testdirective', function () {     return {         restrict: 'a',         replace: true,         scope: {             toggle: '@'         },         link: function (scope, element, attrs) {             console.log('...linking testdirective...');              attrs.$observe('toggle', function (value) {                 console.log('directive: toggle observer');                 if ('true' === value) {                     console.log('directive: toggle=true');                 } else {                     console.log('directive: toggle=false');                 }             });         }     }; });  myapp.controller('myctrl', ['$scope', '$log', function ($scope, $log) {     $scope.togglestate = false;      $scope.testtoggle = function () {         $scope.togglestate = true;         $log.log('controller: togglestate=' + $scope.togglestate);          settimeout(turntoggleoff, 2000);     };      function turntoggleoff() {         $scope.togglestate = false;         $log.log('controller: togglestate=' + $scope.togglestate);     } }]); 

html:

<div ng-app="myapp">     <div ng-controller="myctrl">         <div test-directive toggle={{togglestate}}></div>         <button ng-click="testtoggle()">toggle me</button>     </div> </div> 

console output:

1: ...linking testdirective... 2: directive: toggle observer 3: directive: toggle=false 4: controller: togglestate=true 5: directive: toggle observer 6: directive: toggle=true 7: controller: togglestate=false  

i can see link working , initial state set false expected (lines 1-3). button clicked , observer notified of change (lines 4-6). however, when timer expires , 'togglestate=false', observer never picks change. (multiple button presses beyond show console output controller , observer never fired again).

the issue angular unaware of changes made settimeout(). said way- settimeout() not trigger $digest cycle. angular provides instead $timeout same thing settimeout() triggers $digest angular sees changes (which in turn cause observe fire).

so pass in $timeout dependency:

myapp.controller('myctrl', ['$scope', '$log', '$timeout', function ($scope, $log, $timeout) {...} 

and switch timeout call:

$timeout(turntoggleoff, 2000); 

here's updated fiddle