angularjs - ng-disabled doesn't update even if form validity is populated -

I have created an instruction that checks whether the input is valid on the basis of some criteria or not. In this form I have a button which is ng-disabled = "form. $ Invalid" . The problem is, even though it comes like a legitimate state, my button is not enabled when my custom directive input changes the status of the validity.

Here's a simple example:

  & lt; Div ng-app = "app" & gt; & Lt; Div ng-controller = "fooController" & gt; & Lt; Form name = "fooForm" & gt; & Lt; Input type = "text" ng-model = "foo" foo & gt; & Lt; Input type = "submit" value = "send" ng-disabled = "foo formam. Invalid" & gt; & Lt; / Form & gt; & Lt; / Div & gt; & Lt; / Div & gt;  

JS (coffee script):

  app = angular Module 'app', [] app director 'foo', - & gt; Restrict: 'A' is required: 'ngmodel' link: (area, element, etter, controller) - & gt; Element.bind 'keyup', - & gt; If the controller $ ViewValue is not 'foo' controller $ SetValidity 'foo', wrong other controller $ SetValidity 'foo', true app.controller 'fooController', ($ scope) - & gt; $ Scope.foo = 'bar'  

In short, check the instructions that the input value is === 'foo'. If it is not so, then this validity sets 'Fu' on the wrong, otherwise it is true.

Here is a jsfiddle:

I have a solution related to $ $:

But I wonder if there is no other Is there a better way to do it? Is not the state considered to be populated?