I am using AngularJs and bootstrap css. I have a ng-repeat section, which is hidden and shown on dropdown selection and a submit button. Initiall the ng-repeat section is hidden, so the button appears after the dropdown. When I select any valid option in dropdown the ng-repeat section is shown, whcih is of 10 rows, and hence the button is shown after that. Now, if I set it back to default "--select--", the space is not getting reduced, and an large empty space is shown after the submit button. Below is the index.html
<body class="ng-cloak">
<div ng-controller="testController" ng-init="init()">
<form name="mainForm" id="createForm" ng-submit="mainForm.$valid && add()" novalidate="" >
<div class="container" ng-show="createMenu">
<br />
<div class="row">
<div class="col-sm-2">
<label class="control-label">Season:<em style="color:red">*</em></label>
</div>
<div class="col-sm-4 form-group">
<select name="seasonTypeSelect" required="" ng-model="selectedSeasonType" class="dropdown form-control cl-sm-6" ng-options="season.SeasonTypeName for season in seasons" ng-change="updateImageUrl(selectedSeasonType)">
<option value="">-- Select the Season --</option>
</select>
</div>
<div class="col-sm-3">
<span class="error" ng-show="submitted == true && mainForm.seasonnTypeSelect.$error.required">Please select season</span>
</div>
</div>
<div class="row" ng-repeat="Descriptions in seasonsWithDescription" ng-if="selectedSeasonType">
<div class="form-group col-md-2 top-Margin-language">
<label ng-model="Descriptions.Language">{{Descriptions.Language}}</label>
</div>
<div class="form-group col-md-4 top-Margin-Title">
<input type="text" maxlength="150" class="form-control input-md" required="" name="titleValidate_{{$index}}" ng-model="Descriptions.Title" />
<span style="color:red" ng-show="submitted == true && mainForm.titleValidate_{{$index}}.$error.required">Title is required</span>
</div>
<div class="form-group col-md-5">
<textarea maxlength="500" class="form-control input-md noresize" required="" name="descriptionValidate_{{$index}}" noresize="" ng-model="Descriptions.Description"></textarea>
<span style="color:red" ng-show="submitted == true && mainForm.descriptionValidate_{{$index}}.$error.required">Description is required</span>
</div>
<div class="form-group col-md-1">
<a style="cursor:pointer">
<img ng-src="{{DeleteIcon_url}}" alt="delete image" ng-click="($index == !selectedDeleteIcon) || seasonsWithDescription.splice($index,1)" ng-class="{'disabled': $first}" />
</a>
</div>
</div>
<br />
<div class="form-group">
<div class="col-sm-offset-4 col-sm-6">
<input type="submit" value="Submit" ng-click="submitted=true" class="btn btn-primary" />
<input type="button" id="btnReset" value="Cancel" ng-click="reset()" class="btn btn-primary" />
</div>
</div>
<br />
</div>
</div>
How to fix this issue?
