Scrollable views while using famous angular

Question

I'm super new to famous and intermediate to angular.

Question: since everything is fixed positioning in famous how should I approach creating a scrollable section using famous angular?

HTML: this will create a grid of squares this code is taken from Famous/angular tut

<fa-app id="app">
  <fa-grid-layout fa-options="myGridLayoutOptions">
    <fa-modifier ng-repeat="item in list"
                 fa-size="[100, 100]"
                 fa-origin="[0.5, 0.5]"
                 fa-align="[0.5, 0.5]"
                 fa-rotate-z="item.rotate.get()">
      <fa-surface fa-background-color="item.bgColor">
        {{item.content}}
      </fa-surface>
    </fa-modifier>
  </fa-grid-layout>
</fa-app> 

CSS: positions the app window

#app {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

CTRL: makes a 3x3 grid and loops over the list items

    var Engine = $famous[('famous/core/Engine')];
    var Surface = $famous[('famous/core/Surface')];
    var Transitionable = $famous['famous/transitions/Transitionable'];
    var Easing = $famous['famous/transitions/Easing'];
    $scope.myGridLayoutOptions = {
      dimensions: [3, 3]
    };

    $scope.list = [
      {content:"hello", bgColor: "#b58900", rotate: new Transitionable(0)},
      {content:"world", bgColor: "#cb4b16", rotate: new Transitionable(0)},
      {content: "famous", bgColor: "#dc322f", rotate: new Transitionable(0)},
      {content: "angular", bgColor: "#d33682", rotate: new Transitionable(0)},
      {content: "is", bgColor: "#6c71c4", rotate: new Transitionable(0)},
      {content: "cool!", bgColor: "#268bd2", rotate: new Transitionable(0)},
      {content: "asd", bgColor: "#d33682", rotate: new Transitionable(0)},
      {content: "ass", bgColor: "#6c71c4", rotate: new Transitionable(0)},
      {content: "fffs!", bgColor: "#268bd2", rotate: new Transitionable(0)},
      {content:"hello", bgColor: "#b58900", rotate: new Transitionable(0)},
      {content:"world", bgColor: "#cb4b16", rotate: new Transitionable(0)},
      {content: "famous", bgColor: "#dc322f", rotate: new Transitionable(0)},
      {content: "angular", bgColor: "#d33682", rotate: new Transitionable(0)},
      {content: "is", bgColor: "#6c71c4", rotate: new Transitionable(0)},
      {content: "cool!", bgColor: "#268bd2", rotate: new Transitionable(0)},
      {content: "asd", bgColor: "#d33682", rotate: new Transitionable(0)},
      {content: "ass", bgColor: "#6c71c4", rotate: new Transitionable(0)},
      {content: "fffs!", bgColor: "#268bd2", rotate: new Transitionable(0)}
    ];

    $scope.animate = function() {
      for (var i = 0; i < $scope.list.length; i++) {
        $scope.list[i].rotate.set(Math.PI * 4, {curve: Easing.inOutElastic, duration: 3000 * i}) 
      };
    };

    $scope.animate();

Answer 1

Ok so after reviewing the demos of famo.us Angular I ran across an example that properly scrolls. Documentation

How to think about scrolling is different in famo.us than typical html. For what I think is a few reason [memory management, engine loop, etc] there is a directive called fa-scroll-view which will create a scroll event. The task doesnt end there. one must append that event to an element using pipes.

    <fa-app ng-controller="PipeCtrl">
  <!-- fa-scroll-view receives all events from $scope.myEventHandler, and decides how to handle them -->
  <fa-scroll-view fa-pipe-from="myEventHandler">
      <fa-view ng-repeat="view in views">
        <fa-modifier fa-size="[undefined, 160]">
        <!-- All events on fa-surfaces (click, mousewheel) are piped to $scope.myEventHandler -->
           <fa-surface fa-background-color="view.color"
                        fa-pipe-to="myEventHandler">
           </fa-surface>
          </fa-modifier>
      </fa-view>
  </fa-scroll-view>
</fa-app>

<script>
  angular.module('faPipeExampleApp', ['famous.angular'])
      .controller('PipeCtrl', ['$scope', '$famous', function($scope, $famous) {

        var EventHandler = $famous['famous/core/EventHandler'];

        $scope.views = [{color: 'red'}, {color: 'blue'}, {color: 'green'}, {color: 'yellow'}, {color: 'orange'}];

        $scope.myEventHandler = new EventHandler();

    }]);
</script>