This directive will create a Famo.us Flipper containing the specified front and back elements. The provided options object will pass directly through to the Famo.us Flipper's constructor. See [/docs/views/Flipper]



<fa-flipper fa-options="scopeOptionsObject">
  <!-- two render nodes -->


A Famous Flipper has a .flip() method that toggles a rotation between front and back sides. In the example below, when an fa-surface is clicked, it calls the function flipIt.

This function attempts a DOM lookup for an isolate of an fa-flipper element, and calls the .flip() function of fa-flipper.

  Edit in Plunker
<fa-app ng-controller="FlipperCtrl">
    <fa-modifier fa-size="[200, 200]">
      <fa-surface fa-background-color="'yellow'" fa-click="flipIt()">Click me to see me flip!</fa-surface>
    <fa-modifier fa-size="[200, 200]">
      <fa-surface fa-background-color="'red'" fa-click="flipIt()">Flip me again!</fa-surface>
fa-app {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
div {
  cursor: pointer;
  padding: 8px 8px;
angular.module('faFlipperExampleApp', ['famous.angular'])
  .controller('FlipperCtrl', ['$scope', '$famous', function($scope, $famous) {
    $scope.flipIt = function() {