The Modal Opens up incorrectly at start - html

Question

There's an issue in my modal view in the html page. It happens each time when I load the page. The Modal always starts from the bottom of the html page. But only happens one time in each load. How do I resolve this. What am I doing wrong. Help would be appreciated.
Here's my html
<div class="form-group">
<div class="col-lg-12 co-md-9">
<div class="row">
<table id="basic-datatables" class="table table-bordered table-hover" cellspacing="0" width="100">
<thead style="text-align:match-parent">
<tr>
<th rowspan="1" colspan="1" style="width:100px">
<a href="javascript:void(0)" class="table-links" ng-click="sortType='Name'; sortReverse=!sortReverse">
<span ng-show="sortType != 'Name'" class="fa fa-unsorted"></span>
<span ng-show="sortType == 'Name' && !sortReverse" class="fa fa-sort-asc"></span>
<span ng-show="sortType == 'Name' && sortReverse" class="fa fa-sort-desc"></span> Customer Name
</a>
</th>
<th rowspan="1" colspan="1" style="width:100px">Email</th>
<th rowspan="1" colspan="1" style="width:100px">Mobile</th>
<th rowspan="1" colspan="1" style="width:100px">Company</th>
<th style="width:50px">Actions</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="customer in filteredDetails = (customerDetails | filter : Search | orderBy:sortType:sortReverse | limitTo: itemsPerPage: (currentPage - 1) * itemsPerPage)" style="text-align:match-parent">
<td>{{customer.Name}}</td>
<td>{{customer.Email}}</td>
<td>{{customer.Telephone}}</td>
<td>{{customer.Company}}</td>
<td style="text-align:center">
<span class="glyphicon glyphicon-edit"></span>
<span class="glyphicon glyphicon-trash"></span>
</td>
</tr>
</tbody>
</table>
<div ng-show="filteredDetails.length==0">
No results found.
</div>
<div class="row">
<div class="col-md-8 col-xs-12">
<uib-pagination total-items="totalCustomers" ng-model="currentPage" ng-change="pageChanged()" max-size="maxSize" boundary-links="true" class="pagination" items-per-page="itemsPerPage"></uib-pagination>
</div>
</div>
<!--Modal: edit-->
<div id="cusEditModal" class="modal fade modal-style2 in" data-backdrop="static" data-keyboard="false" role="dialog" tabindex="-1" style="position:center" aria-labelledby="myModalLabel">
<div class="modal-dialog modal-dialog-center" style="width:700px" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true" class="fa fa-times-circle-o"></span></button>
<h4 class="modal-title"><i class="round round-lg grey"><span class="icons8-create-new s20"></span></i> Edit Customer Details</h4>
</div>
<div class="modal-body">
<div class="form-group">
<label class="col-lg-2 col-md-3 control-label" for="">Customer Id</label>
<div class="col-lg-10 col-md-9">
<input type="text" class="form-control" name="cid" ng-model="modalEditDetails.Id" disabled />
</div>
</div>
<div class="form-group">
<label class="col-lg-2 col-md-3 control-label" for="">Name</label>
<div class="col-lg-10 col-md-9">
<input type="text" class="form-control" name="cname" ng-model="modalEditDetails.Name" />
</div>
</div>
<div class="form-group">
<label class="col-lg-2 col-md-3 control-label" for="">Email</label>
<div class="col-lg-10 col-md-9">
<input type="text" class="form-control" name="cemail" ng-model="modalEditDetails.Email" />
</div>
</div>
<div class="form-group">
<label class="col-lg-2 col-md-3 control-label" for="">Telephone</label>
<div class="col-lg-10 col-md-9">
<input type="text" class="form-control" name="ctel" ng-model="modalEditDetails.Telephone" />
</div>
</div>
<div class="form-group">
<label class="col-lg-2 col-md-3 control-label" for="">Company</label>
<div class="col-lg-10 col-md-9">
<input type="text" class="form-control" name="cid" ng-model="modalEditDetails.Company" />
</div>
</div>
</div>
<div class="modal-footer">
<button class="btn btn-default mr5 mb10" data-dismiss="modal" type="button">Close</button>
<button class="btn btn-warning mr5 mb10" type="button" ng-click="EditCustomer()">Edit</button>
</div>
</div>
</div>
</div>
<!--Modal .End-->
</div>
</div>
</div>
This is the screenshot when I load the page and open the modal when the row is clicked.
Renders correctly when I close and reopen the modal.
Added the editDetails function
$scope.editDetails = function(details) {
$scope.modalEditDetails = details;
$("#cusEditModal").modal("show");
}
})();

Answer 1

Leaving this here in case it helps anyone else.
Bootstrap modals have options to animate their opening. In your case you had the "fade" and "in" classes which enable this option. Changing/removing any of those should help. This might be due to how the js doesn't properly figure out modal height at the time of DOM insertion and they place it too far down.