Angularjs 角度用户界面引导转盘全屏

我目前正试图让角度UI引导旋转木马成为我页面的全长。我把它放在最外层的div上，但它只会扩展页面的宽度，并在下一个div的开始处垂直停止

这是ctrl键（仅将图像存储在数组中）

这是html（carousel在顶部，但是div在最底部关闭）

---

Hi转盘高度很可能仅限于图像的高度。如果你想填满更多的页面，你必须把你的图片放得更高：-）

对不起，有什么问题吗？基本上我希望我的旋转木马是背景。但它只显示在页面顶部

$scope.myInterval = 5000;


 var slides = $scope.slides = [
  { image:"http://www.bestfon.info/images/joomgallery/originals/animales_7/dog_with_glasses_20140320_2017987799.jpg"
 },
 {
  image:"http://www.animalpictures1.com/data/media/177/dog_2560x1440.jpg"
 }
  ];

<div>
 <carousel interval="myInterval" id="carouselID">
      <slide ng-repeat="slide in slides" active="slide.active">
        <img ng-src="{{slide.image}}">

      </slide>
     </carousel>
<div class="container-fluid">

  <div class="row">
   <!-- <div class="col-md-12">
    <img src="../images/barkIT.png" alt="">
   </div> -->
    <div class="col-md-12" id="profileIMG">
     <img src="{{owner.image}}" alt="">
    </div>
    <div class="col-md-12">
     <h1>{{owner.name}}</h1>
    </div>
    <div class="col-md-12" id="contactInfo">
     <p><img src="../images/email.png" alt="">{{owner.email}}    <img src="../images/telephone_black.png" alt="">{{owner.phone}}</p>

    </div>
    <div class="col-md-12" id="socialNav">
     <a href="https://twitter.com/{{owner.twitter}}"><img src="../images/Twitter-icon.png" alt=""></a>
     <a href="https://instagram.com/{{owner.instagram}}"><img src="../images/Instagram-icon.png" alt=""></a>
    </div>
    <div class="col-md-12">
     <a href="#/owners/{{owner._id}}/edit">Edit Profile</a> | <a ng-click="deleteOwner(owner._id)">Delete Profile</a>
    </div>
  </div>

<hr>
 <div>
  <div class="col-md-12" id="dogTag">
   <img src="../images/tag_add.png" alt="" ng-click="dogAdd = true">
  </div>
   <div  class="col-md-12" ng-show="dogAdd">
    <form ng-submit="createDog(newDog)">
     <!-- <div class="col-md-3"> -->
      <input type="text" data-ng-model="newDog.name" placeholder="Name">
     <!-- </div> -->
     <!-- <div class="col-md-3"> -->
      <input type="url" ng-model="newDog.image"placeholder="Image URL">
     <!-- </div> -->
     <!-- <div class="col-md-3"> -->
      <input type="text" ng-model="newDog.type" placeholder="Breed">
     <!-- </div> -->
     <!-- <div class="col-md-3"> -->
      <input type="number" ng-model="newDog.weight" placeholder="Weight">
    <!--  </div>
       </div> -->
   <!-- <div class="col-md-12"> -->
      <button type="submit" ng-click="dogAdd = false">Create</button>
   <!-- </div> -->
    </form>
 </div>
<div  id="dogCard" class="col-md-12">

 <div ng-repeat="dog in dogs">
  <div class="col-md-4">
   <h3>{{dog.name}}</h3>
   <p>{{dog.type}}</p>
   <p>{{dog.weight}}</p>
  </div>


  <div class="col-md-4" id=dogProfileIMG>
   <img src="{{dog.image}}" alt="">
  </div>
  <div class="col-md-4">
   <h3><u>Reminders</u></h3>
   <div id="reminderList" ng-repeat="reminder in dog.reminders">
    <ul>
     <li><img src="../images/paw.png" alt="">{{reminder}}</li>
   </div>
 <button ng-click="reminderAdd = true">Add Reminder</button>
 <form ng-submit="createReminder(dog, reminder)" ng-show="reminderAdd">
  <input type="text" ng-model="reminder" placeholder="Enter Reminder">
  <button type="submit" ng-click="reminderAdd = false">Add Reminder</button>
 </form>
  </div>
  <hr>
 </div>
</div>
</div>
</div>
</div>

#carouselID{
 height:100%;
 img{
  width:100%;
  opacity:.7;
 }