md-button: lag and duplication when toggled with ng-if directly

[epelc]

If you use an ng-if directly on an md-button to toggle it there is noticble lag when toggling it on/off. This does not show up if you use ng-show or ng-hide instead. It also doesn't happen if you put the ng-if on a div surrounding your md-button instead of directly on the md-button.

Also if you toggle the ng-if rapidly you end up with several md-button's for a short time until they are they are removed. It essentially duplicates the md-button for a few seconds.

Example plunkr:
http://plnkr.co/edit/Cp5UOp0WC6G1fHR2kHiy?p=preview

This may also affect md-text-field although I haven't tested it yet.

[PaulMougel]

#678 seems to be related. Maybe @robertmesserle will be able to help?

[dapids]

It happens just the same with ng-repeat.

Here is a plunkr: http://plnkr.co/edit/IY7I0zzDFuboBUc1wYej?p=preview

[dwilt]

Would also like to note that this has nothing to do with material as it was happening in my project (which doesn't use material). I had just regular <button> elements with ng-if's applied and it was still happening to me. Solution: Wrap a div around the buttons and move the ng-if to it:

Has both showing for a moment:

<button ng-if="ctrl.someCondition()">Showing if someCondition() is true</button>
<button ng-if="!ctrl.someCondition()">Showing if someCondition() is false</button>

Doesn't:

<div ng-if="ctrl.someCondition()">
  <button>Showing if someCondition() is true</button>
</div>
<div ng-if="!ctrl.someCondition()">
  <button>Showing if someCondition() is false</button>
</div>

[alexalannunes]

Thanks @dwilt