Angular: Empty Fiddle

http://angularjs.org/

HTML

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.3/angular-touch.min.js"></script>
<script src="http://yourjavascript.com/711154439211/angular-panhandler-min.js"></script>
<script src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
<div ng-controller="MyCtrl">
    <div class="cont" ng-swipe-right="updateSidebar($event, true)" ng-swipe-left="updateSidebar($event, false)">
        <div class="sidebar" ng-class="{show: sidebar}"></div>
        <div class="inner-content">
            Sidebar: {{sidebar}}   
            
            <h3>Dragging/scrolling inside the yellow box shouldn't fire the vent</h3>
            <div class="pan-container" panhandler="" content-width="500px" swipe="cancel" ng-swipe-right='cancelSwipe($event)' ng-swipe-left='cancelSwipe($event)'>
                
                <div class="pan-item"  ng-repeat="i in [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]"><h3>{{$index}}</h3></div>
            </div>
            
            <h3>Scrolling outside the yellow box should</h3>
            
        </div>     
    </div>
</div>

CSS

.cont{
    height: 500px;
    border: 1px solid red;
    clear: both;
}
.sidebar{
    width: 150px;
    height: 100%;
    border: 1px solid blue;
    background-color: blue;
    float: left;
    display: none;
}
.sidebar.show{
    display: block;
}
.inner-content{
    float: right;
    width: 327px;
    height: 100%;
    border: 1px solid green;
}
.scroller{
    width: 320px;
    height: 200px;
    border: 1px solid purple;
    overflow: scroll;
}
.pan-container{
    height: 300px;
    width: 300px;
    border: 1px solid yellow;
}
.pan-item{
    width: 100px;
    height: 100px;
    border: 1px solid red;
    margin: 5px;
    float: left;
}

JavaScript

var myApp = angular.module('myApp',['ngTouch', 'panhandler']);

myApp.value('shouldFire', function(element){
     var update = true;
        
        // strange enough $event.fromElement is always null
        var current = element;
        while(current && current != document.body){
            if(current.getAttribute('swipe')=='cancel'){
                update = false;
                break;
            }
            current = current.parentElement;
        }
        
        return update;
})

function MyCtrl($scope, shouldFire) {
    $scope.sidebar = false;
    
    $scope.updateSidebar = function($event, show){
        
        console.log('fired');        
        var element = $event.toElement || $event.srcElement; 
        shouldFire(element) && ($scope.sidebar = show);
        
    }
    
    $scope.cancelSwipe = function($event){
        
        $event.stopPropagation();
        console.log('cancelled', $event);
        
    }
}