Angular directive to watch form validity

I have a Django app that uses Angular on the client side. I would like to disable a form's submit button if that form is invalid. In theory this is very simple:

<form name="my_form">
  ...some fields...
</form>
<button ng-disabled="my_form.$invalid">ok</button>

However, the form's name is dynamically set via Django. I have tried solving this w/ a custom directive...

Here is some code:

my_view.py:

def my_view(request):
  my_form = MyFormClass(form_name="my_custom_name")
  retu render_to_response("my_template.html", {"form": my_form}, context)

my_template.html:

<div ng-app="my_app">
  <div ng-controller="MyController as my_controller">
    <form name="{{form.form_name}}" my_directive>
      {% for field in form %}
        {{field}}
      {% endfor %}
    </form>
    <button ng-disabled="!invalid">ok</button>
  </div>
</div>

my_app.js:

(function() {
    var app = angular.module("my_app", ["ui.bootstrap", "ui.sortable", "ng.django.forms"]);

    app.controller("MyController", [ "$scope", function($scope) {
        $scope.validity = true;
    }]);

    app.directive('myDirective', function() {
        retu {
            restrict: "A",
            link: function (scope, element, attrs) {
                var form_name = attrs["name"];
                var form_validity_expression = form_name + ".$valid";
                scope.$watch(form_validity_expression, function (form_validity) {
                    scope.validity &= form_validity;
                }, true);
            }
        }
    });
})();

This works the first time that I make one of the form fields invalid; it correctly disables the button. But it never re-enables the button when I make all of the form fields valid again. Any idea what I've done wrong?

P.S. - I know this is a contrived example, in the real application there are loads of dynamic forms being created all over the place in separate templates.