Después de buscar este problema durante mucho tiempo, decidí hacer mi primera pregunta en StackOverflow. Espero que alguien pueda ayudarme.

Estoy haciendo un ui.bootstrap.carousel con diferentes diapositivas. La estructura inicial es la siguiente:

    <carousel interval="carInterval" no-pause="true">
      <slide>
        some html content, {{ modules }}
      </slide>
      <slide>
        totally different conte,nt, {{ more variables }}
      </slide>
    </carousel>

Eso funcionó muy bien al principio, incluso sin usar ng-repeat y ninguna declaración activa. El problema comenzó cuando quería establecer un botón personalizado GoToSlide (). Mirando alrededor, descubrí que solo puedo hacerlo usando la sintaxis ng-repeat (la normal y dada por bootstrap). Cuando intenté hacerlo de esta manera, tengo que declarar todo el contenido de las diapositivas en el archivo javascript.

    angular.module('anyApp')
      .controller('MainCtrl', function ($scope) {
        $scope.anyModule="Anything"
        $scope.slider=[]
        $scope.slider.push({ content: " \
            <h1> html content {{ anyModule }} </h1> \
            "});
      });

Luego, en el html:

    <carousel interval="myInterval" no-wrap="noWrapSlides">
       <slide ng-repeat="slide in slides" active="slide.active">
         <p ng-bind-html="slide.content"> </p>
       </slide>
    </carousel>

El contenido html aparece bien pero las variables no aparecen. Intenté también esto:

$scope.slider.push({ content: " \
    <h1> html content <p ng-bind-template='{{ anyModule }} '></p></h1> "});

Si conoce alguna solución posible para este problema o simplemente establece un control deslizante activo que no está en sintaxis ng-repeat, se lo agradecería mucho.

Gracias por tu atención