fix(checkbox): Undefined ng-checked value now shows as unchecked.

A recent change caused an undefined `ng-checked` value to style
the checkbox as checked via the `md-checked` CSS class.

 - Add appropriate test.
 - Fix check to cast value to a boolean first.
 - Fix indentation of watch statement.

Fixes #9280.

Closes #9281

Author: topherfangio

src/components/checkbox/checkbox.js

@@ -110,8 +110,8 @@ function MdCheckboxDirective(inputDirective, $mdAria, $mdConstant, $mdTheming, $
 
       if (attr.ngChecked) {
         scope.$watch(
-            scope.$eval.bind(scope, attr.ngChecked),
-            ngModelCtrl.$setViewValue.bind(ngModelCtrl)
+          scope.$eval.bind(scope, attr.ngChecked),
+          ngModelCtrl.$setViewValue.bind(ngModelCtrl)
         );
       }
 
@@ -186,7 +186,8 @@ function MdCheckboxDirective(inputDirective, $mdAria, $mdConstant, $mdTheming, $
       }
 
       function render() {
-        element.toggleClass('md-checked', ngModelCtrl.$viewValue && !isIndeterminate);
+        // Cast the $viewValue to a boolean since it could be undefined
+        element.toggleClass('md-checked', !!ngModelCtrl.$viewValue && !isIndeterminate);
       }
 
       function setIndeterminateState(newValue) {
@@ -196,6 +197,6 @@ function MdCheckboxDirective(inputDirective, $mdAria, $mdConstant, $mdTheming, $
         }
         element.toggleClass('md-indeterminate', isIndeterminate);
       }
-    };
+    }
   }
 }

src/components/checkbox/checkbox.spec.js

@@ -248,6 +248,12 @@ describe('mdCheckbox', function() {
       expect(checkbox.hasClass('ng-invalid')).toBe(true);
     });
 
+    it('properly unsets the md-checked CSS if ng-checked is undefined', function() {
+      var checkbox = compileAndLink('<md-checkbox ng-checked="value"></md-checkbox>');
+
+      expect(checkbox.hasClass(CHECKED_CSS)).toBe(false);
+    });
+
     describe('with the md-indeterminate attribute', function() {
 
       it('should set md-indeterminate attr to true by default', function() {