Angularsjs : directive

Objective: keep settings persistant thru routes ans sessions.

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>
<script src="http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.0-beta.3/angular-touch.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.0-beta.3/angular-route.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.0-beta.3/angular-cookies.js"></script>
<div ng-controller="myCtrl" ng-class="{true: 'skin' + config.skin}[true]">
    <div ng-model="currentTab" ng-init="currentTab='Partial1'"/>
    <div ng-init="popovers = [	
		{	name: 'Popover1',	
            displayName: 'Pick a page',
			tabs: [
				{	name: 'Partial1',		
                    displayName: 'Scroll directive',
                    page: '/photos',
					description: [
                        'The search page'
                    ]
				},
				{	name: 'Partial2',		
                    displayName: 'Persistance',
                    page: '/persistance',
					description: [
                        'The home page'
                    ]
				}
            ]
        }
    ]"/>
    
    <b>Angularjs lab</b>
    <div
        class="popover"
        ng-repeat="p in popovers" 
        >
        <p>Lab: {{p.displayName}}</p>
        <br/>
        <div
            ng-repeat="t in p.tabs" 
            class="tab"
            ng-class="currentTab==t.name?'selected':''"
            ng-click="$parent.currentTab=t.name; openPage(t.page)"
            >
                {{t.displayName}}
        </div>
        <div 
            ng-repeat="t in p.tabs" 
            ng-class="currentTab==t.name?'selected':''"
            class="tabContent vScrollable" 
            >
                <div ng-view></div>
         </div>
    </div>
</div>

CSS

* {
	// prevent callout when holding tap on links (the native dialog that comes up)
	-webkit-touch-callout: none;

	// prevent webkit from resizing text to fit
	-webkit-text-size-adjust: none;

	// make transparent link selection, adjust last value opacity 0 to 1.0
	-webkit-tap-highlight-color: rgba(0,0,0,0);

	// prevent copy paste, to allow, change 'none' to 'text'
	-webkit-user-select: none; 

	//font-family: HelveticaNeue;
	font-family: "AvenirNextCondensed-Regular" sans-serif;
	//box-sizing: border-box; 

    -webkit-box-sizing: border-box;   
}


.popover {
    border: solid 3px lightgray;
    width:  400px;
    height: 500px;
    padding: 20px;
    margin:  20px;
}

.skinGray .popover {
    background-color: lightgray;
}

.skinBlue .popover {
    background-color: lightblue;
}

.skinGreen .popover {
    background-color: lightgreen;
}
.popover .tab {
    display: inline-block; 
    background-color: gray;
    border: solid 1px gray;
    border-top-right-radius: 10px;
    border-left: none;
    border-bottom: none;
    width:auto;
    padding: 8px;
    font-size: 14pt;
    box-shadow: 0 0 4px rgba(0,0,0,.2);
    color: black;
}

.popover .tab.selected {
    background-color: lightgray;
    color: white;
    font-weight: bold;
}

.popover .tabContent {
    display: none;
    height: calc(100% - 80px);
    background-color: rgb(200, 200, 255);
    padding: 10px;
}

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

.withPadding {
    padding: 8px;
}

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

/* vertical scroller */

.vScrollable {
    -webkit-overflow-scrolling: touch;
    overflow-x: hidden;
    overflow-y: scroll;
}

/* Horizontal scrolling */

.hScrollable {
    -webkit-overflow-scrolling: touch;
    overflow-x: scroll;
    overflow-y: hidden;
    white-space:nowrap;
    height: auto;
}
.scroller {
    background-color: lightgray;
    margin: 0;
    padding: 4px;
}

.scroller>div {
    width:  100px;
    height: 100px;
    display:...

JavaScript

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



app.directive("photos", function () {
	return {
		restrict: "E",
		replace: true,	// TODO: makes angular to break
		scope: {
			"photoid": "@",
			"scrollable": "@",
			"size": "@",
			"height": "@",
			"list": "=",
			"prefix":"@",
			"inline": "@",
			"extension": "@",
			"class": "@",
			"slide": "="
		},
		template: 
		'<div><div id="photos{{photoid}}"\n\
				class="scroller {{class}}"\n\
				ng-class="[{{scrollable}}]"\n\
				ng-style="{display:list.length==1?\'inline-block\':\'block\', width: list.length==1?\'{{size||\'171px\'}}\':\'auto\', height: \'{{height||size||\'171px\'}}\'}">\n\
				<div ng-repeat="p in list"\n\
					ng-style="{\'background-image\': \'url({{prefix}}{{p.file}}.{{extension||\'jpg\'}})\', width: \'{{size||\'171px\'}}\', height: \'{{height||size||\'171px\'}}\'}"\n\
					ng-click="$parent.$parent.openPopoverImageViewer(\'#photos{{photoid}}\', {{$index}})">\n\
					<div>{{p.text||p.description}}</div>\n\
				</div>\n\
			</div>\n\
			<div class="prev" ng-if="list.length>1" ng-show="canPrev()" ng-click="prev()"></div>\n\
			<div class="next" ng-if="list.length>1" ng-show="canNext()" ng-click="next()"></div></div>'
		,
		link: function (scope, el, attrs) {
			scope.doesScroll = function() {
				var scroller = $("#photos"+scope.photoid);
				return scope.list.length*(scope.size||171)>scroller.width();
			};
			scope.canPrev = function() {
				var scroller = $("#photos"+scope.photoid);
				console.log("scope.photos: canPrev(): scrollLeft()="+scroller.scrollLeft());
				return scroller.scrollLeft();
			};
			scope.canNext = function() {
				var scroller = $("#photos"+scope.photoid);
				return scope.list.length*(scope.size||171)>scroller.scrollLeft()+scroller.width();
			};

			scope.prev = function() {
				console.log("scope.photos: prev()");
				var scroller = $("#photos"+scope.photoid);
				var l =...