Positioning ui-angular carousel controls - angularjs

Question

I am creating a carousel that displays images with some meta data. On md and lg screens I want the meta data to appear to the right, and on smaller screens I want it below the image, which is working fine using col-md-8 / col-md-4
Here is my carousel code:
<uib-carousel active="active" interval="0" no-wrap="noWrapSlides" template-url="/Scripts/MainClient/views/cwCarouselTemplate.html" style="height:100%">
<div uib-slide ng-repeat="slide in slides track by slide.id" index="slide.id">
<div class="row">
<div class="col-md-8 " ng-style="{height: hackheight}" id="img-div">
<div style="padding:10px; height:100%;" class="black-bkgd">
<span class="helper"></span><img class="img-responsive " ng-src="{{slide.image}}" style="vertical-align:middle; display:inline-block">
</div>
</div>
<div class="col-md-4">
Here's where the meta data goes go!
<h4>Slide {{slide.id}}</h4>
<p>{{slide.text}}</p>
</div>
</div>
</div>
</uib-carousel>
The problem I have is regarding the right hand control - it is positioned to the right of the whole carousel, and I want it right relative to the col-md-8 div (so it appears over the right hand side of the image, not over the meta data). It works if I set right to be 34% on the control, but this then doesn't work on xs/sm screens (the control is in the middle of the image).
I can get it to the right position on either xs/sm screens (with right:0) OR on md/lg screens (with right:34%) but not on all screens at the same time!
One idea I had is to add a <span class="hidden-xs hidden-sm" style="width:34%"></span> to the right to push the control over on larger screens but I can't get it to work - the span just stacks with the carousel control.
Here's the template I'm using:
<div class="carousel">
<div class="carousel-inner" ng-transclude></div>
<a role="button" href class="left carousel-control" ng-click="prev()" ng-class="{ disabled: isPrevDisabled() }" ng-show="slides.length > 1">
<span aria-hidden="true" class="glyphicon glyphicon-chevron-left"></span>
<span class="sr-only">previous</span>
</a>
<a role="button" href class="right carousel-control" ng-click="next()" ng-class="{ disabled: isNextDisabled() }" ng-show="slides.length > 1">
<span aria-hidden="true" class="glyphicon glyphicon-chevron-right"></span>
<span class="sr-only">next</span>
</a>
<!--
<ol class="carousel-indicators" ng-show="slides.length > 1">
<li ng-repeat="slide in slides | orderBy:indexOfSlide track by $index" ng-class="{ active: isActive(slide) }" ng-click="select(slide)">
<span class="sr-only">slide {{ $index + 1 }} of {{ slides.length }}<span ng-if="isActive(slide)">, currently active</span></span>
</li>
</ol>
-->
</div>
Many thanks for any help

Answer 1

You could wrap your buttons in a absolute positioned col-md-8 to achieve the result.
If the element height remains an issue, you could provide a plunkr of your code, so we can look into that.