title: Dynamic data-binding in AngularJS
body: <p>I'm building an AngularJS app and I have ran into an issue. I have been playing with the framework for a while and I have yet to see documentation for something like this or any examples. I'm not sure which path to go down, Directive, Module, or something that I haven't heard of yet...</p>
  
  <p><strong>Problem:</strong></p>
  
  <p>Basically my app allows the user to add objects, we will say spans for this example, that have certain attribute's that are editable: height and an associated label. Rather than every span have its own dedicated input fields for height and label manipulation I would like to use one set of input fields that are able to control all iterations of our span object.</p>
  
  <p>So my approx. working code is something like this:</p>
  
  <pre><code>&lt;span ng-repeat="widget in chart.object"&gt;
      &lt;label&gt;{{widget.label}}&lt;/label&gt;
      &lt;span id="obj-js" class="obj" style="height:{{widget.amt}}px"&gt;&lt;/span&gt;
  &lt;/span&gt;
  &lt;button ng-click="addObject()" class="add"&gt;ADD&lt;/button&gt;
  
  &lt;input type="text" class="builder-input" ng-model="chart.object[0]['label']"/&gt;
  &lt;input type="range" class="slider" ng-model="chart.object[0]['amt']"/&gt;
  </code></pre>
  
  <p>The above code will let users add new objects, but the UI is obviously hardcoded to the first object in the array. </p>
  
  <p><strong>Desired Functionality:</strong></p>
  
  <p>When a user clicks on an object it updates the value of the input's ng-model to bind to the object clicked. So if "object_2" is clicked the input's ng-model updates to sync with the object_2's value.  If the user clicks on "object_4" it updates the input's ng-model, you get the idea. Smart UI, essentially. </p>
  
  <p>I've thought about writing a directive attribute called "sync" that could push the ng-model status to the bound UI. I've though about completely creating a new tag called <code>&lt;object&gt;</code> and construct these in the controller. And I've thought about using <code>ng-click="someFn()"</code> that updates the input fields. All of these are 'possibilities' that have their own pros and cons, but I thought before I either spin out on something or go down the wrong road I would ask the community.</p>
  
  <p>Has anyone done this before (if so, examples)? If not, what would be the cleanest, AngularJS way to perform this? Cheers.</p>