AngularJS expression redundancy in templates I sometimes find myself using multiple expressions checking on a single flag to control the state of some template, in this example, a Facebook log in button.

On a second look, however, I noticed this pattern might bear a significant performance drawback for making Angular have to update the DOM in multiple places every time a single flag changes.

Mind you, this is a login-button directive so it's not supposed to alternate too much, it's just the latest use case I have on my hands at the moment. Other components might feature busier templates, both in condition expressions and in live updates to the DOM.

Am I just being paranoid? Or is my concern regarding performance impact here justified? Do you know of a better way to implement this (for example: a single ng-if)?

&lt;div class="fb-login"&gt;
  &lt;h3 class="fb-login-prompt" unselectable="on"&gt;{{ isUserConnected ? 'Welcome' : 'For points' }}&lt;/h3&gt;
  &lt;button type="button" class="btn btn-login-fb {{isUserConnected ? 'connected' : ''}}" ng-click="facebookHandler()" unselectable="on"&gt;
    &lt;span ng-if="isUserConnected"&gt;&lt;img class="btn-fb-picture" ng-src="{{user.image_thumbnail}}" /&gt;{{user.name}}&lt;/span&gt;
  &lt;/button&gt;
&lt;/div&gt;
I think the way you've chosen to do it here is probably the best option.  The other reasonable options, as far as I can see, are:


moving the h3 content string and button class out of the template, and setting them in code based on isUserConnected.  So the HTML for the header would be e.g.:

&lt;h3 class="fb-login-prompt" unselectable="on"&gt;{{loginPromptHeader}}&lt;/h3&gt;


This has the disadvantage of having presentation concerns moved out of the template and into the code somewhere.
wrapping the entire HTML in an if-else statement, with each branch repeating all of the HTML structure that doesn't change.  The disadvantage of this is that it involves much more of a maintenance overhead from repeated code.  It wouldn't surprise me if this option was also more processor-intensive, because it involves more DOM elements being created/removed each time.