AngularJS ng-repeat 'No Results' div visibility flickering on second button click - angularjs

Question

The following form shows a list of data on submit. I am trying to show no results found when there is no data on submit. It works okay. But when there is data available to list, "no results" shows up for a second when i click. I tried using display:none; but it did not work. How to stop it from showing.
HTML
<form class="form-inline" name="myForm" >
<div class="form-group" >
<label class="radio-inline">
<input name="sampleinlineradio" value="3" type="radio" ng-model="radioption"
ng-required="!radioption"> MAIN 1</label>
<label class="radio-inline">
<input name="sampleinlineradio" value="1" type="radio" ng-model="radioption" >
Main 2</label>
<div ng-show="!radioption && buttonClicked">Please select one.</div>
</div>
<div class="form-group">
<label ng-repeat="branch in branches">
<input type="checkbox" name="selectedBranches[]" value="{{branch.value}}"
ng-model="branch.selected" ng-required="isOptionsRequired()" >
{{branch.name}}</label>
<div ng-show="isOptionsRequired() && buttonClicked">Please select one.</div>
</div>
<div>
<label class="searchlabel">
<input type="radio" name="searchradio1" value="showComponentSearch" ng-model="value"
ng-required="value == 'showComponentSearch'" >
Search By Component</label>
<input type="text" name="comptext" ng-model="search" id="tags"
ng-required = "value == 'showComponentSearch' && search == 'comptext'" >
<div ng-show="value == 'showComponentSearch' && !search && buttonClicked">Please enter text before submit.</div>
<div>
<label class="searchlabel">
<input name="searchradio2" value="showDateRangeSearch" type="radio" ng-model="value"
ng-required="value == 'showDateRangeSearch'" >
Search By Time</label>
</div> </div>
<div ng-show="!value && buttonClicked">Please select one search option.</div>
<input type="button" ng-click="fetchresults()" value="submit" >
</form>
<div ng-show="buttonClicked">
<table> <thead>.....</thead>
<tbody>
<tr ng-show="results.length!=0" ng-repeat="r in results">
<td></td></tbody></table>
</div>
<div ng-show="buttonClickedAgain">
<span ng-show="results.length==0 ">No results.</span>
</div>
In Controller
$scope.fetchresults = function(){
if($scope.searchSelectionValue == 'showComponentSearch') {
$scope.results = Result.query({main: $scope.radioption, branch: $scope.selection[0],
component:$scope.search });
if($scope.search) {
$scope.buttonClickedAgain = true;
}
}
$scope.buttonClicked = true;
};

Answer 1

You can try adding the line $scope.buttonClickedAgain = false; before the if statement as below.
$scope.fetchresults = function(){
$scope.buttonClickedAgain = false;
if($scope.searchSelectionValue == 'showComponentSearch') {
Result.query({main: $scope.radioption, branch: $scope.selection[0], component: $scope.search }, function(results){
$scope.results = results;
$scope.buttonClickedAgain = true;
});
//if($scope.search) {
//$scope.buttonClickedAgain = true;
//}
}
$scope.buttonClicked = true;
};
You can check the below snippet where result will come after 5 seconds. But when you click the button, no results div hides immediately. You can try this with multiple clicks. If it does not work properly to you then its because of other code issue which throws error and check your browser console.
var app = angular.module('app', []);
app.controller('TestController', function($scope, $timeout){
$scope.fetchresults = function(){
$scope.buttonClickedAgain = false;
if($scope.value == 'showComponentSearch') {
//$scope.results = Result.query({main: $scope.radioption, branch: $scope.selection[0],
// $scope.search });
$scope.results = [];
$timeout(function() {
var rnd = Math.random();
if(rnd >= 0.5) {
$scope.results = [{id: 1}, {id: 2}];
}
//if($scope.search) {
$scope.buttonClickedAgain = true;
// }
}, 5000);
}
$scope.buttonClicked = true;
};
});
angular.bootstrap(document, ['app']);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-controller="TestController" >
<form class="form-inline" name="myForm">
<div class="form-group" >
<label class="radio-inline">
<input name="sampleinlineradio" value="3" type="radio" ng-model="radioption"
ng-required="!radioption"> MAIN 1</label>
<label class="radio-inline">
<input name="sampleinlineradio" value="1" type="radio" ng-model="radioption" >
Main 2</label>
<div ng-show="!radioption && buttonClicked">Please select one.</div>
</div>
<div class="form-group">
<label ng-repeat="branch in branches">
<input type="checkbox" name="selectedBranches[]" value="{{branch.value}}"
ng-model="branch.selected" ng-required="isOptionsRequired()" >
{{branch.name}}</label>
<div ng-show="isOptionsRequired() && buttonClicked">Please select one.</div>
</div>
<div>
<label class="searchlabel">
<input type="radio" name="searchradio1" value="showComponentSearch" ng-model="value"
ng-required="value == 'showComponentSearch'" >
Search By Component</label>
<input type="text" name="comptext" ng-model="search" id="tags"
ng-required = "value == 'showComponentSearch' && search == 'comptext'" >
<div ng-show="value == 'showComponentSearch' && !search && buttonClicked">Please enter text before submit.</div>
<div>
<label class="searchlabel">
<input name="searchradio2" value="showDateRangeSearch" type="radio" ng-model="value"
ng-required="value == 'showDateRangeSearch'" >
Search By Time</label>
</div> </div>
<div ng-show="!value && buttonClicked">Please select one search option.</div>
<input type="button" ng-click="fetchresults()" value="submit" >
</form>
<div ng-show="buttonClicked">
Records:
<table> <thead></thead>
<tbody>
<tr ng-show="results.length!=0" ng-repeat="r in results">
<td>{{r.id}}</td></tbody></table>
</div>
<div ng-show="buttonClickedAgain">
<span ng-show="results.length==0 ">No results.</span>
</div>
</div>

Answer 2

Use ng-if instead of ng-show on the div . ng-if prevents the div from being rendered
<div ng-show="buttonClickedAgain">
<span ng-show="results.length==0 ">No results.</span>
</div>