fix(input): md-maxlength not properly updates on model changes. (#8351)

* Currently the md-maxlength char counter was not updated properly and listening on the different events is unnecessary. ngModelController will already update the model, when the `input` event gets called.
  Additonally we can cover all updates in the $validator itself, because it will always update, when changes get applied to the model.

Fixes #1870.

Author: devversion

src/components/input/input.js

@@ -637,12 +637,6 @@ function mdMaxlengthDirective($animate, $mdUtil) {
       // over the maxlength still counts as invalid.
       attr.$set('ngTrim', 'false');
 
-      ngModelCtrl.$formatters.push(renderCharCount);
-      ngModelCtrl.$viewChangeListeners.push(renderCharCount);
-      element.on('input keydown keyup', function() {
-        renderCharCount(); //make sure it's called with no args
-      });
-
       scope.$watch(attr.mdMaxlength, function(value) {
         maxlength = value;
         if (angular.isNumber(value) && value > 0) {
@@ -659,6 +653,11 @@ function mdMaxlengthDirective($animate, $mdUtil) {
         if (!angular.isNumber(maxlength) || maxlength < 0) {
           return true;
         }
+
+        // We always update the char count, when the modelValue has changed.
+        // Using the $validators for triggering the update works very well.
+        renderCharCount();
+
         return ( modelValue || element.val() || viewValue || '' ).length <= maxlength;
       };
     });

src/components/input/input.spec.js

@@ -306,6 +306,33 @@ describe('md-input-container directive', function() {
       expect(getCharCounter(element).text()).toBe('3 / 6');
     });
 
+    it('should update correctly the counter, when deleting the model value', function() {
+      var el = $compile(
+        '<form name="form">' +
+          '<md-input-container>' +
+          '<input md-maxlength="5" ng-model="foo" name="foo">' +
+          '</md-input-container>' +
+        '</form>'
+      )(pageScope);
+
+      pageScope.$apply();
+
+      // Flush any pending $mdUtil.nextTick calls
+      $timeout.flush();
+
+      expect(pageScope.form.foo.$error['md-maxlength']).toBeFalsy();
+      expect(getCharCounter(el).text()).toBe('0 / 5');
+
+      pageScope.$apply('foo = "abcdef"');
+      expect(pageScope.form.foo.$error['md-maxlength']).toBe(true);
+      expect(getCharCounter(el).text()).toBe('6 / 5');
+
+
+      pageScope.$apply('foo = ""');
+      expect(pageScope.form.foo.$error['md-maxlength']).toBeFalsy();
+      expect(getCharCounter(el).text()).toBe('0 / 5');
+    });
+
     it('should add and remove maxlength element & error with expression', function() {
       var el = $compile(
         '<form name="form">' +