title: Angular - two-way binding through an ng-switch
body: <p>I have a directive with scope and a two-way '=' binding to a parent-scope value (yes, inside an object to avoid inheritance problems.) The directive's template in turn contains an ng-switch, which of course creates another scope. Inside the ng-switch I want to have a textarea bound to the original value. It gets initialized correctly, but when the user edits the value, the parent scope value doesn't change. </p>
  
  <pre><code>var myApp = angular.module('myApp', []);
  
  myApp.directive('csContenteditable', function () {
      return {
          restrict: 'A',
          scope: {
              content: "=",
              editMode: "=csContenteditable",
          },
          template: 
              "&lt;div ng-switch='editMode'&gt;" +
                  "&lt;div ng-switch-when='false'&gt;{{content}}&lt;/div&gt;" +
                  "&lt;div ng-switch-when='true'&gt;&lt;textarea ng-model='content'/&gt;&lt;div&gt;" +
              "&lt;div&gt;"
  
      };
  });
  
  
  function MyCtrl($scope) {
      $scope.editMode = false;
      $scope.values = {value: 'foo'}
  }
  </code></pre>
  
  <p>What is the right way to do this? I can use ng-show instead of ng-switch and it works, b/c there is no extra scope but makes my DOM a lot heavier than necessary in my actual real-world case.</p>
  
  <p>Demo: <a href="http://jsfiddle.net/LF5UL/" rel="nofollow">http://jsfiddle.net/LF5UL/</a></p>
  
  <ul>
  <li>Click the "edit mode" checkbox </li>
  <li>Note the textarea is initialized with "foo"  </li>
  <li>Now type in the textarea.  </li>
  <li>Note the "Current value" in the outer scope doesn't update.</li>
  </ul>