title: AngularJS UI-Bootstrap Modal Dialog gets covered by main.html
body: <p><a href="https://i.stack.imgur.com/6XGMh.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/6XGMh.png" alt="enter image description here"></a></p>
  
  <p>How can I use bootstrap modal dialogs with AngularJS using ui-bootstrap with angular-ui-router? I am new to AngularJS and tried searching the documentation without luck.</p>
  
  <p>I have used this code but the contents behind gets covered:
  my main.html :</p>
  
  <pre><code>&lt;form class="navbar-form"&gt;
      &lt;div class="input-group"&gt;
          &lt;input type="text" class="form-control" placeholder="Search..."&gt;
          &lt;span class="input-group-btn"&gt;
          &lt;button type="submit" class="btn btn-default"&gt;
              &lt;img src="img/dsd.png" style="width: 17px"&gt;
          &lt;/button&gt;
      &lt;/span&gt;
      &lt;/div&gt;
      &lt;a class="btn btn-success" ui-sref="app.login"&gt;Login&lt;/a&gt;
      &lt;a class="btn btn-danger" ui-sref="app.register"&gt;Regiter&lt;/a&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>my app.js:</p>
  
  <pre><code>angular.module("myApp",["ngAnimate","ngSanitize","ui.router","ui.bootstrap","mds"])
  
  .config(function ($stateProvider,$urlRouterProvider) {
      $stateProvider
      .state("app",{
          url:"/app",
          views:{
              main:{
                  templateUrl:"templates/main.html",
                  controller:"appCtrl"
              }
          }
      })
  
      .state("app.register",{
          url:"/register",
          views:{
              sub:{
                  templateUrl:"templates/register.html",
                  controller:"registerCtrl"
              }
          }
      })
  </code></pre>
  
  <p>my modal:</p>
  
  <pre><code>&lt;div id="y" class="modal-dialog"&gt;
      &lt;div&gt;
          &lt;div class="modal-content"&gt;
              &lt;div class="modal-header btn-danger"&gt;
                  &lt;a href="#" class="close" data-dismiss="modal" style="color: black;font-size: 20px;font-weight: bold"&gt;x&lt;/a&gt;
                  SignUp
              &lt;/div&gt;
              &lt;div class="modal-body"&gt;
                  &lt;form ng-submit="register()"&gt;
                      &lt;div class="form-group"&gt;
                          &lt;label&gt;Full Name&lt;/label&gt;
                          &lt;input type="text" class="form-control" ng-model="Name" required&gt;
                      &lt;/div&gt;
                      &lt;div class="form-group"&gt;
                          &lt;label&gt;User Name&lt;/label&gt;
                          &lt;input type="text" class="form-control" ng-model="UserName" required&gt;
                      &lt;/div&gt;
                      &lt;div class="form-group"&gt;
                          &lt;label&gt;Phone Number&lt;/label&gt;
                          &lt;input type="tel" class="form-control" ng-model="Phone" required&gt;
                      &lt;/div&gt;
                      &lt;div class="form-group"&gt;
                          &lt;label&gt;Full Address&lt;/label&gt;
                          &lt;textarea class="form-control" ng-model="addr" required&gt;&lt;/textarea&gt;
                      &lt;/div&gt;
                      &lt;div class="form-group"&gt;
                          &lt;label&gt;Email address:&lt;/label&gt;
                          &lt;input type="email" class="form-control" ng-model="Email" required&gt;
                      &lt;/div&gt;
                      &lt;div class="form-group"&gt;
                          &lt;label&gt;Password:&lt;/label&gt;
                          &lt;input type="password" class="form-control" ng-model="Pwd" required&gt;
                      &lt;/div&gt;
                      &lt;div class="checkbox"&gt;
                          &lt;label&gt;&lt;input type="checkbox"&gt; Remember me&lt;/label&gt;
                      &lt;/div&gt;
                      &lt;button type="submit" class="btn btn-default"&gt;Submit&lt;/button&gt;
                  &lt;/form&gt;
              &lt;/div&gt;
              &lt;div class="modal-footer"&gt;
                  Sudan Store.
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>