Desactivar el botón de enviar cuando el formulario no es válido con AngularJS

Tengo mi formulario así:

Como puede ver, el botón está deshabilitado si la entrada está vacía pero no cambia de nuevo a habilitada cuando contiene texto. ¿Cómo puedo hacer que funcione?

Necesita usar el nombre de su formulario, así como ng-disabled: Aquí hay una demostración en Plunker

 

Para agregar a esta respuesta. Acabo de descubrir que también se romperá si usa un guión en su nombre de formulario (Angular 1.3):

Entonces esto no funcionará

 

La respuesta seleccionada es correcta, pero alguien como yo puede tener problemas con la validación asíncrona con la solicitud de envío al lado del servidor: el botón no se desactivará durante el procesamiento de solicitud dado, por lo que el botón parpadeará, lo que resulta bastante extraño para los usuarios.

Para anular esto, solo necesita manejar el estado de $ pendiente del formulario:

 

Si está utilizando Formularios Reactivos, puede usar esto:

  

Podemos crear una directiva simple y desactivar el botón hasta que se llenen todos los campos obligatorios.

 angular.module('sampleapp').directive('disableBtn', function() { return { restrict : 'A', link : function(scope, element, attrs) { var $el = $(element); var submitBtn = $el.find('button[type="submit"]'); var _name = attrs.name; scope.$watch(_name + '.$valid', function(val) { if (val) { submitBtn.removeAttr('disabled'); } else { submitBtn.attr('disabled', 'disabled'); } }); } }; } ); 

Para más información haga clic aquí