Can't update ion-slide on ajax success

I'm having trouble updating my ionic framework slides. I put together a jsfiddle, which is in it's current form, not functional, however, you can see the code there.

My problem is that, if for testing purpose only, I use the ajax when loading the page, it works just fine. If I use a timeout to imitate asynchronicity, it also works.

If I set a function on ngSubmit, the slides are not updated, however, the success part of the ajax retrieves the data. I can also print it on the html side, but the slides are not updated.

Can anyone tell me why?

HTML:

<ion-view view-title="Search" ng-controller="UserSearchCtrl" class="title-left">
    <ion-content scroll="false">

        <div class="list">
            <form ng-submit="retrieveResults()" ng-controller="UserSearchCtrl">
                <input type="text" placeholder="Search" ng-model="criteria">
            </form>
        </div>

        <div class="search-results">
            <ion-slide-box show-pager="false">
                <ion-slide ng-repeat="user in result.users" class="img-box-6">
                    {{user}}
                </ion-slide>
            </ion-slide-box>
        </div>

    </ion-content>
</ion-view>

JavaScript, that is not working:

engine.module.controller('UserSearchCtrl', function($scope, $rootScope, $http, $ionicSlideBoxDelegate, $timeout, $state, $stateParams, $db, $user) {

    $ionicSlideBoxDelegate.enableSlide(false);
    $scope.width = window.outerWidth;

    // if I wrap the below ajax fn in a function, called on submit, it stops working
    $scope.retrieveResults = function() {
        var token = $rootScope.user.token;

        if ($scope.criteria !== '') {

            $http.get(engine.config.REMOTE_URL + '/search?' + 'token=' + token) 
                .success(function(response) {
                    $scope.result = response.data;

                    // debug - they both alert the same thing
                    //alert(response.data.search_type);
                    //alert($scope.result.search_type);

                    $ionicSlideBoxDelegate.enableSlide(true);
                    $ionicSlideBoxDelegate.update();
                })

        } else {
            // ALERT: criteria is not set
        }

    };
});

JavaScript, that is working without ngSubmit:

engine.module.controller('UserSearchCtrl', function($scope, $rootScope, $http, $ionicSlideBoxDelegate, $timeout, $state, $stateParams, $db, $user) {

    $ionicSlideBoxDelegate.enableSlide(false);
    $scope.width = window.outerWidth;

    //$scope.retrieveResults = function() {
        var token = $rootScope.user.token;

        if ($scope.criteria !== '') {

            $http.get(engine.config.REMOTE_URL + '/search?' + 'token=' + token) 
                .success(function(response) {
                    $scope.result = response.data;

                    $ionicSlideBoxDelegate.enableSlide(true);
                    $ionicSlideBoxDelegate.update();
                })

        } else {
            // ALERT: criteria is not set
        }

    //};
});

UPDATE If I call the function on click, it also works. Seems like the slide is not working only if the submit calls the function that updates it..

Because it is Async, i think that your $ionicSlideBoxDelegate is not the same as in you controller anymore. What you could do is the following:

engine.module.controller('UserSearchCtrl', function($scope, $rootScope, $http, $ionicSlideBoxDelegate, $timeout, $state, $stateParams, $db, $user) {

    var currentIonicSlideBoxDelegate = $ionicSlideBoxDelegate;
    currentIonicSlideBoxDelegate.enableSlide(false);
    $scope.width = window.outerWidth;

    // if I wrap the below ajax fn in a function, called on submit, it stops working
    $scope.retrieveResults = function() {
        var token = $rootScope.user.token;

        if ($scope.criteria !== '') {

            $http.get(engine.config.REMOTE_URL + '/search?' + 'token=' + token) 
                .error(function(err) {
                    // ERROR: HTTP GET
                })
                .success(function(response) {
                    $scope.result = response.data;

                    // debug - they both alert the same thing
                    //alert(response.data.search_type);
                    //alert($scope.result.search_type);

                    currentIonicSlideBoxDelegate.enableSlide(true);
                    currentIonicSlideBoxDelegate.update();
                })
                .finally(function() {
                    //
                });

        } else {
            // ALERT: criteria is not set
        }

    };
});

You jsFiddler is not working so i could not test this but i think it will work.

Found it! It was my mistake. There was a controller inside the same controller.

ng-controller="UserSearchCtrl"