how to write these logic and condition in ng-switch to avoid flickering of one item for a second even when conditionfails

Question

I have this following two buttons that needs to be displayed on condition. I have following code, It works fine but only issue is it flickers and displays one button and disappears even when condition fails.

There is one approach to solve this, using ng-switch. How to write this in ng-switch? Could someone please help me with the code and maybe in the fiddle too.

  <button type="button" id="saveEnabled"  ng-click="ctrl.onClick()" ng-if="ctrl.Status !== 'Clicked'">Save</button>
    <button type="button" id="saveDisabled" disabled="disabled" ng-if="ctrl.Status === 'Clicked'">Saved</button>


ctrl.onClick = function() {
      ctrl.Status = 'Clicked';
  };

Answer 1

For something this simple you could use one button and a ternary operator

 <button type="button" ng-attr-id="{{ctrl.Status !== 'saveEnabled' ? 'saveEnabled' : 'saveDisabled'}}" ng-click="ctrl.Status !== 'Clicked' ? ctrl.onClick() : return">{{ctrl.Status !== 'Clicked' ? 'Save' : 'Saved'}}</button>



ctrl.onClick = function() {
      ctrl.Status = 'Clicked';
  };