I have a variety of links that trigger bootstrap modals. Some modals have simple html content, while others contain an iframe.
To determine which type of content to load into the modal, I am using ng-switch. However, there seems to be an issue only in Google Chrome and Safari (webkit browsers).
Within the iframe, I am utilizing the onload attribute to execute a function once the iframe is ready.
<div class="modal-body" ng-switch="modal.type">
<div ng-switch-when="iframe">
<iframe ng-src="http://plunker.co/group" onload="callMeMaybe();"></iframe>
</div>
<div ng-switch-when="html">
<h1>This is just plain html.</h1>
</div>
</div>
The problem: Chrome and Safari are calling the onload function twice, whereas Firefox and IE are behaving correctly by calling it just once.
What steps can I take to prevent this issue from occurring in Chrome/Safari?
Check out the example on Plunkr