diff --git a/dist/famous-angular.js b/dist/famous-angular.js
index b77b22d8..1e972108 100644
--- a/dist/famous-angular.js
+++ b/dist/famous-angular.js
@@ -1438,6 +1438,83 @@ angular.module('famous.angular')
     };
   }]);
 
+/**
+ * @ngdoc directive
+ * @name faCanvasSurface
+ * @module famous.angular
+ * @restrict EA
+ * @param {String} faSize  -  Array that passes width and height to the canvas
+ * @description
+ * This directive creates a Famo.us CanvasSurface.
+ * @usage
+ * ```html
+ * <fa-canvas-surface fa-size="[400,400]">
+ * </fa-canvas-surface>
+ * ```
+ @example
+ * To use `fa-canvas-surface`, declare an `fa-size` attribute with an array containing width and height.
+ * ```html
+ * <fa-canvas-surface
+ *            fa-size="[400,400]"
+ *            class="main-canvas"
+ *            >
+ * </fa-canvas-surface>
+ * ```
+ * `Fa-canvas-surface` accepts classes and faSize, the only two attributes HTML5 canvas requires is width and height.
+ */
+angular.module('famous.angular')
+  .directive('faCanvasSurface', ['$famous', '$famousDecorator', function ($famous, $famousDecorator) {
+    return {
+      scope: true,
+      transclude: true,
+      template: '<canvas class="fa-canvas-surface"></canvas>',
+      restrict: 'EA',
+      compile: function(tElem, tAttrs, transclude){
+        return {
+          pre: function(scope, element, attrs){
+            var isolate = $famousDecorator.ensureIsolate(scope);
+
+            var CanvasSurface = $famous['famous/surfaces/CanvasSurface'];
+            var Transform = $famous['famous/core/Transform'];
+            var EventHandler = $famous['famous/core/EventHandler'];
+
+            isolate.renderNode = new CanvasSurface({
+              size: scope.$eval(attrs.faSize)
+            });
+
+            if (attrs.class) {
+              isolate.renderNode.setClasses(attrs['class'].split(' '));
+            }
+          },
+          post: function(scope, element, attrs){
+            var isolate = $famousDecorator.ensureIsolate(scope);
+
+            var updateContent = function() {
+	            isolate.renderNode.setContent(element[0].querySelector('canvas.fa-canvas-surface'));
+            };
+
+            updateContent();
+
+            //boilerplate
+            transclude(scope, function(clone) {
+              angular.element(element[0].querySelectorAll('canvas.fa-canvas-surface')).append(clone);
+            });
+
+            //TODO:  on this and all other render-node-wrapping fa-directives,
+            //       expose an actual RenderNode in isolate.renderNode and
+            //       use that RenderNode's .set() function to add/remove content
+            //       from the scene graph.  This will probably be instead of
+            //       using RenderControllers.
+            $famousDecorator.registerChild(scope, element, isolate, function() {
+              // TODO: hook into RenderController and hide this render node
+            });
+                     
+          }
+        };
+      }
+    };
+  }]);
+
 /**
  * @ngdoc directive
  * @name faClick
diff --git a/dist/famous-angular.min.js b/dist/famous-angular.min.js
index 929264bf..3e46af59 100644
--- a/dist/famous-angular.min.js
+++ b/dist/famous-angular.min.js
@@ -4,4 +4,4 @@
  * @link https://github.com/Famous/famous-angular
  * @license MPL v2.0
  */
-"use strict";var ngFameApp=angular.module("famous.angular",[]);window.name="NG_DEFER_BOOTSTRAP!"+window.name;var requirements=["famous/core/Context","famous/core/ElementAllocator","famous/core/Engine","famous/core/Entity","famous/core/EventEmitter","famous/core/EventHandler","famous/core/Group","famous/core/Modifier","famous/core/OptionsManager","famous/core/RenderNode","famous/core/Scene","famous/core/SpecParser","famous/core/Surface","famous/core/Transform","famous/core/View","famous/core/ViewSequence","famous/events/EventArbiter","famous/events/EventFilter","famous/events/EventMapper","famous/inputs/FastClick","famous/inputs/GenericSync","famous/inputs/MouseSync","famous/inputs/PinchSync","famous/inputs/RotateSync","famous/inputs/ScaleSync","famous/inputs/ScrollSync","famous/inputs/TouchSync","famous/inputs/TouchTracker","famous/inputs/TwoFingerSync","famous/math/Matrix","famous/math/Quaternion","famous/math/Random","famous/math/Utilities","famous/math/Vector","famous/modifiers/Draggable","famous/modifiers/Fader","famous/modifiers/ModifierChain","famous/modifiers/StateModifier","famous/physics/PhysicsEngine","famous/surfaces/CanvasSurface","famous/surfaces/ContainerSurface","famous/surfaces/FormContainerSurface","famous/surfaces/ImageSurface","famous/surfaces/InputSurface","famous/surfaces/SubmitInputSurface","famous/surfaces/TextareaSurface","famous/surfaces/VideoSurface","famous/transitions/CachedMap","famous/transitions/Easing","famous/transitions/MultipleTransition","famous/transitions/SnapTransition","famous/transitions/SpringTransition","famous/transitions/Transitionable","famous/transitions/TransitionableTransform","famous/transitions/TweenTransition","famous/transitions/WallTransition","famous/utilities/KeyCodes","famous/utilities/Timer","famous/utilities/Utility","famous/views/Deck","famous/views/EdgeSwapper","famous/views/FlexibleLayout","famous/views/Flipper","famous/views/GridLayout","famous/views/HeaderFooterLayout","famous/views/Lightbox","famous/views/RenderController","famous/views/ScrollContainer","famous/views/Scroller","famous/views/Scrollview","famous/views/SequentialLayout","famous/widgets/NavigationBar","famous/widgets/Slider","famous/widgets/TabBar","famous/widgets/ToggleButton","famous/physics/bodies/Body","famous/physics/bodies/Circle","famous/physics/bodies/Particle","famous/physics/bodies/Rectangle","famous/physics/constraints/Collision","famous/physics/constraints/Constraint","famous/physics/constraints/Curve","famous/physics/constraints/Distance","famous/physics/constraints/Snap","famous/physics/constraints/Surface","famous/physics/constraints/Wall","famous/physics/constraints/Walls","famous/physics/forces/Drag","famous/physics/forces/Force","famous/physics/forces/Repulsion","famous/physics/forces/RotationalDrag","famous/physics/forces/RotationalSpring","famous/physics/forces/Spring","famous/physics/forces/VectorField","famous/physics/integrators/SymplecticEuler"];require(requirements,function(){var e=arguments;ngFameApp.provider("$famous",function(){var e={};this.registerModule=function(r,n){e[r]=n},e.getIsolate=function(e){return"isolate"in e?e.isolate[e.$id]:{}},e.find=function(r){var n=angular.element(window.document.querySelectorAll(r)),o=function(e){var r=[];return angular.forEach(e,function(e,n){r[n]=angular.element(e).scope()}),r}(n),a=function(r){var n=[];return angular.forEach(r,function(r,o){n[o]=e.getIsolate(r)}),n}(o);return a},this.$get=function(){return e}}),ngFameApp.config(["$famousProvider",function(r){for(var n=0;n<requirements.length;n++)r.registerModule(requirements[n],e[n])}]),angular.element(document).ready(function(){angular.resumeBootstrap&&angular.resumeBootstrap()}),window.dispatchEvent(new Event("$famousModulesLoaded"))}),angular.module("famous.angular").config(["$provide",function(e){e.decorator("$animate",["$delegate","$rootScope","$famous","$parse",function(e,r,n,o){function a(e){var r=n.getIsolate(e.scope());return r&&r.renderNode instanceof t}var t=n["famous/core/Surface"],i=n["famous/utilities/Timer"],u="$$faAnimationActive",s={enabled:e.enabled};return angular.forEach(["addClass","removeClass"],function(r){var o=angular.element.prototype[r];angular.element.prototype[r]=function(e){return o.apply(this,arguments),a(this)&&"string"==typeof e&&""!==e.trim()&&n.getIsolate(this.scope()).renderNode[r](e),this},s[r]=function(o,t,i){if(e[r](o,t,i),a(o)){var u=n.getIsolate(o.scope()).renderNode;angular.forEach(t.split(" "),function(e){u[r](e)})}}}),s.setClass=function(r,o,t,i){if(e.setClass(r,o,t,i),a(r)){var u=n.getIsolate(r.scope()).renderNode;angular.forEach(o.split(" "),function(e){u.addClass(e)}),angular.forEach(t.split(" "),function(e){u.removeClass(e)})}},angular.forEach(["enter","leave","move"],function(n){s[n]=function(a){var t=this,s=arguments,f="enter"===n;f===!0&&e[n].apply(this,arguments),a.data(u)===!0&&o(a.attr("fa-animate-halt"))(a.scope()),a.data(u,!0);var c=function(){a.data(u)!==!1&&(a.data(u,!1),f===!1&&e[n].apply(t,s))};r.$$postDigest(function(){var e=a.attr("fa-animate-"+n);if(void 0===e)return void c();var r=o(e)(a.scope(),{$done:c});"number"==typeof r&&i.setTimeout(c,r)})}}),s}])}]),angular.module("famous.angular").factory("$famousDecorator",function(){return{addRole:function(){},ensureIsolate:function(e){e.isolate=e.isolate||{},e.isolate[e.$id]=e.isolate[e.$id]||{};var r=e.isolate[e.$id];r.id=e.$id;var n=e.$eval("$index");return n&&"$index"!==n&&!r.index&&(r.index=n),r},registerChild:function(e,r,n,o){e.$emit("registerChild",n),r.one("$destroy",function(){"removeMethod"in n&&n.removeMethod(n.id),o&&o()})},sequenceWith:function(e,r,n,o){e.$on("registerChild",function(a,t){a.targetScope.$id!==e.$id&&(r(t),a.stopPropagation(),n&&(t.removeMethod=n),o&&(t.updateMethod=o))})}}}),angular.module("famous.angular").service("$famousPipe",function(){function e(e,r,n){e instanceof Array||(e=[e]),r instanceof Array||(r=[r]);for(var o=0;o<e.length;o++)for(var a=0;a<r.length;a++)void 0!==r[a]&&void 0!==e[o]&&r[a][n](e[o])}this.unpipesFromTargets=function(r,n){e(r,n,"unpipe")},this.pipesToTargets=function(r,n){e(r,n,"pipe")}}),angular.module("famous.angular").directive("faAnimation",["$famous","$famousDecorator",function(e,r){return{restrict:"EA",scope:!0,compile:function(){var n=e["famous/core/Transform"],o=e["famous/transitions/Transitionable"],a=e["famous/transitions/Easing"];return{pre:function(e){r.ensureIsolate(e)},post:function(e,t,i){var u=r.ensureIsolate(e);setTimeout(function(){u.timeline=e.$eval(i.timeline),u._trans=new o(0),u.play=function(r){var n={duration:e.$eval(i.duration),curve:e.$eval(i.curve)||"linear"};u._trans.set(1,n,function(){r&&r(),i.loop&&setTimeout(function(){u.replay(r)},0)})},u.reset=function(){u._trans.set(0)},u.replay=function(e){u.reset(),u.play(e)};var r=null;i.event&&(r&&r(),r=e.$on(i.event,function(e,r){var n=r&&r.callback?r.callback:void 0;u.replay(n)}));i.id;if(void 0===u.timeline&&(u.timeline=u._trans.get.bind(u._trans),i.autoplay&&u.play()),!u.timeline instanceof Function)throw new Error("timeline must be a reference to a function or duration must be provided");for(var s=t[0].querySelectorAll("animate"),f={},c=0;c<s.length;c++)!function(){var r=s[c];if(r.attributes.targetmodselector){var o=angular.element(t[0].parentNode)[0].querySelectorAll(r.attributes.targetmodselector.value);angular.forEach(o,function(o){var t=angular.element(o).scope(),i=t.isolate[t.$id].modifier,s=t.isolate[t.$id].getTransform,c=r.attributes.curve&&"linear"!==r.attributes.curve.value?a[r.attributes.curve.value]:function(e){return e};if(r.attributes.field){var l=r.attributes.field.value,d=r.attributes.timelinelowerbound?parseFloat(r.attributes.timelinelowerbound.value):0,p=r.attributes.timelineupperbound?parseFloat(r.attributes.timelineupperbound.value):1;if(!r.attributes.startvalue)throw new Error("you must provide a start value for the animation");var m=e.$eval(r.attributes.startvalue.value);if(!r.attributes.endvalue)throw new Error("you must provide an end value for the animation");var v=e.$eval(r.attributes.endValue.value),g=f[t.$id]=f[t.$id]||{},h=g[l]=g[l]||[];h.push({field:l,lowerBound:d,upperBound:p,startValue:m,endValue:v,curve:c}),h.sort(function(e,r){return e.lowerBound-r.lowerBound});for(var $=1;$<h.length;$++)for(var y=h[$].lowerBound,w=0;$>w;w++)if(y<h[w].upperBound)throw new Error("Animate segments have overlappingdomains for the same field ("+l+").At any point in the timeline, only one <animate>can affect a given field on the same modifier.");var N=function(){for(var e=u.timeline()||0,r=0,n=h[r],o=0;o<h.length;o++){if(e>=h[o].lowerBound&&e<=h[o].upperBound){n=h[o];break}if(o===h.length-1){n=h[o];break}if(e>=h[o].upperBound&&e<h[o+1].lowerBound){n=h[o];break}}if(e<=n.lowerBound)return n.startValue;if(e>=n.upperBound)return n.endValue;var a=n.upperBound-n.lowerBound,t=(e-n.lowerBound)/a;if(Array.isArray(n.startValue)){for(var i=[],s=0;s<n.startValue.length;s++)i.push(n.startValue[s]+n.curve(t)*(n.endValue[s]-n.startValue[s]));return i}return n.startValue+n.curve(t)*(n.endValue-n.startValue)},S=g.transformComponents=g.transformComponents||[];"opacity"===l?i.opacityFrom(function(){return N()}):"origin"===l?i.originFrom(function(){return N()}):"size"===l?i.sizeFrom(function(){return N()}):(S.push({field:l,fn:N}),i.transformFrom(function(){for(var e={},r=s&&s()?[s()]:[],o=0;o<S.length;o++)!function(){var a=S[o].field;if(!e[a]){var t=S[o].fn();r.push(Array.isArray(t)?n[a].apply(this,t):n[a](t)),e[a]=!0}}();return 1===r.length?r[0]:n.multiply.apply(this,r)}))}})}}()},1)}}}}}]),angular.module("famous.angular").directive("faApp",["$famous","$famousDecorator",function(e,r){return{template:'<div style="display: none;"><div></div></div>',transclude:!0,scope:!0,restrict:"EA",compile:function(n,o,a){return{pre:function(n,o,a){function t(){u.apply(this,arguments)}{var i=r.ensureIsolate(n),u=e["famous/core/View"],s=e["famous/core/Engine"];e["famous/core/Transform"]}o.append('<div class="famous-angular-container"></div>'),i.context=s.createContext(o[0].querySelector(".famous-angular-container"));var f=function(){var e=parseInt(a.faPerspective);e&&i.context.setPerspective(e)};a.$observe("faPerspective",f),f(),t.prototype=Object.create(u.prototype),t.prototype.constructor=t;i.view=new t,i.context.add(i.view),n.$on("$destroy",function(){i.context.update=angular.noop}),n.$on("registerChild",function(e,r){i.view.add(r.renderNode),e.stopPropagation()})},post:function(e,n){var o=r.ensureIsolate(e);a(e,function(e){angular.element(n[0].querySelectorAll("div div")[0]).append(e)}),o.readyToRender=!0}}}}}]),angular.module("famous.angular").directive("faClick",["$parse","$famousDecorator",function(e,r){return{restrict:"A",compile:function(){return{post:function(n,o,a){var t=r.ensureIsolate(n);if(a.faClick){var i=t.renderNode._eventInput||t.renderNode;i.on("click",function(r){var o=e(a.faClick);o(n,{$event:r}),n.$$phase||n.$apply()})}}}}}}]),angular.module("famous.angular").directive("faContainerSurface",["$famous","$famousDecorator",function(e,r){return{template:"<div></div>",restrict:"E",transclude:!0,scope:!0,compile:function(n,o,a){return{pre:function(n,o,a){var t=r.ensureIsolate(n),i=e["famous/surfaces/ContainerSurface"],u=n.$eval(a.faOptions)||{};t.renderNode=new i(u),r.sequenceWith(n,function(e){t.renderNode.add(e.renderNode)},function(){throw new Error("unimplemented: fa-container-surface does not support removing children")})},post:function(e,n){var o=r.ensureIsolate(e);a(e,function(e){n.find("div").append(e)}),r.registerChild(e,n,o)}}}}}]),angular.module("famous.angular").directive("faFlexibleLayout",["$famous","$famousDecorator",function(e,r){return{template:"<div></div>",restrict:"E",transclude:!0,scope:!0,compile:function(n,o,a){return{pre:function(n,o,a){var t=r.ensureIsolate(n),i=e["famous/views/FlexibleLayout"],u=(e["famous/core/ViewSequence"],[]),s=n.$eval(a.faOptions)||{};t.renderNode=new i(s);var f=function(){u.sort(function(e,r){return e.index-r.index}),t.renderNode.sequenceFrom(function(e){var r=[];return angular.forEach(e,function(e,n){r[n]=e.renderNode}),r}(u))};r.sequenceWith(n,function(e){u.push(e),f()},function(e){u=function(r){var n=[];return angular.forEach(r,function(r){r.id!==e&&n.push(r)}),n}(u),f()})},post:function(e,n){var o=r.ensureIsolate(e);a(e,function(e){n.find("div").append(e)}),e.$emit("registerChild",o)}}}}}]),angular.module("famous.angular").directive("faFlipper",["$famous","$famousDecorator",function(e,r){return{template:"<div></div>",restrict:"E",transclude:!0,scope:!0,compile:function(n,o,a){return{pre:function(n,o,a){var t=r.ensureIsolate(n),i=e["famous/views/Flipper"],u=n.$eval(a.faOptions)||{};t.renderNode=new i(u),t.children=[],t.flip=function(e){t.renderNode.flip(e||n.$eval(a.faOptions))},r.sequenceWith(n,function(e){var r=t.children.length;if(0===r)t.renderNode.setFront(e.renderNode);else{if(1!==r)throw new Error("fa-flipper accepts only two child elements; more than two have been provided");t.renderNode.setBack(e.renderNode)}t.children.push(e.renderNode)},function(){throw new Error("unimplemented: fa-flipper does not support removing children")})},post:function(e,n){var o=r.ensureIsolate(e);a(e,function(e){n.find("div").append(e)}),r.registerChild(e,n,o)}}}}}]),angular.module("famous.angular").directive("faGridLayout",["$famous","$famousDecorator",function(e,r){return{template:"<div></div>",restrict:"E",transclude:!0,scope:!0,compile:function(n,o,a){return{pre:function(n,o,a){var t=r.ensureIsolate(n),i=e["famous/views/GridLayout"],u=(e["famous/core/ViewSequence"],[]),s=n.$eval(a.faOptions)||{};t.renderNode=new i(s),n.$watch(function(){return n.$eval(a.faOptions)},function(e,r){t.renderNode.setOptions(r)},!0);var f=function(){n.$$postDigest(function(){u.sort(function(e,r){return e.index-r.index}),t.renderNode.sequenceFrom(function(e){var r=[];return angular.forEach(e,function(e,n){r[n]=e.renderNode}),r}(u))})};r.sequenceWith(n,function(e){u.push(e),f()},function(e){u=function(r){var n=[];return angular.forEach(r,function(r){r.id!==e&&n.push(r)}),n}(u),f()},f)},post:function(e,n){var o=r.ensureIsolate(e);a(e,function(e){n.find("div").append(e)}),r.registerChild(e,n,o)}}}}}]),angular.module("famous.angular").directive("faHeaderFooterLayout",["$famous","$famousDecorator",function(e,r){return{template:"<div></div>",restrict:"E",transclude:!0,scope:!0,compile:function(n,o,a){var t=e["famous/views/HeaderFooterLayout"],i=e["famous/core/RenderNode"];return{pre:function(e,n,o){var a=r.ensureIsolate(e),u=(new i,new i,new i,e.$eval(o.faOptions)||{});a.renderNode=new t(u);var s=0;r.sequenceWith(e,function(e){if(s++,1===s)a.renderNode.header.add(e.renderNode);else if(2===s)a.renderNode.content.add(e.renderNode);else{if(3!==s)throw new Error("fa-header-footer-layout can accept no more than 3 children");a.renderNode.footer.add(e.renderNode)}},function(){throw new Error("unimplemented: fa-header-footer-layout does not support removing children")})},post:function(e,n){var o=r.ensureIsolate(e);a(e,function(e){n.find("div").append(e)}),r.registerChild(e,n,o)}}}}}]),angular.module("famous.angular").directive("faImageSurface",["$famous","$famousDecorator",function(e,r){return{scope:!0,template:'<div class="fa-image-surface"></div>',restrict:"EA",compile:function(){return{pre:function(n,o,a){{var t=r.ensureIsolate(n),i=e["famous/surfaces/ImageSurface"];e["famous/core/Transform"],e["famous/core/EventHandler"]}n.$watch(function(){return t.getProperties()},function(){t.renderNode&&t.renderNode.setProperties(t.getProperties())},!0);var u=function(e){return"fa"+e.charAt(0).toUpperCase()+e.slice(1)};t.getProperties=function(){for(var e=n.$eval(a.faProperties)||{},r=["backgroundColor","color"],o=0;o<r.length;o++){var t=r[o],i=u(t);a[i]&&(e[t]=n.$eval(a[i]))}return e};t.renderNode=new i({size:n.$eval(a.faSize),"class":n.$eval(a.class),properties:t.getProperties()}),a.class&&t.renderNode.setClasses(a["class"].split(" "))},post:function(e,n,o){var a=r.ensureIsolate(e),t=function(){a.renderNode.setContent(o.faImageUrl)};t(),o.$observe("faImageUrl",t),r.registerChild(e,n,a)}}}}}]),angular.module("famous.angular").directive("faIndex",["$parse","$famousDecorator",function(e,r){return{restrict:"A",scope:!1,priority:16,compile:function(){return{post:function(e,n,o){var a=r.ensureIsolate(e);a.index=e.$eval(o.faIndex),e.$watch(function(){return e.$eval(o.faIndex)},function(){a.index=e.$eval(o.faIndex),a.updateMethod&&a.updateMethod()})}}}}}]),angular.module("famous.angular").directive("faModifier",["$famous","$famousDecorator","$parse","$rootScope",function(e,r,n,o){return{template:"<div></div>",transclude:!0,restrict:"EA",priority:2,scope:!0,compile:function(a,t,i){return{post:function(a,t,u){function s(e){return e.replace(m,function(e,r,n,o){return o?n.toUpperCase():n}).replace(v,"Moz$1")}function f(e){return s(e.replace(g,""))}var c=r.ensureIsolate(a),l=e["famous/core/RenderNode"],d=e["famous/core/Modifier"],p=e["famous/core/Transform"],m=/([\:\-\_]+(.))/g,v=/^moz([A-Z])/,g=/^(x[\:\-_]|data[\:\-_])/i,h=["aboutOrigin","perspective","rotate","rotateAxis","rotateX","rotateY","rotateZ","scale","skew","translate"];u.$observe("faTransformOrder",function(){var e=a.$eval(u.faTransformOrder);void 0!==e&&(h=e)});var $={};angular.forEach(h,function(e){var r=f("fa-"+e);u.$observe(r,function(){$[e]=n(u[r])})});var y=angular.noop;u.$observe("faTransform",function(){y=n(u.faTransform)}),c.getTransform=function(){var e=y(a);if(void 0!==e)return e instanceof Function?e():e instanceof Object&&void 0!==e.get?e.get():e;var r=[];return angular.forEach(h,function(e){var n=$[e]?$[e](a):void 0;void 0!==n&&(n instanceof Function&&(n=n()),r.push(n instanceof Array?p[e].apply(this,n):p[e].call(this,n)))}),r.length?1===r.length?r[0]:p.multiply.apply(this,r):void 0};var w=angular.noop;u.$observe("faAlign",function(){w=n(u.faAlign)}),c.getAlign=function(){var e=w(a);return e instanceof Function?e():e instanceof Object&&void 0!==e.get?e.get():e};var N=angular.noop;u.$observe("faOpacity",function(){N=n(u.faOpacity)}),c.getOpacity=function(){var e=N(a);return void 0===e?1:e instanceof Function?e():e instanceof Object&&void 0!==e.get?e.get():e};var S=angular.noop;u.$observe("faSize",function(){S=n(u.faSize)}),c.getSize=function(){var e=S(a);return e instanceof Function?e():e instanceof Object&&void 0!==e.get?e.get():e};var E=angular.noop;u.$observe("faOrigin",function(){E=n(u.faOrigin)}),c.getOrigin=function(){var e=E(a);return e instanceof Function?e():e instanceof Object&&void 0!==e.get?e.get():e},c.modifier=new d({transform:c.getTransform,size:c.getSize,opacity:c.getOpacity,origin:c.getOrigin,align:c.getAlign}),c.renderNode=(new l).add(c.modifier),r.sequenceWith(a,function(e){c.renderNode.add(e.renderNode)}),i(a,function(e){t.find("div").append(e)}),r.registerChild(a,t,c,function(){c.modifier.setOpacity(0)}),a.$$phase||o.$$phase||a.$apply()}}}}}]),angular.module("famous.angular").directive("faPipeFrom",["$famous","$famousDecorator","$famousPipe",function(e,r,n){return{restrict:"A",scope:!1,priority:16,compile:function(){var o=e["famous/core/Engine"];return{post:function(e,a,t){var i=r.ensureIsolate(e);e.$watch(function(){return e.$eval(t.faPipeFrom)},function(e,r){var a=i.renderNode||o;n.unpipesFromTargets(a,r),n.pipesToTargets(a,e)}),e.$on("$destroy",function(){n.unpipesFromTargets(i.renderNode||o,e.$eval(t.faPipeFrom))})}}}}}]),angular.module("famous.angular").directive("faPipeTo",["$famous","$famousDecorator","$famousPipe",function(e,r,n){return{restrict:"A",scope:!1,priority:16,compile:function(){var o=e["famous/core/Engine"];return{post:function(e,a,t){var i=r.ensureIsolate(e);e.$watch(function(){return e.$eval(t.faPipeTo)},function(e,r){var a=i.renderNode||o;n.unpipesFromTargets(r,a),n.pipesToTargets(e,a)}),e.$on("$destroy",function(){n.unpipesFromTargets(e.$eval(t.faPipeTo),i.renderNode||o)})}}}}}]),angular.module("famous.angular").directive("faRenderNode",["$famous","$famousDecorator",function(e,r){return{template:"<div></div>",transclude:!0,scope:!0,restrict:"EA",compile:function(n,o,a){return{pre:function(n,o,a){var t=r.ensureIsolate(n),i=e["famous/core/Engine"];t.children=[],a.$observe("faPipeTo",function(e){var r=n.$eval(e);r&&i.pipe(r)}),t.renderNode=n.$eval(a.faNode),r.sequenceWith(n,function(e){t.renderNode.add(e.renderNode),t.children.push(e)})},post:function(e,n){var o=r.ensureIsolate(e);a(e,function(e){n.find("div").append(e)}),r.registerChild(e,n,o)}}}}}]),angular.module("famous.angular").directive("faScrollView",["$famous","$famousDecorator",function(e,r){return{template:"<div></div>",restrict:"E",transclude:!0,scope:!0,compile:function(n,o,a){return{pre:function(n,o,a){var t=r.ensureIsolate(n),i=e["famous/views/Scrollview"],u=e["famous/core/ViewSequence"],s=(e["famous/core/Surface"],[]),f=n.$eval(a.faOptions)||{};t.renderNode=new i(f);var c=function(e){n.$$postDigest(function(){s.sort(function(e,r){return e.index-r.index});var r={array:function(e){var r=[];return angular.forEach(e,function(e,n){r[n]=e.renderNode}),r}(s)};e&&(r.index=n.$eval(a.faStartIndex));var o=new u(r);t.renderNode.sequenceFrom(o)})};r.sequenceWith(n,function(e){s.push(e),c(!0)},function(e){s=function(r){var n=[];return angular.forEach(r,function(r){r.id!==e&&n.push(r)}),n}(s),c()},c)},post:function(e,n){var o=r.ensureIsolate(e);a(e,function(e){n.find("div").append(e)}),r.registerChild(e,n,o)}}}}}]),angular.module("famous.angular").directive("faSequentialLayout",["$famous","$famousDecorator",function(e,r){return{template:"<div></div>",restrict:"E",transclude:!0,scope:!0,compile:function(n,o,a){return window.$f=e,{pre:function(n,o,a){var t=r.ensureIsolate(n),i=e["famous/views/SequentialLayout"],u=[],s=n.$eval(a.faOptions)||{};t.renderNode=new i(s);var f=function(){u.sort(function(e,r){return e.index-r.index}),t.renderNode.sequenceFrom(function(e){var r=[];return angular.forEach(e,function(e,n){r[n]=e.renderNode}),r}(u))};r.sequenceWith(n,function(e){u.push(e),f()},function(e){u=function(r){var n=[];return angular.forEach(r,function(r){r.id!==e&&n.push(r)}),n}(u),f()})},post:function(e,n){var o=r.ensureIsolate(e);a(e,function(e){n.find("div").append(e)}),r.registerChild(e,n,o)}}}}}]),angular.module("famous.angular").directive("faSurface",["$famous","$famousDecorator","$interpolate","$controller","$compile",function(e,r){return{scope:!0,transclude:!0,template:'<div class="fa-surface"></div>',restrict:"EA",compile:function(n,o,a){return{pre:function(n,o,a){{var t=r.ensureIsolate(n),i=e["famous/core/Surface"];e["famous/core/Transform"],e["famous/core/EventHandler"]}n.$watch(function(){return t.getProperties()},function(){t.renderNode&&t.renderNode.setProperties(t.getProperties())},!0);var u=function(e){return"fa"+e.charAt(0).toUpperCase()+e.slice(1)};t.getProperties=function(){for(var e=n.$eval(a.faProperties)||{},r=["backgroundColor","margin","padding","color","pointerEvents","zIndex"],o=0;o<r.length;o++){var t=r[o],i=u(t);a[i]&&(e[t]=n.$eval(a[i]))}return e},t.renderNode=new i({size:n.$eval(a.faSize),properties:t.getProperties()}),a.class&&t.renderNode.setClasses(a["class"].split(" "))},post:function(e,n){var o=r.ensureIsolate(e),t=function(){o.renderNode.setContent(n[0].querySelector("div.fa-surface"))};t(),a(e,function(e){angular.element(n[0].querySelectorAll("div.fa-surface")).append(e)}),r.registerChild(e,n,o,function(){})}}}}}]),angular.module("famous.angular").directive("faTap",["$parse","$famousDecorator",function(e,r){return{restrict:"A",compile:function(){return{post:function(n,o,a){var t=r.ensureIsolate(n);if(a.faTap){var i=t.renderNode._eventInput||t.renderNode,u=!1;i.on("touchmove",function(e){return u=!0,e}),i.on("touchend",function(r){if(!u){var o=e(a.faTap);o(n,{$event:r}),n.$$phase||n.$apply()}u=!1})}}}}}}]),angular.module("famous.angular").directive("faTouchend",["$parse","$famousDecorator",function(e,r){return{restrict:"A",scope:!1,compile:function(){return{post:function(n,o,a){var t=r.ensureIsolate(n);if(a.faTouchend){var i=t.renderNode._eventInput||t.renderNode;i.on("touchend",function(r){var o=e(a.faTouchend);o(n,{$event:r}),n.$$phase||n.$apply()})}}}}}}]),angular.module("famous.angular").directive("faTouchmove",["$parse","$famousDecorator",function(e,r){return{restrict:"A",scope:!1,compile:function(){return{post:function(n,o,a){var t=r.ensureIsolate(n);if(a.faTouchmove){var i=t.renderNode._eventInput||t.renderNode;i.on("touchmove",function(r){var o=e(a.faTouchmove);o(n,{$event:r}),n.$$phase||n.$apply()})}}}}}}]),angular.module("famous.angular").directive("faTouchstart",["$parse","$famousDecorator",function(e,r){return{restrict:"A",scope:!1,compile:function(){return{post:function(n,o,a){var t=r.ensureIsolate(n);if(a.faTouchstart){var i=t.renderNode._eventInput||t.renderNode;i.on("touchstart",function(r){var o=e(a.faTouchstart);o(n,{$event:r}),n.$$phase||n.$apply()})}}}}}}]),angular.module("famous.angular").directive("faView",["$famous","$famousDecorator",function(e,r){return{template:"<div></div>",transclude:!0,scope:!0,restrict:"EA",compile:function(n,o,a){var t=e["famous/core/View"];return{pre:function(e,n,o){var a=r.ensureIsolate(e);a.children=[];a.renderNode=new t({size:e.$eval(o.faSize)||[void 0,void 0]}),r.sequenceWith(e,function(e){a.renderNode.add(e.renderNode),a.children.push(e)})},post:function(e,n){var o=r.ensureIsolate(e);a(e,function(e){n.find("div").append(e)}),r.registerChild(e,n,o)}}}}}]);
\ No newline at end of file
+"use strict";var ngFameApp=angular.module("famous.angular",[]);window.name="NG_DEFER_BOOTSTRAP!"+window.name;var requirements=["famous/core/Context","famous/core/ElementAllocator","famous/core/Engine","famous/core/Entity","famous/core/EventEmitter","famous/core/EventHandler","famous/core/Group","famous/core/Modifier","famous/core/OptionsManager","famous/core/RenderNode","famous/core/Scene","famous/core/SpecParser","famous/core/Surface","famous/core/Transform","famous/core/View","famous/core/ViewSequence","famous/events/EventArbiter","famous/events/EventFilter","famous/events/EventMapper","famous/inputs/FastClick","famous/inputs/GenericSync","famous/inputs/MouseSync","famous/inputs/PinchSync","famous/inputs/RotateSync","famous/inputs/ScaleSync","famous/inputs/ScrollSync","famous/inputs/TouchSync","famous/inputs/TouchTracker","famous/inputs/TwoFingerSync","famous/math/Matrix","famous/math/Quaternion","famous/math/Random","famous/math/Utilities","famous/math/Vector","famous/modifiers/Draggable","famous/modifiers/Fader","famous/modifiers/ModifierChain","famous/modifiers/StateModifier","famous/physics/PhysicsEngine","famous/surfaces/CanvasSurface","famous/surfaces/ContainerSurface","famous/surfaces/FormContainerSurface","famous/surfaces/ImageSurface","famous/surfaces/InputSurface","famous/surfaces/SubmitInputSurface","famous/surfaces/TextareaSurface","famous/surfaces/VideoSurface","famous/transitions/CachedMap","famous/transitions/Easing","famous/transitions/MultipleTransition","famous/transitions/SnapTransition","famous/transitions/SpringTransition","famous/transitions/Transitionable","famous/transitions/TransitionableTransform","famous/transitions/TweenTransition","famous/transitions/WallTransition","famous/utilities/KeyCodes","famous/utilities/Timer","famous/utilities/Utility","famous/views/Deck","famous/views/EdgeSwapper","famous/views/FlexibleLayout","famous/views/Flipper","famous/views/GridLayout","famous/views/HeaderFooterLayout","famous/views/Lightbox","famous/views/RenderController","famous/views/ScrollContainer","famous/views/Scroller","famous/views/Scrollview","famous/views/SequentialLayout","famous/widgets/NavigationBar","famous/widgets/Slider","famous/widgets/TabBar","famous/widgets/ToggleButton","famous/physics/bodies/Body","famous/physics/bodies/Circle","famous/physics/bodies/Particle","famous/physics/bodies/Rectangle","famous/physics/constraints/Collision","famous/physics/constraints/Constraint","famous/physics/constraints/Curve","famous/physics/constraints/Distance","famous/physics/constraints/Snap","famous/physics/constraints/Surface","famous/physics/constraints/Wall","famous/physics/constraints/Walls","famous/physics/forces/Drag","famous/physics/forces/Force","famous/physics/forces/Repulsion","famous/physics/forces/RotationalDrag","famous/physics/forces/RotationalSpring","famous/physics/forces/Spring","famous/physics/forces/VectorField","famous/physics/integrators/SymplecticEuler"];require(requirements,function(){var e=arguments;ngFameApp.provider("$famous",function(){var e={};this.registerModule=function(r,n){e[r]=n},e.getIsolate=function(e){return"isolate"in e?e.isolate[e.$id]:{}},e.find=function(r){var n=angular.element(window.document.querySelectorAll(r)),o=function(e){var r=[];return angular.forEach(e,function(e,n){r[n]=angular.element(e).scope()}),r}(n),a=function(r){var n=[];return angular.forEach(r,function(r,o){n[o]=e.getIsolate(r)}),n}(o);return a},this.$get=function(){return e}}),ngFameApp.config(["$famousProvider",function(r){for(var n=0;n<requirements.length;n++)r.registerModule(requirements[n],e[n])}]),angular.element(document).ready(function(){angular.resumeBootstrap&&angular.resumeBootstrap()}),window.dispatchEvent(new Event("$famousModulesLoaded"))}),angular.module("famous.angular").config(["$provide",function(e){e.decorator("$animate",["$delegate","$rootScope","$famous","$parse",function(e,r,n,o){function a(e){var r=n.getIsolate(e.scope());return r&&r.renderNode instanceof t}var t=n["famous/core/Surface"],i=n["famous/utilities/Timer"],u="$$faAnimationActive",s={enabled:e.enabled};return angular.forEach(["addClass","removeClass"],function(r){var o=angular.element.prototype[r];angular.element.prototype[r]=function(e){return o.apply(this,arguments),a(this)&&"string"==typeof e&&""!==e.trim()&&n.getIsolate(this.scope()).renderNode[r](e),this},s[r]=function(o,t,i){if(e[r](o,t,i),a(o)){var u=n.getIsolate(o.scope()).renderNode;angular.forEach(t.split(" "),function(e){u[r](e)})}}}),s.setClass=function(r,o,t,i){if(e.setClass(r,o,t,i),a(r)){var u=n.getIsolate(r.scope()).renderNode;angular.forEach(o.split(" "),function(e){u.addClass(e)}),angular.forEach(t.split(" "),function(e){u.removeClass(e)})}},angular.forEach(["enter","leave","move"],function(n){s[n]=function(a){var t=this,s=arguments,c="enter"===n;c===!0&&e[n].apply(this,arguments),a.data(u)===!0&&o(a.attr("fa-animate-halt"))(a.scope()),a.data(u,!0);var f=function(){a.data(u)!==!1&&(a.data(u,!1),c===!1&&e[n].apply(t,s))};r.$$postDigest(function(){var e=a.attr("fa-animate-"+n);if(void 0===e)return void f();var r=o(e)(a.scope(),{$done:f});"number"==typeof r&&i.setTimeout(f,r)})}}),s}])}]),angular.module("famous.angular").factory("$famousDecorator",function(){return{addRole:function(){},ensureIsolate:function(e){e.isolate=e.isolate||{},e.isolate[e.$id]=e.isolate[e.$id]||{};var r=e.isolate[e.$id];r.id=e.$id;var n=e.$eval("$index");return n&&"$index"!==n&&!r.index&&(r.index=n),r},registerChild:function(e,r,n,o){e.$emit("registerChild",n),r.one("$destroy",function(){"removeMethod"in n&&n.removeMethod(n.id),o&&o()})},sequenceWith:function(e,r,n,o){e.$on("registerChild",function(a,t){a.targetScope.$id!==e.$id&&(r(t),a.stopPropagation(),n&&(t.removeMethod=n),o&&(t.updateMethod=o))})}}}),angular.module("famous.angular").service("$famousPipe",function(){function e(e,r,n){e instanceof Array||(e=[e]),r instanceof Array||(r=[r]);for(var o=0;o<e.length;o++)for(var a=0;a<r.length;a++)void 0!==r[a]&&void 0!==e[o]&&r[a][n](e[o])}this.unpipesFromTargets=function(r,n){e(r,n,"unpipe")},this.pipesToTargets=function(r,n){e(r,n,"pipe")}}),angular.module("famous.angular").directive("faAnimation",["$famous","$famousDecorator",function(e,r){return{restrict:"EA",scope:!0,compile:function(){var n=e["famous/core/Transform"],o=e["famous/transitions/Transitionable"],a=e["famous/transitions/Easing"];return{pre:function(e){r.ensureIsolate(e)},post:function(e,t,i){var u=r.ensureIsolate(e);setTimeout(function(){u.timeline=e.$eval(i.timeline),u._trans=new o(0),u.play=function(r){var n={duration:e.$eval(i.duration),curve:e.$eval(i.curve)||"linear"};u._trans.set(1,n,function(){r&&r(),i.loop&&setTimeout(function(){u.replay(r)},0)})},u.reset=function(){u._trans.set(0)},u.replay=function(e){u.reset(),u.play(e)};var r=null;i.event&&(r&&r(),r=e.$on(i.event,function(e,r){var n=r&&r.callback?r.callback:void 0;u.replay(n)}));i.id;if(void 0===u.timeline&&(u.timeline=u._trans.get.bind(u._trans),i.autoplay&&u.play()),!u.timeline instanceof Function)throw new Error("timeline must be a reference to a function or duration must be provided");for(var s=t[0].querySelectorAll("animate"),c={},f=0;f<s.length;f++)!function(){var r=s[f];if(r.attributes.targetmodselector){var o=angular.element(t[0].parentNode)[0].querySelectorAll(r.attributes.targetmodselector.value);angular.forEach(o,function(o){var t=angular.element(o).scope(),i=t.isolate[t.$id].modifier,s=t.isolate[t.$id].getTransform,f=r.attributes.curve&&"linear"!==r.attributes.curve.value?a[r.attributes.curve.value]:function(e){return e};if(r.attributes.field){var l=r.attributes.field.value,d=r.attributes.timelinelowerbound?parseFloat(r.attributes.timelinelowerbound.value):0,p=r.attributes.timelineupperbound?parseFloat(r.attributes.timelineupperbound.value):1;if(!r.attributes.startvalue)throw new Error("you must provide a start value for the animation");var m=e.$eval(r.attributes.startvalue.value);if(!r.attributes.endvalue)throw new Error("you must provide an end value for the animation");var v=e.$eval(r.attributes.endValue.value),g=c[t.$id]=c[t.$id]||{},h=g[l]=g[l]||[];h.push({field:l,lowerBound:d,upperBound:p,startValue:m,endValue:v,curve:f}),h.sort(function(e,r){return e.lowerBound-r.lowerBound});for(var $=1;$<h.length;$++)for(var y=h[$].lowerBound,w=0;$>w;w++)if(y<h[w].upperBound)throw new Error("Animate segments have overlappingdomains for the same field ("+l+").At any point in the timeline, only one <animate>can affect a given field on the same modifier.");var N=function(){for(var e=u.timeline()||0,r=0,n=h[r],o=0;o<h.length;o++){if(e>=h[o].lowerBound&&e<=h[o].upperBound){n=h[o];break}if(o===h.length-1){n=h[o];break}if(e>=h[o].upperBound&&e<h[o+1].lowerBound){n=h[o];break}}if(e<=n.lowerBound)return n.startValue;if(e>=n.upperBound)return n.endValue;var a=n.upperBound-n.lowerBound,t=(e-n.lowerBound)/a;if(Array.isArray(n.startValue)){for(var i=[],s=0;s<n.startValue.length;s++)i.push(n.startValue[s]+n.curve(t)*(n.endValue[s]-n.startValue[s]));return i}return n.startValue+n.curve(t)*(n.endValue-n.startValue)},S=g.transformComponents=g.transformComponents||[];"opacity"===l?i.opacityFrom(function(){return N()}):"origin"===l?i.originFrom(function(){return N()}):"size"===l?i.sizeFrom(function(){return N()}):(S.push({field:l,fn:N}),i.transformFrom(function(){for(var e={},r=s&&s()?[s()]:[],o=0;o<S.length;o++)!function(){var a=S[o].field;if(!e[a]){var t=S[o].fn();r.push(Array.isArray(t)?n[a].apply(this,t):n[a](t)),e[a]=!0}}();return 1===r.length?r[0]:n.multiply.apply(this,r)}))}})}}()},1)}}}}}]),angular.module("famous.angular").directive("faApp",["$famous","$famousDecorator",function(e,r){return{template:'<div style="display: none;"><div></div></div>',transclude:!0,scope:!0,restrict:"EA",compile:function(n,o,a){return{pre:function(n,o,a){function t(){u.apply(this,arguments)}{var i=r.ensureIsolate(n),u=e["famous/core/View"],s=e["famous/core/Engine"];e["famous/core/Transform"]}o.append('<div class="famous-angular-container"></div>'),i.context=s.createContext(o[0].querySelector(".famous-angular-container"));var c=function(){var e=parseInt(a.faPerspective);e&&i.context.setPerspective(e)};a.$observe("faPerspective",c),c(),t.prototype=Object.create(u.prototype),t.prototype.constructor=t;i.view=new t,i.context.add(i.view),n.$on("$destroy",function(){i.context.update=angular.noop}),n.$on("registerChild",function(e,r){i.view.add(r.renderNode),e.stopPropagation()})},post:function(e,n){var o=r.ensureIsolate(e);a(e,function(e){angular.element(n[0].querySelectorAll("div div")[0]).append(e)}),o.readyToRender=!0}}}}}]),angular.module("famous.angular").directive("faCanvasSurface",["$famous","$famousDecorator",function(e,r){return{scope:!0,transclude:!0,template:'<canvas class="fa-canvas-surface"></canvas>',restrict:"EA",compile:function(n,o,a){return{pre:function(n,o,a){{var t=r.ensureIsolate(n),i=e["famous/surfaces/CanvasSurface"];e["famous/core/Transform"],e["famous/core/EventHandler"]}t.renderNode=new i({size:n.$eval(a.faSize)}),a.class&&t.renderNode.setClasses(a["class"].split(" "))},post:function(e,n){var o=r.ensureIsolate(e),t=function(){o.renderNode.setContent(n[0].querySelector("canvas.fa-canvas-surface"))};t(),a(e,function(e){angular.element(n[0].querySelectorAll("canvas.fa-canvas-surface")).append(e)}),r.registerChild(e,n,o,function(){})}}}}}]),angular.module("famous.angular").directive("faClick",["$parse","$famousDecorator",function(e,r){return{restrict:"A",compile:function(){return{post:function(n,o,a){var t=r.ensureIsolate(n);if(a.faClick){var i=t.renderNode._eventInput||t.renderNode;i.on("click",function(r){var o=e(a.faClick);o(n,{$event:r}),n.$$phase||n.$apply()})}}}}}}]),angular.module("famous.angular").directive("faContainerSurface",["$famous","$famousDecorator",function(e,r){return{template:"<div></div>",restrict:"E",transclude:!0,scope:!0,compile:function(n,o,a){return{pre:function(n,o,a){var t=r.ensureIsolate(n),i=e["famous/surfaces/ContainerSurface"],u=n.$eval(a.faOptions)||{};t.renderNode=new i(u),r.sequenceWith(n,function(e){t.renderNode.add(e.renderNode)},function(){throw new Error("unimplemented: fa-container-surface does not support removing children")})},post:function(e,n){var o=r.ensureIsolate(e);a(e,function(e){n.find("div").append(e)}),r.registerChild(e,n,o)}}}}}]),angular.module("famous.angular").directive("faFlexibleLayout",["$famous","$famousDecorator",function(e,r){return{template:"<div></div>",restrict:"E",transclude:!0,scope:!0,compile:function(n,o,a){return{pre:function(n,o,a){var t=r.ensureIsolate(n),i=e["famous/views/FlexibleLayout"],u=(e["famous/core/ViewSequence"],[]),s=n.$eval(a.faOptions)||{};t.renderNode=new i(s);var c=function(){u.sort(function(e,r){return e.index-r.index}),t.renderNode.sequenceFrom(function(e){var r=[];return angular.forEach(e,function(e,n){r[n]=e.renderNode}),r}(u))};r.sequenceWith(n,function(e){u.push(e),c()},function(e){u=function(r){var n=[];return angular.forEach(r,function(r){r.id!==e&&n.push(r)}),n}(u),c()})},post:function(e,n){var o=r.ensureIsolate(e);a(e,function(e){n.find("div").append(e)}),e.$emit("registerChild",o)}}}}}]),angular.module("famous.angular").directive("faFlipper",["$famous","$famousDecorator",function(e,r){return{template:"<div></div>",restrict:"E",transclude:!0,scope:!0,compile:function(n,o,a){return{pre:function(n,o,a){var t=r.ensureIsolate(n),i=e["famous/views/Flipper"],u=n.$eval(a.faOptions)||{};t.renderNode=new i(u),t.children=[],t.flip=function(e){t.renderNode.flip(e||n.$eval(a.faOptions))},r.sequenceWith(n,function(e){var r=t.children.length;if(0===r)t.renderNode.setFront(e.renderNode);else{if(1!==r)throw new Error("fa-flipper accepts only two child elements; more than two have been provided");t.renderNode.setBack(e.renderNode)}t.children.push(e.renderNode)},function(){throw new Error("unimplemented: fa-flipper does not support removing children")})},post:function(e,n){var o=r.ensureIsolate(e);a(e,function(e){n.find("div").append(e)}),r.registerChild(e,n,o)}}}}}]),angular.module("famous.angular").directive("faGridLayout",["$famous","$famousDecorator",function(e,r){return{template:"<div></div>",restrict:"E",transclude:!0,scope:!0,compile:function(n,o,a){return{pre:function(n,o,a){var t=r.ensureIsolate(n),i=e["famous/views/GridLayout"],u=(e["famous/core/ViewSequence"],[]),s=n.$eval(a.faOptions)||{};t.renderNode=new i(s),n.$watch(function(){return n.$eval(a.faOptions)},function(e,r){t.renderNode.setOptions(r)},!0);var c=function(){n.$$postDigest(function(){u.sort(function(e,r){return e.index-r.index}),t.renderNode.sequenceFrom(function(e){var r=[];return angular.forEach(e,function(e,n){r[n]=e.renderNode}),r}(u))})};r.sequenceWith(n,function(e){u.push(e),c()},function(e){u=function(r){var n=[];return angular.forEach(r,function(r){r.id!==e&&n.push(r)}),n}(u),c()},c)},post:function(e,n){var o=r.ensureIsolate(e);a(e,function(e){n.find("div").append(e)}),r.registerChild(e,n,o)}}}}}]),angular.module("famous.angular").directive("faHeaderFooterLayout",["$famous","$famousDecorator",function(e,r){return{template:"<div></div>",restrict:"E",transclude:!0,scope:!0,compile:function(n,o,a){var t=e["famous/views/HeaderFooterLayout"],i=e["famous/core/RenderNode"];return{pre:function(e,n,o){var a=r.ensureIsolate(e),u=(new i,new i,new i,e.$eval(o.faOptions)||{});a.renderNode=new t(u);var s=0;r.sequenceWith(e,function(e){if(s++,1===s)a.renderNode.header.add(e.renderNode);else if(2===s)a.renderNode.content.add(e.renderNode);else{if(3!==s)throw new Error("fa-header-footer-layout can accept no more than 3 children");a.renderNode.footer.add(e.renderNode)}},function(){throw new Error("unimplemented: fa-header-footer-layout does not support removing children")})},post:function(e,n){var o=r.ensureIsolate(e);a(e,function(e){n.find("div").append(e)}),r.registerChild(e,n,o)}}}}}]),angular.module("famous.angular").directive("faImageSurface",["$famous","$famousDecorator",function(e,r){return{scope:!0,template:'<div class="fa-image-surface"></div>',restrict:"EA",compile:function(){return{pre:function(n,o,a){{var t=r.ensureIsolate(n),i=e["famous/surfaces/ImageSurface"];e["famous/core/Transform"],e["famous/core/EventHandler"]}n.$watch(function(){return t.getProperties()},function(){t.renderNode&&t.renderNode.setProperties(t.getProperties())},!0);var u=function(e){return"fa"+e.charAt(0).toUpperCase()+e.slice(1)};t.getProperties=function(){for(var e=n.$eval(a.faProperties)||{},r=["backgroundColor","color"],o=0;o<r.length;o++){var t=r[o],i=u(t);a[i]&&(e[t]=n.$eval(a[i]))}return e};t.renderNode=new i({size:n.$eval(a.faSize),"class":n.$eval(a.class),properties:t.getProperties()}),a.class&&t.renderNode.setClasses(a["class"].split(" "))},post:function(e,n,o){var a=r.ensureIsolate(e),t=function(){a.renderNode.setContent(o.faImageUrl)};t(),o.$observe("faImageUrl",t),r.registerChild(e,n,a)}}}}}]),angular.module("famous.angular").directive("faIndex",["$parse","$famousDecorator",function(e,r){return{restrict:"A",scope:!1,priority:16,compile:function(){return{post:function(e,n,o){var a=r.ensureIsolate(e);a.index=e.$eval(o.faIndex),e.$watch(function(){return e.$eval(o.faIndex)},function(){a.index=e.$eval(o.faIndex),a.updateMethod&&a.updateMethod()})}}}}}]),angular.module("famous.angular").directive("faModifier",["$famous","$famousDecorator","$parse","$rootScope",function(e,r,n,o){return{template:"<div></div>",transclude:!0,restrict:"EA",priority:2,scope:!0,compile:function(a,t,i){return{post:function(a,t,u){function s(e){return e.replace(m,function(e,r,n,o){return o?n.toUpperCase():n}).replace(v,"Moz$1")}function c(e){return s(e.replace(g,""))}var f=r.ensureIsolate(a),l=e["famous/core/RenderNode"],d=e["famous/core/Modifier"],p=e["famous/core/Transform"],m=/([\:\-\_]+(.))/g,v=/^moz([A-Z])/,g=/^(x[\:\-_]|data[\:\-_])/i,h=["aboutOrigin","perspective","rotate","rotateAxis","rotateX","rotateY","rotateZ","scale","skew","translate"];u.$observe("faTransformOrder",function(){var e=a.$eval(u.faTransformOrder);void 0!==e&&(h=e)});var $={};angular.forEach(h,function(e){var r=c("fa-"+e);u.$observe(r,function(){$[e]=n(u[r])})});var y=angular.noop;u.$observe("faTransform",function(){y=n(u.faTransform)}),f.getTransform=function(){var e=y(a);if(void 0!==e)return e instanceof Function?e():e instanceof Object&&void 0!==e.get?e.get():e;var r=[];return angular.forEach(h,function(e){var n=$[e]?$[e](a):void 0;void 0!==n&&(n instanceof Function&&(n=n()),r.push(n instanceof Array?p[e].apply(this,n):p[e].call(this,n)))}),r.length?1===r.length?r[0]:p.multiply.apply(this,r):void 0};var w=angular.noop;u.$observe("faAlign",function(){w=n(u.faAlign)}),f.getAlign=function(){var e=w(a);return e instanceof Function?e():e instanceof Object&&void 0!==e.get?e.get():e};var N=angular.noop;u.$observe("faOpacity",function(){N=n(u.faOpacity)}),f.getOpacity=function(){var e=N(a);return void 0===e?1:e instanceof Function?e():e instanceof Object&&void 0!==e.get?e.get():e};var S=angular.noop;u.$observe("faSize",function(){S=n(u.faSize)}),f.getSize=function(){var e=S(a);return e instanceof Function?e():e instanceof Object&&void 0!==e.get?e.get():e};var E=angular.noop;u.$observe("faOrigin",function(){E=n(u.faOrigin)}),f.getOrigin=function(){var e=E(a);return e instanceof Function?e():e instanceof Object&&void 0!==e.get?e.get():e},f.modifier=new d({transform:f.getTransform,size:f.getSize,opacity:f.getOpacity,origin:f.getOrigin,align:f.getAlign}),f.renderNode=(new l).add(f.modifier),r.sequenceWith(a,function(e){f.renderNode.add(e.renderNode)}),i(a,function(e){t.find("div").append(e)}),r.registerChild(a,t,f,function(){f.modifier.setOpacity(0)}),a.$$phase||o.$$phase||a.$apply()}}}}}]),angular.module("famous.angular").directive("faPipeFrom",["$famous","$famousDecorator","$famousPipe",function(e,r,n){return{restrict:"A",scope:!1,priority:16,compile:function(){var o=e["famous/core/Engine"];return{post:function(e,a,t){var i=r.ensureIsolate(e);e.$watch(function(){return e.$eval(t.faPipeFrom)},function(e,r){var a=i.renderNode||o;n.unpipesFromTargets(a,r),n.pipesToTargets(a,e)}),e.$on("$destroy",function(){n.unpipesFromTargets(i.renderNode||o,e.$eval(t.faPipeFrom))})}}}}}]),angular.module("famous.angular").directive("faPipeTo",["$famous","$famousDecorator","$famousPipe",function(e,r,n){return{restrict:"A",scope:!1,priority:16,compile:function(){var o=e["famous/core/Engine"];return{post:function(e,a,t){var i=r.ensureIsolate(e);e.$watch(function(){return e.$eval(t.faPipeTo)},function(e,r){var a=i.renderNode||o;n.unpipesFromTargets(r,a),n.pipesToTargets(e,a)}),e.$on("$destroy",function(){n.unpipesFromTargets(e.$eval(t.faPipeTo),i.renderNode||o)})}}}}}]),angular.module("famous.angular").directive("faRenderNode",["$famous","$famousDecorator",function(e,r){return{template:"<div></div>",transclude:!0,scope:!0,restrict:"EA",compile:function(n,o,a){return{pre:function(n,o,a){var t=r.ensureIsolate(n),i=e["famous/core/Engine"];t.children=[],a.$observe("faPipeTo",function(e){var r=n.$eval(e);r&&i.pipe(r)}),t.renderNode=n.$eval(a.faNode),r.sequenceWith(n,function(e){t.renderNode.add(e.renderNode),t.children.push(e)})},post:function(e,n){var o=r.ensureIsolate(e);a(e,function(e){n.find("div").append(e)}),r.registerChild(e,n,o)}}}}}]),angular.module("famous.angular").directive("faScrollView",["$famous","$famousDecorator",function(e,r){return{template:"<div></div>",restrict:"E",transclude:!0,scope:!0,compile:function(n,o,a){return{pre:function(n,o,a){var t=r.ensureIsolate(n),i=e["famous/views/Scrollview"],u=e["famous/core/ViewSequence"],s=(e["famous/core/Surface"],[]),c=n.$eval(a.faOptions)||{};t.renderNode=new i(c);var f=function(e){n.$$postDigest(function(){s.sort(function(e,r){return e.index-r.index});var r={array:function(e){var r=[];return angular.forEach(e,function(e,n){r[n]=e.renderNode}),r}(s)};e&&(r.index=n.$eval(a.faStartIndex));var o=new u(r);t.renderNode.sequenceFrom(o)})};r.sequenceWith(n,function(e){s.push(e),f(!0)},function(e){s=function(r){var n=[];return angular.forEach(r,function(r){r.id!==e&&n.push(r)}),n}(s),f()},f)},post:function(e,n){var o=r.ensureIsolate(e);a(e,function(e){n.find("div").append(e)}),r.registerChild(e,n,o)}}}}}]),angular.module("famous.angular").directive("faSequentialLayout",["$famous","$famousDecorator",function(e,r){return{template:"<div></div>",restrict:"E",transclude:!0,scope:!0,compile:function(n,o,a){return window.$f=e,{pre:function(n,o,a){var t=r.ensureIsolate(n),i=e["famous/views/SequentialLayout"],u=[],s=n.$eval(a.faOptions)||{};t.renderNode=new i(s);var c=function(){u.sort(function(e,r){return e.index-r.index}),t.renderNode.sequenceFrom(function(e){var r=[];return angular.forEach(e,function(e,n){r[n]=e.renderNode}),r}(u))};r.sequenceWith(n,function(e){u.push(e),c()},function(e){u=function(r){var n=[];return angular.forEach(r,function(r){r.id!==e&&n.push(r)}),n}(u),c()})},post:function(e,n){var o=r.ensureIsolate(e);a(e,function(e){n.find("div").append(e)}),r.registerChild(e,n,o)}}}}}]),angular.module("famous.angular").directive("faSurface",["$famous","$famousDecorator","$interpolate","$controller","$compile",function(e,r){return{scope:!0,transclude:!0,template:'<div class="fa-surface"></div>',restrict:"EA",compile:function(n,o,a){return{pre:function(n,o,a){{var t=r.ensureIsolate(n),i=e["famous/core/Surface"];e["famous/core/Transform"],e["famous/core/EventHandler"]}n.$watch(function(){return t.getProperties()},function(){t.renderNode&&t.renderNode.setProperties(t.getProperties())},!0);var u=function(e){return"fa"+e.charAt(0).toUpperCase()+e.slice(1)};t.getProperties=function(){for(var e=n.$eval(a.faProperties)||{},r=["backgroundColor","margin","padding","color","pointerEvents","zIndex"],o=0;o<r.length;o++){var t=r[o],i=u(t);a[i]&&(e[t]=n.$eval(a[i]))}return e},t.renderNode=new i({size:n.$eval(a.faSize),properties:t.getProperties()}),a.class&&t.renderNode.setClasses(a["class"].split(" "))},post:function(e,n){var o=r.ensureIsolate(e),t=function(){o.renderNode.setContent(n[0].querySelector("div.fa-surface"))};t(),a(e,function(e){angular.element(n[0].querySelectorAll("div.fa-surface")).append(e)}),r.registerChild(e,n,o,function(){})}}}}}]),angular.module("famous.angular").directive("faTap",["$parse","$famousDecorator",function(e,r){return{restrict:"A",compile:function(){return{post:function(n,o,a){var t=r.ensureIsolate(n);if(a.faTap){var i=t.renderNode._eventInput||t.renderNode,u=!1;i.on("touchmove",function(e){return u=!0,e}),i.on("touchend",function(r){if(!u){var o=e(a.faTap);o(n,{$event:r}),n.$$phase||n.$apply()}u=!1})}}}}}}]),angular.module("famous.angular").directive("faTouchend",["$parse","$famousDecorator",function(e,r){return{restrict:"A",scope:!1,compile:function(){return{post:function(n,o,a){var t=r.ensureIsolate(n);if(a.faTouchend){var i=t.renderNode._eventInput||t.renderNode;i.on("touchend",function(r){var o=e(a.faTouchend);o(n,{$event:r}),n.$$phase||n.$apply()})}}}}}}]),angular.module("famous.angular").directive("faTouchmove",["$parse","$famousDecorator",function(e,r){return{restrict:"A",scope:!1,compile:function(){return{post:function(n,o,a){var t=r.ensureIsolate(n);if(a.faTouchmove){var i=t.renderNode._eventInput||t.renderNode;i.on("touchmove",function(r){var o=e(a.faTouchmove);o(n,{$event:r}),n.$$phase||n.$apply()})}}}}}}]),angular.module("famous.angular").directive("faTouchstart",["$parse","$famousDecorator",function(e,r){return{restrict:"A",scope:!1,compile:function(){return{post:function(n,o,a){var t=r.ensureIsolate(n);if(a.faTouchstart){var i=t.renderNode._eventInput||t.renderNode;i.on("touchstart",function(r){var o=e(a.faTouchstart);o(n,{$event:r}),n.$$phase||n.$apply()})}}}}}}]),angular.module("famous.angular").directive("faView",["$famous","$famousDecorator",function(e,r){return{template:"<div></div>",transclude:!0,scope:!0,restrict:"EA",compile:function(n,o,a){var t=e["famous/core/View"];return{pre:function(e,n,o){var a=r.ensureIsolate(e);a.children=[];a.renderNode=new t({size:e.$eval(o.faSize)||[void 0,void 0]}),r.sequenceWith(e,function(e){a.renderNode.add(e.renderNode),a.children.push(e)})},post:function(e,n){var o=r.ensureIsolate(e);a(e,function(e){n.find("div").append(e)}),r.registerChild(e,n,o)}}}}}]);
\ No newline at end of file
diff --git a/src/scripts/directives/fa-canvas-surface.js b/src/scripts/directives/fa-canvas-surface.js
new file mode 100644
index 00000000..ec26d325
--- /dev/null
+++ b/src/scripts/directives/fa-canvas-surface.js
@@ -0,0 +1,76 @@
+/**
+ * @ngdoc directive
+ * @name faCanvasSurface
+ * @module famous.angular
+ * @restrict EA
+ * @param {String} faSize  -  Array that passes width and height to the canvas
+ * @description
+ * This directive creates a Famo.us CanvasSurface.
+ * @usage
+ * ```html
+ * <fa-canvas-surface fa-size="[400,400]">
+ * </fa-canvas-surface>
+ * ```
+ @example
+ * To use `fa-canvas-surface`, declare an `fa-size` attribute with an array containing width and height.
+ * ```html
+ * <fa-canvas-surface
+ *            fa-size="[400,400]"
+ *            class="main-canvas"
+ *            >
+ * </fa-canvas-surface>
+ * ```
+ * `Fa-canvas-surface` accepts classes and faSize, the only two attributes HTML5 canvas requires is width and height.
+ */
+angular.module('famous.angular')
+  .directive('faCanvasSurface', ['$famous', '$famousDecorator', function ($famous, $famousDecorator) {
+    return {
+      scope: true,
+      transclude: true,
+      template: '<canvas class="fa-canvas-surface"></canvas>',
+      restrict: 'EA',
+      compile: function(tElem, tAttrs, transclude){
+        return {
+          pre: function(scope, element, attrs){
+            var isolate = $famousDecorator.ensureIsolate(scope);
+
+            var CanvasSurface = $famous['famous/surfaces/CanvasSurface'];
+            var Transform = $famous['famous/core/Transform'];
+            var EventHandler = $famous['famous/core/EventHandler'];
+
+            isolate.renderNode = new CanvasSurface({
+              size: scope.$eval(attrs.faSize)
+            });
+
+            if (attrs.class) {
+              isolate.renderNode.setClasses(attrs['class'].split(' '));
+            }
+          },
+          post: function(scope, element, attrs){
+            var isolate = $famousDecorator.ensureIsolate(scope);
+
+            var updateContent = function() {
+	            isolate.renderNode.setContent(element[0].querySelector('canvas.fa-canvas-surface'));
+            };
+
+            updateContent();
+
+            //boilerplate
+            transclude(scope, function(clone) {
+              angular.element(element[0].querySelectorAll('canvas.fa-canvas-surface')).append(clone);
+            });
+
+            //TODO:  on this and all other render-node-wrapping fa-directives,
+            //       expose an actual RenderNode in isolate.renderNode and
+            //       use that RenderNode's .set() function to add/remove content
+            //       from the scene graph.  This will probably be instead of
+            //       using RenderControllers.
+            $famousDecorator.registerChild(scope, element, isolate, function() {
+              // TODO: hook into RenderController and hide this render node
+            });
+                     
+          }
+        };
+      }
+    };
+  }]);