I want to know the current slide index on uib-carosal's prev() and next() call

Question

I have added code for checking current slide index through active method which I got from here https://plnkr.co/edit/xj7LC6aq3XRmRirk9IO0?p=preview The example works perfectly but when I initialise the same thing in my controller, it always gives me active as undefined.

Here is my code

<div class="modal-body">
<div class="row">
    <div class="ibox-content">

            <li class="list-group-item" style="margin:0px;padding:0px">
                <div uib-carousel active="active" id="cardcarousel" interval="0" no-wrap="true">
                    <div uib-slide ng-repeat="card in cards">
                        <h4>Card  {{cards.indexOf(card)+1}}</h4>
                        <small>You may add upto 10 cards.</small>
                   </div>
                 </div>
        </li>
   </div>
</div>
</div>

Here is my .js file code

// watch active
$scope.$watch('active', function(newVals, oldVals) {
    console.debug("current value: 123 == ", newVals)
  });// watch active

When it loads I got the "current value: 123 == 0"

On sliding next and prev it logs nothing.

I have open this view into uibModalInsatance.

Or

Is there any other way where I can maintain the index of uib-carosel ?