title: AngularJS: ng-show / ng-hide not working with `{{ }}` interpolation
body: <p>I am trying to show / hide some HTML using the <code>ng-show</code> and <code>ng-hide</code> functions provided by <a href="http://docs.angularjs.org/api"><strong>AngularJS</strong></a>.</p>
  
  <p>According to the documentation, the respective usage for these functions are as follows:</p>
  
  <blockquote>
    <p>ngHide – {expression} - If the expression truthy then the element is shown or hidden respectively.
    ngShow – {expression} - If the expression is truthy then the element is shown or hidden respectively.</p>
  </blockquote>
  
  <p>This works for the following usecase:</p>
  
  <pre><code>&lt;p ng-hide="true"&gt;I'm hidden&lt;/p&gt;
  &lt;p ng-show="true"&gt;I'm shown&lt;/p&gt;
  </code></pre>
  
  <p>However, should we use a parameter from an object as the expression then the <code>ng-hide</code> and <code>ng-show</code> are given the correct <code>true</code>/<code>false</code> value but the values are not treated as a boolean so always return <code>false</code>:</p>
  
  <p><b>Source</b></p>
  
  <pre><code>&lt;p ng-hide="{{foo.bar}}"&gt;I could be shown, or I could be hidden&lt;/p&gt;
  &lt;p ng-show="{{foo.bar}}"&gt;I could be shown, or I could be hidden&lt;/p&gt;
  </code></pre>
  
  <p><b>Result</b></p>
  
  <pre><code>&lt;p ng-hide="true"&gt;I should be hidden but I'm actually shown&lt;/p&gt;
  &lt;p ng-show="true"&gt;I should be shown but I'm actually hidden&lt;/p&gt;
  </code></pre>
  
  <p>This is either a bug or I am not doing this correctly.</p>
  
  <p>I cannot find any relative information on referencing object parameters as expressions so I was hoping anyone with a better understanding of AngularJS might be able to help me out?</p>