Horizontal scroller for iPad

Objective: compute the width of the scroller so that its container can make it ONLY scroll horizontally ON iPAD. (Note that on Safari on mac, there is no issue with my code).

HTML

<script src="https://code.angularjs.org/1.2.7/angular.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.0-beta.3/angular-sanitize.min.js"></script>
<div ng-controller="myCtrl">
    <div ng-model="currentTab" ng-init="currentTab='hScroll'"/>
    <div ng-init="popovers = [	
		{	name: 'Popover1',	
            displayName: 'Pop over with two tabs',
			tabs: [
				{	name: 'hScroll',		
                    displayName: 'Horizontal scroll issue',
					description: [
                        'The scroller don\'t scroll',
                        'The container height cuts the scroller despite the use of border-box model'
                    ]
				},
				{	name: 'vScroll',		
                    displayName: 'Vertical scroll issue',
					description: [
                        'The tabContent does not fill the container'
                    ]
				}
            ]
        }
    ]"/>
    
    <b>Tabs in popover</b>
    
    <div
        class="popover"
        ng-repeat="p in popovers" 
        >
        Popover name: {{p.displayName}}<br/>
            
        <div ng-repeat="t in p.tabs" 
            class="tab"
            ng-class="currentTab==t.name?'selected':''"
            ng-click="$parent.currentTab=t.name"
            >
                {{t.name}}
        </div>
        <div  ng-repeat="t in p.tabs" 
            class="tabContent" 
            ng-class="currentTab==t.name?'selected':''"
            >
            <div class="scrollerContainer hScrollable">
                <div class="scroller">
                    <div id="photo1"></div>
                    <div id="photo2"></div>
                    <div id="photo3"></div>
                    <div id="photo4"></div>
                    <div id="photo5"></div>
                    <div id="photo6"></div>
                    <div id="photo7"></div>
                    <div id="photo8"></div>
                    <div id="photo9"></div>
                </div>
            </div>
               ...

CSS

body {
    font-family:"AvenirNextCondensed-Regular" sans-serif;
}
figure, div {
    padding: 4px;
}

.popover {
    border: solid 1px red;
    width:  50%;
    height: 200px;
}    
.popover .tab {
    display: inline-block; 
    border: solid 1px gray;
    border-bottom: none;
    width:auto;
    background-color: gray;
}
.popover .tab.selected {
    background-color: white;
}

.popover .tabContent {
    border-top: dotted 1px gray;
    display: none;
    /*height: 100%;*/
    background-color: rgb(200, 200, 255);
}

.popover .tabContent.selected {
    display: block;
}

/* -------
    Scroller stuff below
   --------
*/

.scroller {
    -webkit-box-sizing: border-box;
    margin: 0;
    padding: 4px;
    width: 100%;
    background-color: lightgray;
    overflow-x: scroll;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    white-space:nowrap;
}

.scroller>div {
    width: 50px;
    height: 50px;
    display: inline-block;
}

#photo1 {background-color: rgb( 10,100,100);}
#photo2 {background-color: rgb( 40,100,100);}
#photo3 {background-color: rgb( 60,100,100);}
#photo4 {background-color: rgb( 80,100,100);}
#photo5 {background-color: rgb(100,100,100);}
#photo6 {background-color: rgb(120,100,100);}
#photo7 {background-color: rgb(140,100,100);}
#photo8 {background-color: rgb(160,100,100);}
#photo9 {background-color: rgb(180,100,100);}
    
}

JavaScript

var app = angular.module('myApp', ['ngSanitize']);


app.controller('myCtrl', function ($scope, $location, $http) {

});