Adds watch for validation state changes

Author: tilwinjoy

src/scripts/directives/checkbox.js

@@ -5,18 +5,26 @@ angular.module('angularBootstrapMaterial')
         label: '@'
       },
       transclude: true,
-      require: '?^abmFormGroup',
+      require: ['?^abmFormGroup'],
       templateUrl: 'templates/checkbox.html',
-      link: function (scope, element, attrs, ctrl, transclude) {
-        transclude(function (clone, scope) {
-          element.find('abm-transclude-slot-checkbox').replaceWith(clone);
+      link: function ($scope, $element, attrs, ctrls, transclude) {
+        var input;
+        var formGroup = ctrls[0];
+        transclude(function (clone, $scope) {
+          $element.find('abm-transclude-slot-checkbox').replaceWith(clone);
         }, null);
-        if (ctrl) {
-          var $input = element.find('input');
-          element.find('label').on('mouseenter mouseleave', function (event) {
+        if (formGroup) {
+          var $input = $element.find('input');
+          input = $input.controller('ngModel');
+          $element.find('label').on('mouseenter mouseleave', function (event) {
             if ($input.prop('disabled')) return;
-            ctrl.toggleFocus(event.type == 'mouseover');
+            formGroup.toggleFocus(event.type == 'mouseover');
           });
+          if (input) {
+            $scope.$watch(function () {
+              return input.$invalid;
+            }, formGroup.toggleError);
+          }
         }
       }
     }

src/scripts/directives/radio.js

@@ -7,17 +7,23 @@ angular.module('angularBootstrapMaterial')
       transclude: true,
       require: '?^abmFormGroup',
       templateUrl: 'templates/radio.html',
-      link: function (scope, element, attrs, ctrl, transclude) {
-        transclude(function (clone, scope) {
+      link: function ($scope, element, attrs, formGroup, transclude) {
+        transclude(function (clone, $scope) {
           element.find('abm-transclude-slot-radio').replaceWith(clone);
         }, null);
 
-        if (ctrl) {
+        if (formGroup) {
           var $input = element.find('input');
+          input = $input.controller('ngModel');
           element.find('label').on('mouseenter mouseleave', function (event) {
             if ($input.prop('disabled')) return;
-            ctrl.toggleFocus(event.type == 'mouseover');
+            formGroup.toggleFocus(event.type == 'mouseover');
           });
+          if (input) {
+            $scope.$watch(function () {
+              return input.$invalid;
+            }, formGroup.toggleError);
+          }
         }
       }
     }