title: Angular Material input not showing value when not focused
body: <p>I'm using Angular Material 1.0.3 and <code>&lt;input&gt;</code> elements are correctly set but their values are visible if I click one to focus it. Once it's not focused I can't see the value.</p>
  
  <p>The markup is as follows:</p>
  
  <pre><code>&lt;md-input-container&gt;
      &lt;label&gt;Some label&lt;/label&gt;
      &lt;input ng-model="model.someProperty"&gt;
  &lt;/md-input-container&gt;
  </code></pre>
  
  <p>After checking if it's a CSS issue, I've found that the following CSS selector is turning <code>color</code> into <code>transparent</code>:</p>
  
  <pre><code>md-input-container:not(.md-input-has-value) input:not(:focus) {
       color: transparent;
  }
  </code></pre>
  
  <p>And obviously, it seems like the input doesn't have the <code>.md-input-has-value</code> CSS class.</p>
  
  <p>For now, I can't figure out what's going wrong.</p>
  
  <h3>Additional info</h3>
  
  <p>In my case, in opposite of Angular Material demos, controllers are on directives and UI Router states. </p>
  
  <p><strong>In fact, I can confirm that I've already copy-pasted the same markup in my <code>index.html</code> as direct child of <code>&lt;body&gt;</code> and then it works as expected.</strong></p>
  
  <p>Maybe it has some relation with this open issue: <a href="https://github.com/angular/material/issues/3017" rel="noreferrer">Compiling material directives on the fly: md-input-has-value attribute not set #3017</a>.</p>
  
  <h3><code>&lt;md-input-container&gt;</code> has the <code>md-input-has-value</code> CSS class</h3>
  
  <p>I've also checked that <code>&lt;md-input-container&gt;</code> has the <code>md-input-has-value</code> CSS class.</p>