title: Passing Boolean Value Into Directive
body: <p>I am trying to toggle the visibility of an element rendered by a directive using <code>&lt;div ngHide="readOnly"&gt;</code>.  The value or <code>readOnly</code> is passed in via a directive.</p>
  
  <pre><code>angular.module('CrossReference')
      .directive('singleViewCard', [function() {
          return {
              restrict:'AE',
              templateUrl: '/CrossReference-portlet/js/templates/SingleViewCard.html',
              replace:true,
              scope: {
                  readOnly:'@'
  
              },
              link: {
                  pre:function(scope, tElement, tAttrs) {}, 
                  post:function(scope, tElement, tAttrs) {};
                  }
              }
          };
      }]);
  </code></pre>
  
  <p>This seems to work in the following cases:</p>
  
  <pre><code>&lt;!-- element rendered in single-view-card is hidden --&gt;
  &lt;div single-view-card read-only="{{true}}"/&gt;
  
  &lt;!-- element rendered in single-view-card is shown --&gt;
  &lt;div single-view-card read-only="{{false}}"/&gt;
  </code></pre>
  
  <p>However, if I invert the boolean expression <code>&lt;div ngHide="!readOnly"&gt;</code> The following usage of the directive does not hide the dive as expected:</p>
  
  <pre><code>&lt;!-- element is rendered when it should be hidden --&gt;
  &lt;div single-view-card read-only="{{false}}"/&gt;
  </code></pre>
  
  <p>What am I doing wrong?</p>