title: How to wait for Element to be visible in angular.js application?
body: <p>I feel that it seems like the pretty old question. But not actually for me. </p>
  
  <p>My application is based on Angular. While logging into application <strong>as soon as Loader appears, Selenium test fails</strong> and throws an error exception mentioned below.</p>
  
  <pre><code> unknown error: Element &lt;a id="user_dropdown" href="javascript:void(0);" class="dropdown-toggle" data-toggle="dropdown"&gt;...&lt;/a&gt; is not clickable at point (1421, 33). Other element would receive the click: &lt;md-backdrop ng-show="showMainSpinner" class="m-backdrop" aria-hidden="false"&gt;...&lt;/md-backdrop&gt;
    (Session info: chrome=58.0.3029.110)
  (Driver info: chromedriver=2.28.455520 
  (cc17746adff54984afff480136733114c6b3704b),platform=Windows NT 10.0.14393 
  x86_64) (WARNING: The server did not provide any stacktrace information)
  Command duration or timeout: 56 milliseconds
   Build info: version: '2.45.0', revision: 
   '5017cb8e7ca8e37638dc3091b2440b90a1d8686f', time: '2015-02-27 09:10:26'
  [Driver info: org.openqa.selenium.chrome.ChromeDriver
  Capabilities \[{applicationCacheEnabled=false, rotatable=false, 
  mobileEmulationEn][1]abled=false, networkConnectionEnabled=false, chrome=
   {chromedriverVersion=2.28.455520 
  (cc17746adff54984afff480136733114c6b3704b), 
  userDataDir=C:\Users\smistry\AppData\Local\Temp\scoped_dir56852_17781}, 
   takesHeapSnapshot=true, pageLoadStrategy=normal, databaseEnabled=false, 
  handlesAlerts=true, hasTouchScreen=false, version=58.0.3029.110,         
  platform=XP, browserConnectionEnabled=false, nativeEvents=true, 
   acceptSslCerts=true, locationContextEnabled=true, webStorageEnabled=true, 
  browserName=chrome, takesScreenshot=true, javascriptEnabled=true, 
  cssSelectorsEnabled=true, unexpectedAlertBehaviour=}]
  Session ID: 41ebcec742d22c760f65efb4bb06b7db
  </code></pre>
  
  <p>Things I've done so far to achieve this: </p>
  
  <p>1) Used implicit wait </p>
  
  <p>2) Used Explicit wait (WaitForElementPresent/WaitForVisible/elementToBeClickable/ wait for invisibility of element etc.) (all possible tried)</p>
  
  <p>3) Use of Java Script (window.angular.element('body').injector().get('$http').pendingRequests.length === 0)</p>
  
  <p>typeof jQuery != 'undefined'</p>
  
  <p>document.readystate</p>
  
  <p>typeof angular != 'undefined')</p>
  
  <p>4) Tried every possible way of catching the element(Loader) and wait for it to disappear. didn't worked at all.</p>
  
  <p>5) Used Thread.sleep (but i don't want to use it)</p>
  
  <p>Below is the code for the Spinner element of my website: </p>
  
  <pre><code>&lt;md-progress-circular md-mode="indeterminate" md-diameter="70" class="m-spinner md-raised md-hue-2 md-mode-indeterminate" aria-valuemin="0" aria-valuemax="100" role="progressbar" style="width: 70px; height: 70px;"&gt;&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 70 70" style="width: 70px; height: 70px; transform-origin: 35px 35px 35px;"&gt;&lt;path fill="none" style="stroke-width: 7px;" d="M21.583326164121,6.500125207614687A31.5,31.5 0 0,1 49.405589517818534,63.01301466540359"&gt;&lt;/path&gt;&lt;/svg&gt;&lt;/md-progress-circular&gt;
  </code></pre>
  
  <p>I am using Selenium webdriver, chrome 58, eclipse neon.2, windows 10.</p>
  
  <p>Really trying hard since last so many days to get solution for it. I hope you got my question. If anything is missing, i can provide detail. Help will be highly appreciated.</p>