javascript - $scope.$watch not catching the value modified by directive -

my directive give focus span , assigns boolean value i.e, focustospan true whenever press shifttab,however, change not reflected in controller , in template. checked $scope.$watch on focustospan variable below

directive

(function() {     'use strict';     angular.module("my.page").directive('getfocustospan', function() {         return {             link: function(scope, elem, attr, ctrl) {                 elem.bind("keydown keypress", function(event) {                     if (event.which === 16) {                         $('.iconclass').attr("tabindex", -1).focus();                         scope.focustospan = true;                     }                 });             }         };      });  })(); 

controller

     $scope.$watch('focustospan', function(newvalue) {      if (angular.isdefined(newvalue)) {       alert(newvalue);      }      }); 

which not getting called.may know how change made controller variable in directive reflected in controller , in template. thanks, balaji.

outside angular context manipulate scope/binding doesn't updated. making binding updated need run digest cycle update scope level bindings.

here in case updating angular scope variable custom event, need run digest cycle manually doing $apply() method on scope

code

elem.bind("keydown keypress", function(event) {     if (event.which === 16) {        $('.iconclass').attr("tabindex", -1).focus();        scope.focustospan = true;        scope.$apply();     } });