angular-momentum-scroll

https://github.com/wzr1337/angular-momentum-scroll

HTML

<script src="http://code.angularjs.org/angular-1.0.1.js"></script>
<script src="http://cubiq.org/dropbox/iscroll4/src/iscroll.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css">
<ul class="nav nav-tabs">
  <li><a href="#home" data-toggle="tab">Home</a></li>
  <li><a href="#profile" data-toggle="tab">Profile</a></li>
</ul>

<div class="tab-content">
  <div class="tab-pane active" id="home" style="height: 200px; width: 100%;" scrollable parameters="{{ {hScroll : true} }}">
      lorem ipsum dolar sit amet lorem ipsum dolar sit amet lorem ipsum dolar sit amet lorem ipsum dolar sit amet lorem ipsum dolar sit amet lorem ipsum dolar sit amet lorem ipsum dolar sit amet lorem ipsum dolar sit amet lorem ipsum dolar sit amet lorem ipsum dolar sit amet lorem ipsum dolar sit amet lorem ipsum dolar sit amet lorem ipsum dolar sit amet lorem ipsum dolar sit amet lorem ipsum dolar sit amet lorem ipsum dolar sit amet lorem ipsum dolar sit amet lorem ipsum dolar sit amet lorem ipsum dolar sit amet lorem ipsum dolar sit amet lorem ipsum dolar sit amet lorem ipsum dolar sit amet lorem ipsum dolar sit amet lorem ipsum dolar sit amet lorem ipsum dolar sit amet lorem ipsum dolar sit amet lorem ipsum dolar sit amet lorem ipsum dolar sit amet lorem ipsum dolar sit amet lorem ipsum dolar sit amet 
  </div>
  <div class="tab-pane" id="profile" style="height: 200px; width: 100%;" scrollable parameters="{{ {hScrollbar : false}  }}">
      amet sit dolar ipsum       amet sit dolar ipsum amet sit dolar ipsum amet sit dolar ipsum amet sit dolar ipsum amet sit dolar ipsum amet sit dolar ipsum amet sit dolar ipsum amet sit dolar ipsum amet sit dolar ipsum amet sit dolar ipsum amet sit dolar ipsum amet sit dolar ipsum amet sit dolar ipsum amet sit dolar ipsum amet sit dolar ipsum amet sit dolar ipsum amet sit dolar ipsum...

JavaScript

var myApp = angular.module('myApp',['angular-momentum-scroll']);

'use strict';

angular.module('angular-momentum-scroll', []);

/**
 * scrollable directive utilizing iScroll lib. Attach to wrapping container.
 * First child will be scrolled only, SEE: http://cubiq.org/iscroll-4
 * 
 * automatically sets following CSS style on the container: overflow: auto;
 * position: relative;
 *  !! the container MUST have set width and height !!
 *  !! in order to scroll horizontally the .scroller class inside of your
 * container MUST have set width and height !!
 * 
 * the container takes an additional attribute 'iscroll-parameters' according to
 * iScroll docs.
 * 
 * e.g. <div id="my-cont" style="height: 400px; width: 100%;" scrollable
 * parameters="{{ {hScrollbar : true, snap: '.row'} }}">
 */
var scrollable = function() {

	return {
		restrict : 'AE',
		scope : {
			parameters : '@'
		},
        transclude : true,
		template : '<div class="scroller" ng-transclude></div>',
		link : function(scope, element, attrs) {
			// strange behavior: if I do not observe, the scope.parameters will
			// be undefined
			attrs.$observe('parameters', function(val) {
				scope.iscrollParameters = angular.fromJson(val); // parse the
				// JSON
				// string
				element.css('overflow', 'auto');
				element.css('position', 'relative');
				// fix for automatic horizontal scroll
				if ('hScroll' in scope.iscrollParameters &&
						scope.iscrollParameters.hScroll) {
					angular.element(element.children('.scroller')[0]).addClass(
							'horizontalscroll');
				}

				if (angular.isDefined(scope.iscrollParameters)) {
					var scroll = new iScroll(element[0],
							scope.iscrollParameters);
					scope.$watch(function() {
						scroll.refresh();
					});
					element.bind('$destroy', function() {
						// make sure to free memory if scrollable element is 
						// destroyed (avoid memleaking)
						scroll.destroy();
						scroll =...