title: Two way data binding in AngularJS Directives
body: <p>I have been trying to define directives so I can display different "widgets" in a form, depending on the type of field and its parameters, which are stored in a database. I need to react to different types of scenarios, hence the need for directives to handle layout.</p>
  
  <p>While playing with a few examples, I came up with a code that *kinda* works:</p>
  
  <h2>HTML</h2>
  
  <pre><code>&lt;input type="text" ng-model="myModel" style="width: 90%"/&gt;  
  &lt;div class="zippy" zippy-title="myModel"&gt;&lt;/div&gt;
  </code></pre>
  
  <h2>Directive</h2>
  
  <pre><code>myApp.directive('zippy', function(){
      return {
        restrict: 'C',
        // This HTML will replace the zippy directive.
        transclude: true,
        scope: { title:'=zippyTitle' },
        template: '&lt;input type="text" value="{{title}}"style="width: 90%"/&gt;',
        // The linking function will add behavior to the template
        link: function(scope, element, attrs) {
              // Title element
              element.bind('blur keyup change', function() {
                  scope.$apply(read);
              });
  
              var input = element.children();
  
  
              function read() {
                  scope.title = input.val();
              }
          }
      }
  });
  </code></pre>
  
  <p>This seems to works (albeit noticeably slower than a *proper* angularJS variable binding) but I figure there must be a better way to do this. Can anyone shed some light on the matter?</p>