title: Angular JS + Kinetic = dynamic chart on canvas
body: <p>here is the fiddle:
  <a href="http://jsfiddle.net/paska27/L6VAe/5/" rel="nofollow">http://jsfiddle.net/paska27/L6VAe/5/</a></p>
  
  <p>the code (so complains otherwise):</p>
  
  <pre><code>&lt;div ng-app ng-controller="MainCtrl"
  ng-init="list = [
  {name: 'Sergey', age: 26},
  {name: 'Johan', age: 27},
  {name: 'Iwan', age: 28}
  ];"&gt;
      &lt;div id="box" ng-controller="PlaneCtrl"&gt;&lt;/div&gt;       
      &lt;input ng-model="currentItem.name" /&gt;
  &lt;/div&gt;
  
  /** an extention of Kinetic shape (group, rect or what ever) **/
  var Item = function(planeScope, item){
  Kinetic.Group.call(this, {
      draggable: true
  });
  
  var self = this;
  
  var text = new Kinetic.Text({
      x: 0,
      y: 0,
      text: item.name,
      fontSize: 20,
      fontFamily: 'Calibri',
      textFill: 'green',
      draggable: true
  });
  
  self.add(text);
  
  self.name = text.getText();
  
  self.on('dragstart', function(){
     planeScope.$parent.currentItem = self;
     planeScope.$apply();       
  });
  }
  Kinetic.Global.extend(Item, Kinetic.Group);
  
  var MainCtrl = function($scope){
      $scope.currentItem;
  }
  
  var PlaneCtrl = function($scope, $element){
      var stage = new Kinetic.Stage({
      container: 'box',
      width: 200,
      height: 200
  }),
  layer = new Kinetic.Layer();
  
  angular.forEach($scope.list, function(item){
      item = new Item($scope, item);
      layer.add(item);
  });
  
  stage.add(layer);   
  }
  </code></pre>
  
  <p>The task:</p>
  
  <ul>
  <li>i need to build some kind of a chart with items on it (just items, to
  keep it simple here)</li>
  <li>items could be any shape in the future (actually a Kinetic.Group of
  shapes)</li>
  <li>that's why i need a canvas</li>
  <li>items/shapes  need to be highly dynamic in the sense of updating any
  properties (text and x/y coords for now)</li>
  <li>that's why i need some so called MVVM framework</li>
  </ul>
  
  <p>The question in general: how to build all this ?</p>
  
  <p>The particular stuck in the realization i chose:
  how to make a veiw --> model values update.
  or in terms of the the libs in question:
  how to update shapes properties (e.g. text of the Kinetic.Text obj)
  from the ng-model directive ?</p>
  
  <p>Many thanks in advance !</p>