jqLite "change" binding removed on navigation/reload. Elements being recreated?

ionic-v1
1

So we’ve encountered a weird bug that we’ve been able to work around but which I’d like help understanding better.

In the following code sample, we’re setting up a listener to pull a value from a date input, split it into month and year, and populate its associated fields. The associated template has cache-view=“false”.

angular.module('main')
.controller('PaymentMethodsCtrl', function(PaymentMethods, $ionicLoading, $ionicPopup, $scope, $state, $stateParams) {
    angular.element("#expirationDatePicker").on("change", function(){
        console.log("Binding element")
        var dateComponents = angular.element("#expirationDatePicker").val().split("-");

        var year = dateComponents[0];
        var month = dateComponents[1];

        $scope.expirationMonth = month;
        $scope.expirationYear = year;
    })
})

Now, what we’re observing is that everything loads correctly when you first arrive at the page. You update the date input to “December 2020” and you get an expirationMonth of ‘December’ and expirationYear of ‘2020’. Easy.

If you navigate away from the page and back, however, the controller would execute from the start and the binding would be triggered (according to the loggers we set up), but the “change” function wouldn’t execute when you update the input.

Complication: We found that adding a timeout of 5 seconds would result in a bound element. (A half second time out didn’t have any effect).

Additionally: We added some fake data-attributes to the input and used the binding to modify them. Based on that, it looks like the element is actually being recreated at some point after page load and view entry.

Can anybody offer insight into what we’re dealing with here? As mentioned, we’ve set up a workaround, but we’d really love to know what’s actually going on.