Show the respective DIV based on ng-if expression. Angularjs - angularjs

Question

I want to show the div which has Turn On E-Verify when clienId has a value if not I want to show the div which has Turn Off E-verify. I am not getting any errors but always the second div shows up and the button won't work. What am I doing wrong?
HTML :
<div class="col-md-12 col-centered" ng-app="CompanyEVerify">
<div class="row" ng-controller="EVerifyOptionController">
<form name="EverifyForm" id="EVerifyForm" class="form-horizontal" role="form" novalidate ng-submit="EVerifyForm.$valid && submit()"
style="background-color: #F0F0F0; border-radius: 8px; padding-top: 10px; margin: 15px !important;">
<div class="alert alert-danger" id="messages" style="display:none">{{message}}</div>
<div class="form-horizontal">
<input type="hidden" ng-model="company.Id" />
<div class="row">
<div class="col-md-12">
<div style="font-size:20px;font-weight:bold;display:inline-block">Would you like to opt for E-Verify feature?</div>
<br />
<div >
<div class="row" ng-if="clientId">
<div class="col-xs-12 form-group">
<label class="control-label col-xs-2">Client ID</label>
<div class="col-xs-7">
<input type="text" name="clientID" class="form-control input-md" ng-model="clientID" />
</div>
<button type="button" class="btn btn-success col-xs-3" ng-click="saveEverifyOption(clientID)">
<i class="fa fa-spinner fa-pulse"></i> Turn On E-Verify
</button>
</div>
</div>
<div class="row" ng-if="!clientId">
<div class="col-xs-12 form-group">
<label class="control-label col-xs-2">Client ID</label>
<div class="col-xs-7">
<input type="text" name="clientID" class="form-control input-md" ng-model="clientID" />
</div>
<button type="button" class="btn btn-danger col-xs-3" ng-click="saveEverifyOption(clientID)">
<i class="fa fa-spinner fa-pulse"></i> Turn Off E-Verify
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</form>
</div>
</div>
In my controller :
$scope.clientId= sessionStorage.clientId;

Answer 1

I am going to assume that your controller is properly evaluating your conditions. In which case you would use ng-class to bind to css classes. I am not sure If you are trying to hide/show or disable toggle. Going with show/hide, you can make a class:
.hide{
display:none;
}
On one of your elements:
<button ng-class="{'hide': clientId}" ></button>
On the other element:
<button ng-class="{'hide': !clientId}" ></button>
Now the hide property on both elements is bound to one single source.
Check out docs example