AngularJS ngClass not applied on new ngView when swiped until button is clicked

Question

This week I implemented swiping on a mobile app and found no clear demo showing swiping in both directions. So I figured to give back to the community a little I would write one. That was until I noticed some strange behavior I couldn't understand.

I put two buttons up in the demo to test drive the demo. To swipe you can use your mouse next to the text. What happens is that when I load up the demo and swipe the already existing ngView gets the class from slideDir, the new one however does not. This happens because the new view has a new scope and has no idea what slideDir is supposed to be.

Case two is when I press a button before swiping, there is a slideDir created and filled in the scope the buttons are using and therefore swiping starts to almost behave like it should(other then some synch issues between two scopes).

So what in my configuration am I doing wrong? I had the assumption that because the app controller was on a higher laying div this was not re-initiated each time a new ngView was loaded.

The following url contains the demo: http://blackunknown.com/demos/swipingdemo/demo.html

Here is my set up in the body tag:

<div ng-app="app" ng-controller="AppCtrl">
    <button ng-click='swipeLeft()'>Swipe Left</button>
    <button ng-click='swipeRight()'>Swipe Right</button>

    <div class="slide" ng-view ng-class="slideDir" ng-swipe-left="swipeLeft()" ng-swipe-right="swipeRight()">
    </div>

    <!-- Templates loaded on url change -->
    <script type="text/ng-template" id="pg1.html">
        <H3>Slide 1</H3>
    </script>
    <script type="text/ng-template" id="pg2.html">
        <H3>Slide 2</H3>
    </script>
    <script type="text/ng-template" id="pg3.html">
        <H3>Slide 3</H3>
    </script>
</div>

Here is my javascript:

function AppCtrl($scope, $location, viewSlideIndex) {
    $scope.swipeLeft = function(){
        $scope.slideDir = 'slide-left';
    $scope.url = document.URL.substr(document.URL.lastIndexOf('/'));

        if($scope.url == "/pg1"){
            $scope.url = "/pg2";
        }
        else if ($scope.url == "/pg2"){
            $scope.url = "/pg3";
        }
        else if ($scope.url == "/pg3"){
            $scope.url = "/pg1";
        }

        $location.url($scope.url);
    }

    $scope.swipeRight = function(){
        $scope.slideDir = 'slide-right';
        $scope.url = document.URL.substr(document.URL.lastIndexOf('/'));

        if($scope.url == "/pg1"){
            $scope.url = "/pg3";
        }
        else if ($scope.url == "/pg2"){
            $scope.url = "/pg1";
        }
        else if ($scope.url == "/pg3"){
            $scope.url = "/pg2";
        }

        $location.url($scope.url);
    }
};

angular.module('app', ['ngRoute', 'ngAnimate', 'ngTouch'])
.config(['$routeProvider', '$locationProvider', function ($routeProvider, $locationProvider) {
    $routeProvider.when('/pg1', {
        templateUrl: 'pg1.html',
        controller: AppCtrl
    });
    $routeProvider.when('/pg2', {
        templateUrl: 'pg2.html',
        controller: AppCtrl
    });
    $routeProvider.when('/pg3', {
        templateUrl: 'pg3.html',
        controller: AppCtrl
    });
    $routeProvider.otherwise({
        redirectTo: '/pg1'
    });
    $locationProvider.html5Mode(true);
}])
.service('viewSlideIndex', function () {
    var viewIndex;
    return {
        getViewIndex: function () {
            return viewIndex;
        },
        setViewIndex: function (val) {
            viewIndex = val;
        }
    };
});

EDIT: To perform an actual swipe don't use the buttons but click-drag next to the text.

Answer 1

On your site, you have

$scope.slideDir = 'slide-right';

at the top of AppCtrl.

Remove this and it works. The code you have pasted here does not have that line and works as expected.