title: The Modal Opens up incorrectly at start
body: <p>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. </p>
  
  <p>Here's my html</p>
  
  <pre><code>&lt;div class="form-group"&gt;
    &lt;div class="col-lg-12 co-md-9"&gt;
      &lt;div class="row"&gt;
        &lt;table id="basic-datatables" class="table table-bordered table-hover" cellspacing="0" width="100"&gt;
          &lt;thead style="text-align:match-parent"&gt;
            &lt;tr&gt;
              &lt;th rowspan="1" colspan="1" style="width:100px"&gt;
                &lt;a href="javascript:void(0)" class="table-links" ng-click="sortType='Name'; sortReverse=!sortReverse"&gt;
                  &lt;span ng-show="sortType != 'Name'" class="fa fa-unsorted"&gt;&lt;/span&gt;
                  &lt;span ng-show="sortType == 'Name' &amp;&amp; !sortReverse" class="fa fa-sort-asc"&gt;&lt;/span&gt;
                  &lt;span ng-show="sortType == 'Name' &amp;&amp; sortReverse" class="fa fa-sort-desc"&gt;&lt;/span&gt; Customer Name
                &lt;/a&gt;
              &lt;/th&gt;
              &lt;th rowspan="1" colspan="1" style="width:100px"&gt;Email&lt;/th&gt;
              &lt;th rowspan="1" colspan="1" style="width:100px"&gt;Mobile&lt;/th&gt;
              &lt;th rowspan="1" colspan="1" style="width:100px"&gt;Company&lt;/th&gt;
              &lt;th style="width:50px"&gt;Actions&lt;/th&gt;
            &lt;/tr&gt;
          &lt;/thead&gt;
          &lt;tbody&gt;
            &lt;tr ng-repeat="customer in filteredDetails = (customerDetails  | filter : Search | orderBy:sortType:sortReverse | limitTo: itemsPerPage: (currentPage - 1) * itemsPerPage)" style="text-align:match-parent"&gt;
              &lt;td&gt;{{customer.Name}}&lt;/td&gt;
              &lt;td&gt;{{customer.Email}}&lt;/td&gt;
              &lt;td&gt;{{customer.Telephone}}&lt;/td&gt;
              &lt;td&gt;{{customer.Company}}&lt;/td&gt;
              &lt;td style="text-align:center"&gt;
                &lt;a href="javascript:void(0)" class="btn btn-primary btn-alt btn-xs" type="button" ng-click="editDetails(customer)"&gt;&lt;span class="glyphicon glyphicon-edit"&gt;&lt;/span&gt;&lt;/a&gt;
                &lt;a href="javascript:void(0)" class="btn btn-danger btn-alt btn-xs" type="button"&gt;&lt;span class="glyphicon glyphicon-trash"&gt;&lt;/span&gt;&lt;/a&gt;
              &lt;/td&gt;
            &lt;/tr&gt;
          &lt;/tbody&gt;
        &lt;/table&gt;
        &lt;div ng-show="filteredDetails.length==0"&gt;
          No results found.
        &lt;/div&gt;
        &lt;div class="row"&gt;
          &lt;div class="col-md-8 col-xs-12"&gt;
            &lt;uib-pagination total-items="totalCustomers" ng-model="currentPage" ng-change="pageChanged()" max-size="maxSize" boundary-links="true" class="pagination" items-per-page="itemsPerPage"&gt;&lt;/uib-pagination&gt;
          &lt;/div&gt;
        &lt;/div&gt;
        &lt;!--Modal: edit--&gt;
        &lt;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"&gt;
          &lt;div class="modal-dialog modal-dialog-center" style="width:700px" role="document"&gt;
            &lt;div class="modal-content"&gt;
              &lt;div class="modal-header"&gt;
                &lt;button type="button" class="close" data-dismiss="modal" aria-label="Close"&gt;&lt;span aria-hidden="true" class="fa fa-times-circle-o"&gt;&lt;/span&gt;&lt;/button&gt;
                &lt;h4 class="modal-title"&gt;&lt;i class="round round-lg grey"&gt;&lt;span class="icons8-create-new s20"&gt;&lt;/span&gt;&lt;/i&gt; Edit Customer Details&lt;/h4&gt;
              &lt;/div&gt;
              &lt;div class="modal-body"&gt;
                &lt;div class="form-group"&gt;
                  &lt;label class="col-lg-2 col-md-3 control-label" for=""&gt;Customer Id&lt;/label&gt;
                  &lt;div class="col-lg-10 col-md-9"&gt;
                    &lt;input type="text" class="form-control" name="cid" ng-model="modalEditDetails.Id" disabled /&gt;
                  &lt;/div&gt;
                &lt;/div&gt;
                &lt;div class="form-group"&gt;
                  &lt;label class="col-lg-2 col-md-3 control-label" for=""&gt;Name&lt;/label&gt;
                  &lt;div class="col-lg-10 col-md-9"&gt;
                    &lt;input type="text" class="form-control" name="cname" ng-model="modalEditDetails.Name" /&gt;
                  &lt;/div&gt;
                &lt;/div&gt;
                &lt;div class="form-group"&gt;
                  &lt;label class="col-lg-2 col-md-3 control-label" for=""&gt;Email&lt;/label&gt;
                  &lt;div class="col-lg-10 col-md-9"&gt;
                    &lt;input type="text" class="form-control" name="cemail" ng-model="modalEditDetails.Email" /&gt;
                  &lt;/div&gt;
                &lt;/div&gt;
                &lt;div class="form-group"&gt;
                  &lt;label class="col-lg-2 col-md-3 control-label" for=""&gt;Telephone&lt;/label&gt;
                  &lt;div class="col-lg-10 col-md-9"&gt;
                    &lt;input type="text" class="form-control" name="ctel" ng-model="modalEditDetails.Telephone" /&gt;
                  &lt;/div&gt;
                &lt;/div&gt;
                &lt;div class="form-group"&gt;
                  &lt;label class="col-lg-2 col-md-3 control-label" for=""&gt;Company&lt;/label&gt;
                  &lt;div class="col-lg-10 col-md-9"&gt;
                    &lt;input type="text" class="form-control" name="cid" ng-model="modalEditDetails.Company" /&gt;
                  &lt;/div&gt;
                &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="modal-footer"&gt;
                &lt;button class="btn btn-default mr5 mb10" data-dismiss="modal" type="button"&gt;Close&lt;/button&gt;
                &lt;button class="btn btn-warning mr5 mb10" type="button" ng-click="EditCustomer()"&gt;Edit&lt;/button&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
        &lt;!--Modal .End--&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>This is the screenshot when I load the page and open the modal when the row is clicked.
  <a href="https://i.stack.imgur.com/GmNGV.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/GmNGV.jpg" alt="enter image description here"></a></p>
  
  <p>Renders correctly when I close and reopen the modal.
  <a href="https://i.stack.imgur.com/f33oF.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/f33oF.jpg" alt="enter image description here"></a></p>
  
  <p>Added the editDetails function </p>
  
  <pre><code>$scope.editDetails = function(details) {
      $scope.modalEditDetails = details;
      $("#cusEditModal").modal("show");
  }
  })();
  </code></pre>