feat: update draggable example to show more complexity

Author: zackbrown

app/scripts/controllers/draggable.js

@@ -3,5 +3,17 @@
 angular.module('integrationApp')
   .controller('DraggableCtrl', function ($scope, $famous) {
     var EventHandler = $famous['famous/core/EventHandler'];
-    $scope.handler = new EventHandler();
+
+    var data = [];
+    data.push( {id: 0, name: 'zero', position: [10, 100], handler: new EventHandler() } );
+    data.push( {id: 1, name: 'one',  position: [10, 200], handler: new EventHandler() } );
+    data.push( {id: 2, name: 'two',  position: [10, 300], handler: new EventHandler() } );
+
+    $scope.nodes = data;
+    console.log($scope.nodes);
+
+    $scope.remove = function() {
+      $scope.nodes.splice(0, 1);
+      console.log($scope.nodes);
+    }
   });

app/views/draggable.html

@@ -1,5 +1,16 @@
-  <fa-app style="width: 320px; height: 568px; overflow: hidden;">
-    <fa-draggable fa-pipe-from="handler">
-      <fa-surface fa-background-color="'red'" fa-size="[200, 200]" fa-pipe-to="handler"></fa-surface>
-    </fa-draggable>          
-  </fa-app>
+<fa-app style="width: 320px; height: 568px; overflow: hidden;">
+    <fa-modifier ng-repeat="node in nodes"  fa-translate="[10,500]" fa-size="[80, 40]">
+        <fa-surface>
+          <button ng-click="remove()">Remove one</button>
+      </fa-surface>
+    </fa-modifier>
+
+  <fa-modifier ng-repeat="node in nodes"  fa-translate="node.position" fa-size="[80, 40]">
+    <fa-draggable fa-pipe-from="node.handler">
+      <fa-surface fa-background-color="'red'" fa-size="[undefined, undefined]" fa-pipe-to="node.handler">
+        {{node.id}}: {{node.name}}
+      </fa-surface>
+    </fa-draggable>
+  </fa-modifier>
+
+</fa-app>