fix(checkbox): initial value not being marked properly

* Fixes the checkbox not being displayed as selected, even though the model value is true.
* Switches to using Angular's $set to set the attributes during compilation.

Fixes #8343.

Closes #8511

Author: crisbeto

src/components/checkbox/checkbox.js

@@ -31,7 +31,7 @@ angular
  * @param {expression=} md-indeterminate This determines when the checkbox should be rendered as 'indeterminate'.
  *     If a truthy expression or no value is passed in the checkbox renders in the md-indeterminate state.
  *     If falsy expression is passed in it just looks like a normal unchecked checkbox.
- *     The indeterminate, checked, and unchecked states are mutually exclusive. A box cannot be in any two states at the same time. 
+ *     The indeterminate, checked, and unchecked states are mutually exclusive. A box cannot be in any two states at the same time.
  *     When a checkbox is indeterminate that overrides any checked/unchecked rendering logic.
  *
  * @usage
@@ -74,11 +74,11 @@ function MdCheckboxDirective(inputDirective, $mdAria, $mdConstant, $mdTheming, $
 
   function compile (tElement, tAttrs) {
     var container = tElement.children();
-    var mdIndeterminateStateEnabled = tAttrs.hasOwnProperty('mdIndeterminate');
+    var mdIndeterminateStateEnabled = $mdUtil.parseAttributeBoolean(tAttrs.mdIndeterminate);
 
-    tAttrs.type = 'checkbox';
-    tAttrs.tabindex = tAttrs.tabindex || '0';
-    tElement.attr('role', tAttrs.type);
+    tAttrs.$set('tabindex', tAttrs.tabindex || '0');
+    tAttrs.$set('type', 'checkbox');
+    tAttrs.$set('role', tAttrs.type);
 
     // Attach a click handler in compile in order to immediately stop propagation
     // (especially for ng-click) when the checkbox is disabled.

src/components/checkbox/checkbox.spec.js

@@ -296,6 +296,14 @@ describe('mdCheckbox', function() {
         expect(checkbox).toHaveClass(CHECKED_CSS);
       });
 
+      it('should mark the checkbox as selected, if the model is true and "md-indeterminate" is false', function() {
+        pageScope.checked = true;
+        var checkbox = compileAndLink('<md-checkbox ng-model="checked" md-indeterminate="false"></md-checkbox>');
+
+        expect(checkbox).toHaveClass(CHECKED_CSS);
+        expect(checkbox).not.toHaveClass(INDETERMINATE_CSS);
+      });
+
     });
   });
 });