title: Scoping issue when adding multiple instances of views using ng-repeat
body: <p>I'm hitting a scoping issue when using the ng-repeat functionality of AngularJS.</p>
  
  <p>please see the <a href="http://plnkr.co/edit/PgZwstgDxJWdA7LvU3A4" rel="nofollow">plnkr</a></p>
  
  <p>I have an array of objects 'boxCollection' and a list of items 'itemCollection' which I display in a drop down.</p>
  
  <pre><code>   $scope.boxCollection = [];
  
     $scope.itemCollection = 
        [
          {name: 'item1'},
          {name: 'item2'},
          {name: 'item3'}
        ];
  </code></pre>
  
  <p>Now I have my view as </p>
  
  <pre><code>&lt;script type="text/ng-template" id="addBox.html"&gt;
        &lt;div class="box-controls"&gt;
          &lt;span class="glyphicon glyphicon-plus pull-left" ng-click="addBox()"&gt;&lt;/span&gt;
          &lt;span class="glyphicon glyphicon-minus pull-left" ng-class="{disable_div:boxCollection.length &lt; 2} " ng-click="removeBox($index)"&gt;&lt;/span&gt;
        &lt;/div&gt;
  
        &lt;div class="box-container"&gt;
          &lt;div class="box-details"&gt;
  
            &lt;div class="boxItem"&gt;
              &lt;form class="form-horizontal"&gt;
                &lt;div class="form-group"&gt;
                  &lt;label class="control-label col-md-3"&gt;Item&lt;/label&gt;
                  &lt;div class="col-md-8"&gt;
                    &lt;select class="form-control" ng-options="item.name for item in itemCollection" ng-model="boxCollection[$index].item" ng-disabled="false"&gt;
                      &lt;option value=""&gt; None &lt;/option&gt;
                    &lt;/select&gt;
                  &lt;/div&gt;
                &lt;/div&gt;
  
                &lt;div class=" form-group "&gt;
                  &lt;label class="control-label col-md-3"&gt;Item Desc&lt;/label&gt;
                  &lt;div class="col-md-8"&gt;
                    &lt;input type="text " class="form-control " ng-model="boxCollection[$index].item.desc "&gt;
                  &lt;/div&gt;
                &lt;/div&gt;
              &lt;/form&gt;
            &lt;/div&gt;
  
          &lt;/div&gt;
          &lt;div class="clearfix "&gt;&lt;/div&gt;
        &lt;/div&gt;
      &lt;/script&gt;
  </code></pre>
  
  <p>The view is wrapped in a script tag with an id and is called with an ng-repeat.</p>
  
  <p>I have one function to add a box element into my view 'addBox()'. It generates one entry in 'boxCollection' array and another entry in 'boxTmplList' array. 'boxTmplList' is responsible for showing the views.</p>
  
  <p>Now if you select let's say 'item1' from the drop down in box1 and add a value in the input field, add another box in the view using the '+' button and select 'item1' again in the another instance. It displays the value of input field 1 in the input field 2.</p>
  
  <p><a href="http://i.stack.imgur.com/zI1Ii.png" rel="nofollow">enter image description here</a></p>
  
  <p>On further analysis I found that Angular tracks the objects with similar 'item' name using the same $hashkey.</p>
  
  <p>I'm using a workaround by adding another property to the object 'boxCollection[$index].itemDesc' instead of 'boxCollection[$index].item.desc' and then later on modify the object using another function, but I feel that's not the most efficient way.</p>
  
  <p>Any insight on this would be greatly appreciated.</p>