angularjs - Angular: Order html elements depending on scope varaible -

i have 2 divs want show on page. order of 2 divs depends on value of variable on scope.

the trivial way of doing repeating divs code twice in page, each time in different order:

<div class="option 1" ng-if="value">   <div class="div 1">     <p>"this content div 1"</p>   </div>   <div class="div 2">     <p>"this content div 2"</p>           </div> </div>  <div class="option 2" ng-if="!value">   <div class="div 2">     <p>"this content div 2"</p>   </div>   <div class="div 1">     <p>"this content div 1"</p>   </div> </div> 

is there way this, without repeating code?

if not support ie9 guess can use flexbox order css property conditional class.

<div class="main">   <div ng-class="{after: !value}">this content div 1</div>   <div class="fixed">this content div 2</div> </div> 

and css:

.main { display: flex; flex-direction: column; } .fixed { order: 2; } .after { order: 3; } 

see flexbox order in action: https://jsfiddle.net/a6eaov63/2/