title: Triggering click event on an element not working in IE8
body: <p>I am making an angular app but I have found an instance where I need to use jQuery. I need to click a button which raises a click event on another hidden button. I know this seems odd but I need this functionality because an angular module I am using, ng-file-upload, will not work on styled icons. </p>
  
  <p>My solution was to create two buttons, one hidden, one transparent. I then put the styled icon on the transparent button and made the other button hidden. I then used jQuery to cause the second button to be clicked when the first is clicked. This works fine in modern firefox/chrome but not at all in IE8.</p>
  
  <pre><code>&lt;button id="firstClick" class="fa fa-camera-retro"&gt;&lt;/button&gt;
  &lt;button ng-hide="true" id="secondClick" ng-file-select ng-model="files"&gt;Upload&lt;/button&gt;
  </code></pre>
  
  <pre class="lang-js prettyprint-override"><code>$(document).on('click', '#firstClick', function() {
      $('#secondClick').trigger('click');
  });
  </code></pre>
  
  <p>I am currently using jQuery version 1.10.2. Any help with this or alternative ways to achieve this would be greatly appreciated. Thanks in advance! </p>
  
  <p>UPDATE: 
  I think the problem may have to do with angular-file-select as the secondClick is now firing. However angular-file-select is not. Also I set secondClick to visible and when I click it directly it fires ng-file-select.</p>