title: Element not visible error (not able to click an element)
body: <p>I want to click on a radio button, appears on a webpage. Code is as follow:</p>
  
  <p><strong>HTML code:</strong></p>
  
  <pre><code>&lt;div class="small-checkbox red-theme raleway-regular text-muted2 position-relative"&gt;
  
          &lt;div class="city-checkbox inline-block position-relative" ng-class="{'rounded-checkbox': main.current_city_id == 1, 'mb-20': main.ifDeviceIsPhone}"&gt;
              &lt;label class="mdl-radio mdl-js-radio mdl-js-ripple-effect mh-20" for="mumbaiCity" ng-class="{'is-checked' : main.current_city_id == 1}"&gt;
                  &lt;input type="radio" id="mumbaiCity" class="mdl-radio__button position-relative vertical-middle" name="city" value="1" ng-click="main.setCity('Mumbai', 1)"&gt;
                  &lt;span class="mdl-radio__label position-relative font15"&gt;&lt;img class="city-icon" src="../../../assets/img/cities/mumbai-icon.png"&gt;Mumbai&lt;/span&gt;
              &lt;/label&gt;
          &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>Tesstcase:</strong></p>
  
  <pre><code>// demo-test.js
  describe('Protractor Demo App', function() {
      jasmine.DEFAULT_TIMEOUT_INTERVAL = 10000000;
  
      it('check item count', function() {
          browser.get('&lt;link&gt;');
          element(by.id('mumbaiCity')).click();
      });
  
  });
  </code></pre>
  
  <p>This test throughs error:</p>
  
  <blockquote>
    <p>1) Protractor Demo App check item count</p>
    
    <p>Message:</p>
    
    <p>Failed: element not visible</p>
  </blockquote>
  
  <p>I also tried with:</p>
  
  <pre><code>element(by.css('[ng-click="main.setCity('Mumbai', 1)"]')).click();
  </code></pre>
  
  <p>It gives error:</p>
  
  <blockquote>
    <p>[16:16:26] E/launcher - Error: SyntaxError: missing ) after argument list</p>
  </blockquote>
  
  <p>Please suggest, how the radio button will get click?</p>