title: Test if <span> is visible with ng-show attribute
body: <p>In my view I need to test if <code>ng-show="showMsgRoundDownToHours"</code> makes a span visible. This is the view:</p>
  
  <pre><code>&lt;div class="highlight"&gt;
      ...     
      &lt;span class="MsgRoundDownToHours" ng-show="showMsgRoundDownToHours"&gt;
         {{msgRoundDownToHours}}
      &lt;/span&gt;&lt;br&gt;
      ...
  &lt;/div&gt;
  </code></pre>
  
  <p>This is my Protractor Test for that scenario:</p>
  
  <pre><code>describe('c2g test', function() {
    ...
    var showMsgRoundDownToHours = element(by.css('.MsgRoundDownToHours'));
    ...
    // 10km and 229 minutes)
    it('10km, 229 minutes', function() {
      ...
      expect(showMsgRoundDownToHours).toBe(false);
      ...
    });
  });
  </code></pre>
  
  <p>I don't know how to select that particular span. I've tried making the <code>span</code> a <code>div</code>, but this breaks the layout. I've tried assigning it a css class <code>MsgRoundDownToHours</code>, but this makes my console explode with errors. Is there any other way to select that span? I'm happy to do css modifications as well.</p>