Bootstrap AngularJS carousel - how to know the active slide object - angularjs

Question

Is there any way I can know what is the current active slide?
var slides = slides = [];
slides.push({text: 'Slide 1', type: "chart", chartConfig : {
options: {chart: {type: 'bar'}},
series: [{data: [10, 15, 12, 8, 7]}],
title: {text: 'Hello 1'},
loading: false
}});
slides.push({text: 'Slide 3', type: "chart", chartConfig : {
options: {chart: {type: 'bar'}},
series: [{data: [10, 35, 52, 8, 7]}],
title: {text: 'Hello 2'},
loading: false
}});
$scope.slides=slides;
<carousel>
<slide ng-repeat="slide in slides">
<highchart id="chart{{$index}}" config="slide.chartConfig"></highchart>
</slide>
</carousel>
I am not sure were i need to add watch though?
Please treat this as a seperate question:
You can see from my code there are 2 charts information in the slide.
But when its presented / slided second one alone gets squeezed in width.
In other words is there any way i can auto scale the highchart at the time of rendering?
Is there any work around to fix it.

Answer 1

Update:
Actually, angular-ui does allow you to set an active property on the slide directive which will be set to true when the slide becomes active.
In this example: slide.active will be set to true when the slide is active.
<carousel>
<slide ng-repeat="slide in slides" active="slide.active">
<highchart id="chart{{$index}}" config="slide.chartConfig"></highchart>
</slide>
</carousel>
Controller
var slides = slides = [];
slides.push({
active: false
, text: 'Slide 1'
, type: "chart"
, chartConfig : {
options: {chart: {type: 'bar'}},
series: [{data: [10, 15, 12, 8, 7]}],
title: {text: 'Hello 1'},
loading: false }
}
);
slides.push({
active: false
, text: 'Slide 3'
, type: "chart"
, chartConfig : {
options: {chart: {type: 'bar'}},
series: [{data: [10, 35, 52, 8, 7]}],
title: {text: 'Hello 2'},
loading: false }
}
);
$scope.slides=slides;
// May return `undefined` if no slide is active
// (e.g. when the carousel hasn't initialised)
$scope.getActiveSlide = function () {
return slides.filter(function (s) { return s.active; })[0];
};
There was an issue to add this information to the slide event, but they decided not to do it.
There are some workarounds to it though:
This comment on the issue
Twitter Bootstrap Carousel - access current index

Answer 2

I've been able to get the current index of the carousel slide with the following jQuery code (the carousel html must have the id="myCarousel"):
$('#myCarousel .active').index();
I used it for adding the ng-swipe-left/right to the carousel and it works (if you are interesed, full answer with the controller js code here: angular ui.bootstrap.carousel call next()/prev() from $scope)
It works for bootstrap 3.0.2