angularjs if else condition does not work

Question

i am new in AngularJS and working on a small module in a project. I want to show two div based on condition. The condition is if {{ merchandiser.popCode }} means popcode value exist in database then show div1 else show div2. Here is my code snippet

<tr ng-repeat="merchandiser in data.merchandisers  | filter: filter()">
        <td title = "({{ merchandiser.id }})">{{ $index + 1 }}</td>
        <td>{{ merchandiser.createdOnDate }}</td>
        <!--<td>{{ merchandiser.createdOnTime }}</td>-->
        <td>{{ merchandiser.pjpCode }} </td>
        <td>{{ merchandiser.sectionCode}}</td>
        <td>{{ merchandiser.popCode }}</td>
        <td>{{ merchandiser.popName }}</td>
        <td>{{ merchandiser.popStatus }} </td>
        <td>{{ merchandiser.channel }} </td>
</table>
<div class="row">


      <div id = "div1" class = "col-sm-4" >

        <table class = "table">
          <tr class="colour">
            <th>POP Classification</th>
            <td>{{ popData.popClassification }}</td>
          </tr>
          <tr>
            <th class="colour">Owner's Name</th>
            <td>{{ popData.ownerName }}</td>
          </tr>
          </div>
 <div id = "div2" class = "col-sm-4" >

    <table class = "table">

      <tr>enter code here
        <th class="colour">Owner's Name</th>
        <td>{{ popData.ownerName }}</td>
      </tr>
      </div>

Answer 1

You can use ng-if for if(){..} else{..} logic in Angular template.

For your current situation,

<div id="div1" ng-if="merchandiser.popCode">
<!-- If block i.e div1 -->
</div>
<div id="div2" ng-if="!merchandiser.popCode">
<!-- Your Else Block i.e div2 -->
</div>

Answer 2

Try this :

<div id="div1" ng-if="merchandiser.popCode">
<!-- Condition true show Div1 block content -->
</div>
<div id="div2" ng-if="!merchandiser.popCode">
<!-- Condition false show Div2 block content -->
</div>