fix(chips): fix chips focus functionality

- The normal mobile devices won't trigger the focus on the element.
Focusing the element on `ng-click` fixes that issue.
Through keeping and redirecting to `ng-focus` it's still possible to select chips through keyboard
- At the moment, we only reset the selectedChip variable but we don't
  apply that to the view, so we need to run an async evaluation.

Fixes #5897. Fixes #5662. Closes #5941

Author: devversion

src/components/chips/chips.spec.js

@@ -501,7 +501,7 @@ describe('<md-chips>', function() {
           scope.items = [];
         });
 
-        it('should not add a new chip if the max-chips limit is reached', function() {
+        it('should not add a new chip if the max-chips limit is reached', function () {
           var element = buildChips('<md-chips ng-model="items" md-max-chips="1"></md-chips>');
           var ctrl = element.controller('mdChips');
 
@@ -556,6 +556,58 @@ describe('<md-chips>', function() {
           expect(ctrl.chipBuffer).toBe('Test 2');
           expect(scope.items.length).not.toBe(2);
         });
+      });
+
+      describe('focus functionality', function() {
+        var element, ctrl;
+
+        beforeEach(function() {
+          element = buildChips(CHIP_SELECT_TEMPLATE);
+          ctrl = element.controller('mdChips');
+          document.body.appendChild(element[0]);
+        });
+
+        afterEach(function() {
+          element.remove();
+          element = ctrl = null;
+        });
+
+        it('should focus the chip when clicking / touching on the chip', function() {
+          ctrl.focusChip = jasmine.createSpy('focusChipSpy');
+
+          var chips = getChipElements(element);
+          expect(chips.length).toBe(3);
+
+          chips.children().eq(0).triggerHandler('click');
+
+          expect(ctrl.focusChip).toHaveBeenCalledTimes(1);
+        });
+
+        it('should focus the chip through normal content focus', function() {
+          scope.selectChip = jasmine.createSpy('focusChipSpy');
+          var chips = getChipElements(element);
+          expect(chips.length).toBe(3);
+
+          chips.children().eq(0).triggerHandler('focus');
+
+          expect(scope.selectChip).toHaveBeenCalledTimes(1);
+        });
+
+        it('should blur the chip correctly', function() {
+          var chips = getChipElements(element);
+          expect(chips.length).toBe(3);
+
+          var chipContent = chips.children().eq(0);
+          chipContent.triggerHandler('focus');
+
+          expect(ctrl.selectedChip).toBe(0);
+
+          chipContent.eq(0).triggerHandler('blur');
+
+          scope.$digest();
+
+          expect(ctrl.selectedChip).toBe(-1);
+        });
 
       });
 

src/components/chips/js/chipDirective.js

@@ -51,7 +51,8 @@ function MdChip($mdTheming, $mdUtil) {
 
       if (ctrl) angular.element(element[0].querySelector('._md-chip-content'))
           .on('blur', function () {
-            ctrl.selectedChip = -1;
+            ctrl.resetSelectedChip();
+            ctrl.$scope.$applyAsync();
           });
     };
   }

src/components/chips/js/chipsDirective.js

@@ -129,6 +129,7 @@
           <div class="_md-chip-content"\
               tabindex="-1"\
               aria-hidden="true"\
+              ng-click="!$mdChipsCtrl.readonly && $mdChipsCtrl.focusChip($index)"\
               ng-focus="!$mdChipsCtrl.readonly && $mdChipsCtrl.selectChip($index)"\
               md-chip-transclude="$mdChipsCtrl.chipContentsTemplate"></div>\
           <div ng-if="!$mdChipsCtrl.readonly"\