Working with UI-Router states

[mokargas]

Hey there,

I have a problem, I'm wondering if you can help me with it.

I have an over-arching controller (Let's call it the QuizController) which enables the user to browse between states (Where the states are provided by ui-router).

Each state will load a rendered template into a view, updating that template with specific content from QuizController. The template itself is managed by another controller, called QuestionController.

In the rendered, embedded template I have my gs-timeline actions, like so:

<gs-timeline id="title" target="div.question-title">
    <gs-step style="x:-100,opacity:0"></gs-step>
    <gs-step style="x:0,opacity:1" duration="2.0"></gs-step>
</gs-timeline>

<div class="quiz-question">
    <div class="question-wrapper" ng-show="!quizOver">
        <div class="quiz-sizing center">
            <button ng-click="animate()">Test Title Anim</button>
            <div class="question clearfix">

                <div id="qtitle" class="question-title">
                    <div class="num"><span>{{ num + 1 }}</span></div>
                    <h1 class="title"><span>{{ question.title }}</span></h1>
                </div>
            </div>

            <div class="answers clearfix">

                <div ng-if="type == 'Rating'">
                    <rate-yo on-set="ratingSet" on-change="ratingChange" ng-model="rating" read-only="false" options="ratingOptions"></rate-yo>
                </div>

                <div ng-if="type!='Rating'" class="large-3 medium-3 small-6 columns answer-col" ng-repeat="answer in question.answers">
                    <a href="" class="btn-answer" ng-click="answered(answer)">
                        <span>{{ answer.title }}</span>
                    </a>
                </div>
            </div>

        </div>

    </div>
</div>

The button in the template triggers the animation to run. The QuestionController manages the callbacks and the like (Basically just a copy of one of the gsTimeline examples):

'use strict';

angular.module('swheApp')
  .controller('QuestionCtrl', function ($scope, $stateParams, $timeline, $log, $q, $timeout, $element) {
    $log.debug("Element", $element);

    var id = "title";

    $scope.animating = false;

    //Triggers
    $scope.animate = startAnimation;
    $scope.reset = resetAnimations;

    /**
     * Reset animations and enable buttons
     */
    function resetAnimations() {

        var gotoStart = function(animation){
            animation.progress(0).pause();
        };

        $scope.elapsedTime = "";
        $scope.progress = "";
        $timeline(id).then( gotoStart );
    }

    /**
     * Start animation sequences
     */
    function startAnimation()  {

      $scope.reset();
      $scope.animating=true;

      $timeline( id, callbacks() ).then( function(animation) {
        var message = "AnimationController::start( restarting '{data.id}' )";
        $log.debug(message.supplant(animation));

        animation.restart();
      });

    }


    /**
     * Create `onStart` and `onComplete` callbacks for
     * the gs-timeline instance.
     *
     * @param id String timeline ID
     * @returns {{onStart: Function, onComplete: Function}}
     */
    function callbacks() {
      var startedAt = Date.now();

      return {
        onStart    : function( ){
          $scope.$apply(function(){
            $log.debug("onStart( '{0}' )".supplant([id]) );
          });
        },
        onComplete : function( tl ){
          $log.debug("onComplete( '{0}' )".supplant([id]) );
          $scope.$apply(function(){

            $scope.animating=false;
            $scope.elapsedTime = (Date.now() - startedAt);
          });
        }
      }

    }


    $scope.$on('$destroy', function() {
        $scope.reset();
    });

  });

After the initial state loads, I can click the button and the animation plays fine. However, if I transition to another state, and hence load a new copy of my template and controller, the animation will not run once the button is clicked. I can see the timeline start and stop as via the logs, but no actual visual animation.

Any ideas what this could possibly be?