Animation stops working when caching template

ionic-v1
1

Hello everyone,

So I have 2 states, that have a bit of a custom animation between each-other. Navigating from 1 state to another makes a form box move around a little bit. This works pretty nicely normally, but I wanted to start caching some templates and that threw it off completely :(.

My main view:

<ion-pane ng-controller="mainController">
  <ion-side-menus ng-controller="menuController">
    <ion-side-menu-content drag-content="false" id="main-pane">
      
      <ion-header-bar align-title="left" id="app-header" class="animate-show-hide" ng-show="!openAnim()">
        <app-header></app-header>
      </ion-header-bar>
      
      <ion-content scroll="false" id="content-pane" class="has-header">
        <app-intro></app-intro>
        <ion-nav-view name="search"></ion-nav-view>
        <ion-nav-view name="main" animation="fade-in"></ion-nav-view>
      </ion-content>
      
    </ion-side-menu-content>
    
    <ion-side-menu side="right">
      <right-menu></right-menu>
    </ion-side-menu>
    
  </ion-side-menus>
</ion-pane>

My search form

<form name="searchForm" id="search-form" ng-style="getFormStyle()">
<div id="place-input-container" class="animate-show-hide" ng-show="showFullForm()">
    <label class="item item-input input-place">
        <input type="text" placeholder="Where are we going?" ng-model="place.name" id="input-place"/>
    </label>
    <button ng-click="findPlace()" class="button button-go">Go</button>
</div>
<div id="accomodation-input-container" class="animate-show-hide" ng-show="showFullForm()">
    <label class="item item-input input-accomodation">
        <input type="text" placeholder="Where are we staying (hotel / accomodation)?" ng-model="accomodation.name" id="input-accomodation"/>
    </label>
</div>
<div id="date-input-button-container" ng-style="getFormButtonContainerStyle()">
    <button id="button-date-from" class="button" ng-style="getFormButtonFromStyle()" ng-click="searchFromClick()">From</button>
    <button id="button-date-to" class="button" ng-style="getFormButtonToStyle()" ng-click="searchToClick()">To</button>
</div>
my second view (the one I am trying to transition to): 
    <div id="map-screen">
  <div id="map-canvas" data-tap-disabled="true"></div>
  <ion-scroll id="place-photo-footer" direction="x">
    <div id="place-scroll" ng-controller="placeController as placeCtrl" style="width:5000px;" ng-click="showPlace()"></div>
  </ion-scroll>
</div>

My caching

(function() {
    var app = angular.module('template-cache', []);
    
    app.run(function($templateCache, $http) {
        $http.get('views/search.html', {cache: $templateCache});
        $http.get('views/trip-plan.html', {cache: $templateCache});
    })
})();

When I remove the line $http.get(‘views/trip-plan.html’, {cache: $templateCache}); everything works ok, but as soon as I add it, the custom animation from state 1 to state 2 doesn’t work anymore (the search box just stays in the middle of the screen whilst the main view reloads to the map).

Any ideas / insights?