title: Buttons 'flickering' in angular application using ng-if or ng-show
body: <p>I've had this same issue in two different angular applications I've worked on and yet I have been unable to find any discussion of this problem - which makes me think perhaps I am missing something. Let's say I have a view of a 'task' which can be in a number of different states including 'pending', 'accepted' and 'completed'. Different action buttons will be shown depending on the state of the task, for example:</p>
  
  <pre><code>&lt;button ng-if="task.status === 'pending'" ng-click="ctrl.acceptTask()"&gt;Accept&lt;/button&gt;
  
  &lt;button ng-if="task.status !== 'accepted'" ng-click="ctrl.acceptTask()"&gt;Flag&lt;/button&gt;
  &lt;button ng-if="task.status === 'accepted'" ng-click="ctrl.flagTask()"&gt;Complete&lt;/button&gt;
  </code></pre>
  
  <p>The issue is that when the user clicks the accept button, for a brief period both of the buttons below will be displayed. It's as if angular is sequentially working through the DOM and for the brief period between ng-ifs, both the 'flag' and 'complete' button are displayed because only one has been updated. This occurs for ng-show as well. </p>
  
  <p>Note, this is not an issue that can be solved with ng-cloak, which is only there to prevent a template being displayed before angular has done its magic.</p>
  
  <p>Given I've encountered this issue on both of the two large angular applications I've worked on, it must be a common problem. Any suggestions as to how this is typically solved? (PS, the above HTML is just an example of what I mean, it's not my actual template.)</p>