Transition animation not animating the correct views

This happens with only one controller and route/state in my app. The controller uses the same route/state and just alters query string params. It’s basically a wizard that you can step through - same controller and view.

When transitioning to a view using said controller the first time, the animation works as expected. The old view slides out, and the new view slides in.

However when transitioning to the next page (which uses the same controller and view), instead of seeing the old view slide out and new view slide in, I see the new view slide out, then the new view slide in.

Pulling my hair out on this one - any ideas as to what could be causing this?

try disabling catch view in to your state transition logic

Thanks for the suggestion - I tried that but it doesn’t affect anything.

Solved it.

It had to do with assigning a large object with several methods to $scope, and possibly ng-if. Either Angular or Ionic does not like this, I’m not sure which.

Before I was doing something like this in my controller:

$scope.calc = Calculator.init()

And in the view:

<div ng-if="calc.someFunc()">...</div>

To fix the issue, I created a proxy in the controller like so:

var calc = Calculator.init();
$scope.calc = {
  someFunc: calc.someFunc()
}

Then in the view:

<div ng-if="calc.someFunc">...</div>

Seems like views like all the variables resolved. What this has to do with Ionic animations I have no clue. I hope this helps somebody!