title: Why is this ng-show directive not working?
body: <p>It seems I am missing something utterly obvious with this setup for <code>ng-show</code> in my angular 1.2.21 app (isolated the test case here). I want an element to show only if a string is not empty. Say I have a bit of dynamic, possibly empty, text with a static heading, and I don't want the whole element with the heading and empty text to show up when the text is empty.</p>
  
  <p><a href="http://plnkr.co/edit/CXcCdy34ZQpuIzm6AqJx?p=preview" rel="nofollow">I tried like so (complete plunkr)</a>:</p>
  
  <p>html:</p>
  
  <pre><code>&lt;body ng-controller="FooController"&gt;
    foo: "{{ foo }}"
    &lt;div&gt;{{ rand }}&lt;/div&gt;
    &lt;div ng-show={{ foo }}&gt;Hello foo{{ foo }}!&lt;/div&gt;
    &lt;div ng-show={{ bar }}&gt;You ought to be hiding!&lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>and js:</p>
  
  <pre><code>angular.module('MyApp', [])
    .controller('FooController', ['$scope',
      function($scope) {
        $scope.rand = Math.random();
        $scope.foo = $scope.rand &gt; 0.5 ? "bar" : "";
        $scope.bar = false;
      }
    ]);
  </code></pre>
  
  <p>Now I'd expect the "Hello foobar" <code>&lt;div&gt;</code> only to show when the random value is > 0.5, and for double checking I added a <code>$scope.bar</code> which is false, so I would definitely expect the "You ought to be hiding!" <code>&lt;div&gt;</code> to be hidden.</p>
  
  <p>However, they are not. What am I missing here?</p>