title: AngularJS Two-way Data Binding in Nested Directives
body: <p>Please let me know if you need more information or want me to clarify anything. I have tried a lot of different things to figure this out but haven't found a solution.</p>
  
  <p>I'm relatively new to angularJS and I am trying to build an app with several layers of data.  I have some basic user information stored in the scope of the body on controller PageController. I then have a settings form that loads in using $routeParams (with controller SettingsController) that includes a couple of custom directives for templating purposes. Since the directives are nested, I am using transclusion to load the second one inside of the first. This all seems to be working alright.</p>
  
  <p>My problem is that I am trying to reference the field <code>user.firstname</code> from within the innermost directive and want to use two-way databinding to allow changes made to the textbox to cause the value at the PageController scope to change as well. I know that a lot of these kinds of problems are caused by using primitives in ng-model, but I have tried putting everything within an extra object so that I trigger prototypal inheritance to no avail. What am I doing wrong here?</p>
  
  <p>Here's a <a href="http://jsfiddle.net/CxNc2/">JSFiddle</a> of my code, stripped down as much as possible to isolate the problem. In this example, if I type in the outside textbox, which is directly on the PageController scope, it will modify the inner textbox until that textbox is modified, upon which the connection is broken. This seems just like the problem of using primitives as described in other questions, but I can't figure out where the issue is here.</p>
  
  <p><em>HTML:</em></p>
  
  <pre><code>&lt;body class="event-listing" ng-app="app" ng-controller="PageController"&gt;
      &lt;div class="listing-event-wrap"&gt;
          &lt;input type="text" ng-model="user.firstname" /&gt;
          &lt;div ng-controller="SettingsController"&gt;
              &lt;section block title="{{data.updateInfo.title}}" description="{{data.updateInfo.description}}"&gt;
                  &lt;div formrow label="{{data.updateInfo.labels.firstname}}" type="textInput" value="user.firstname"&gt;&lt;/div&gt;
              &lt;/section&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p><em>Angular Directives:</em></p>
  
  <pre><code>app.directive('formrow', function() {
  return {
      scope: {
              label: "@label",
              type: "@type",
              value: "=value" 
      },
      replace: true,
      template: '&lt;div class="form-row"&gt;' + 
              '&lt;div class="form-label" data-ng-show="label"&gt;{{label}}&lt;/div&gt;' + 
              '&lt;div class="form-entry" ng-switch on="type"&gt;' + 
                  '&lt;input type="text" ng-model="value" data-ng-switch-when="textInput" /&gt;' + 
              '&lt;/div&gt;' + 
          '&lt;/div&gt;'
  }
  });
  app.directive('block', function() {
  return {
      scope: {
              title: "@title",
              description: "@description" 
      },
      transclude: true,
      replace: true,
      template: '&lt;div class="page-block"&gt;' +
              '&lt;h2 data-ng-show="title"&gt;{{title}}&lt;/h2&gt;' + 
              '&lt;p class="form-description" data-ng-show="description"&gt;{{description}}&lt;/p&gt;' + 
              '&lt;div class="block-inside" data-ng-transclude&gt;&lt;/div&gt;' + 
              '&lt;/div&gt;'
  }
  });
  </code></pre>
  
  <p><em>Angular Controllers:</em></p>
  
  <pre><code>app.controller("PageController", function($scope) {
      $scope.user = {
          firstname: "John"
      };
  });
  app.controller("SettingsController", function($scope) {
      $scope.data = {
          updateInfo: {
              title: "Update Your Information",
              description: "A description here",
              labels: {
                  firstname: "First Name"
              }
          }
      }
  });
  </code></pre>