fix(chips): fix md-max-chips for autocomplete watcher

The chips didn't check for the maxmium, when using an autocomplete.
That's why the chip always got appended, when reached the chips max.

Fixes #7549. Closes #7550

src/components/chips/chips.spec.js

@@ -556,6 +556,56 @@ describe('<md-chips>', function() {
           expect(ctrl.chipBuffer).toBe('Test 2');
           expect(scope.items.length).not.toBe(2);
         });
+
+        it('should not append the chip when maximum is reached and using an autocomplete', function() {
+          var template =
+            '<md-chips ng-model="items" md-max-chips="1">' +
+              '<md-autocomplete ' +
+                'md-selected-item="selectedItem" ' +
+                'md-search-text="searchText" ' +
+                'md-items="item in querySearch(searchText)" ' +
+                'md-item-text="item">' +
+             '<span md-highlight-text="searchText">{{itemtype}}</span>' +
+            '</md-autocomplete>' +
+          '</md-chips>';
+
+          setupScopeForAutocomplete();
+          var element = buildChips(template);
+          var ctrl = element.controller('mdChips');
+
+          // Flush the autocompletes init timeout.
+          $timeout.flush();
+
+          var autocompleteCtrl = element.find('md-autocomplete').controller('mdAutocomplete');
+
+          element.scope().$apply(function() {
+            autocompleteCtrl.scope.searchText = 'K';
+          });
+
+          element.scope().$apply(function() {
+            autocompleteCtrl.select(0);
+          });
+
+          $timeout.flush();
+
+          expect(scope.items.length).toBe(1);
+          expect(scope.items[0]).toBe('Kiwi');
+          expect(element.find('input').val()).toBe('');
+
+          element.scope().$apply(function() {
+            autocompleteCtrl.scope.searchText = 'O';
+          });
+
+          element.scope().$apply(function() {
+            autocompleteCtrl.select(0);
+          });
+
+          $timeout.flush();
+
+          expect(scope.items.length).toBe(1);
+          expect(element.find('input').val()).toBe('Orange');
+        });
+
       });
 
       describe('focus functionality', function() {

src/components/chips/js/chipsController.js

@@ -139,7 +139,7 @@ MdChipsCtrl.prototype.inputKeydown = function(event) {
     event.preventDefault();
 
     // Only append the chip and reset the chip buffer if the max chips limit isn't reached.
-    if (this.items.length >= this.maxChips) return;
+    if (this.hasMaxChipsReached()) return;
 
     this.appendChip(chipBuffer);
     this.resetChipBuffer();
@@ -358,7 +358,7 @@ MdChipsCtrl.prototype.resetChipBuffer = function() {
   }
 };
 
-MdChipsCtrl.prototype.hasMaxChips = function() {
+MdChipsCtrl.prototype.hasMaxChipsReached = function() {
   if (angular.isString(this.maxChips)) this.maxChips = parseInt(this.maxChips, 10) || 0;
 
   return this.maxChips > 0 && this.items.length >= this.maxChips;
@@ -368,7 +368,7 @@ MdChipsCtrl.prototype.hasMaxChips = function() {
  * Updates the validity properties for the ngModel.
  */
 MdChipsCtrl.prototype.validateModel = function() {
-  this.ngModelCtrl.$setValidity('md-max-chips', !this.hasMaxChips());
+  this.ngModelCtrl.$setValidity('md-max-chips', !this.hasMaxChipsReached());
 };
 
 /**
@@ -504,10 +504,14 @@ MdChipsCtrl.prototype.configureUserInput = function(inputElement) {
 };
 
 MdChipsCtrl.prototype.configureAutocomplete = function(ctrl) {
-  if ( ctrl ){
+  if ( ctrl ) {
     this.hasAutocomplete = true;
+
     ctrl.registerSelectedItemWatcher(angular.bind(this, function (item) {
       if (item) {
+        // Only append the chip and reset the chip buffer if the max chips limit isn't reached.
+        if (this.hasMaxChipsReached()) return;
+
         this.appendChip(item);
         this.resetChipBuffer();
       }