title: AngularJS ng-repeat list built dynamically,$index is always zero
body: <p>I'm using AngularJS ng-repeat to create a list of cities.  The list is being built dynamically client-side by the user.  The user selects city from a list on the left side of the page, clicks the "Add City" button, and the city is added to a list on the right.  The ng-repeat is in both lists, but when a city is added to the list on the right, the $index value for the list items does not update.  The $index values are all zero.</p>
  
  <p>Here's the ng-repeat list where the cities are added dynamically:</p>
  
  <pre><code>&lt;div ng-repeat="(key, value) in filter.selectedCities | groupBy:'country'" class="text-left"&gt;
      &lt;div ng-repeat="(key2, value2) in value | groupBy:'state'" class="text-left"&gt;
          &lt;span class="label label-default"&gt;{{key}}   &lt;/span&gt;&amp;nbsp;&lt;span class="label label-danger" ng-show="key2.length"&gt;{{key2}}    &lt;/span&gt;
          &lt;ul class="nav nav-pills"&gt;
              &lt;li class="selectedpill" ng-repeat="city in value2"&gt;
                  &lt;div class="pull-left"&gt;
                      &lt;span class="indent8"&gt;{{ city.label | characters:24 :true}}&lt;/span&gt;
                  &lt;/div&gt;
                  &lt;div class="pull-right"&gt;
                      &lt;i class="fa fa-heart pointer" ng-click="addToCityFavs($index);" ng-class="{'maroonzheimer' : checkFavCity(city)}" ng-hide="savingCityFav" title="Add To Favorites"&gt;&lt;/i&gt;
                      &lt;i class="fa fa-spinner fa-spin" ng-show="savingCityFav"&gt;&lt;/i&gt;
                      &lt;i class="fa fa-times fa-lg pointer" ng-click="removeCity(city)" title="Remove City"&gt;&lt;/i&gt;
                  &lt;/div&gt;
              &lt;/li&gt;
          &lt;/ul&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Here are the JavaScript functions used to add a city dynamically to the list:</p>
  
  <pre><code>  $scope.addSelectedCity = function () {
      if ($scope.selectedCity &amp;&amp; $scope.selectedCity.value) {
        $scope.addCity($scope.selectedCity);
        $scope.cityValidationError = false;
  
      } else { $scope.cityValidationError = true; }
      $scope.tempSelectedCity = null;
      $scope.selectedCity = null;
    }
  
    $scope.addCity = function (city) {
      if (city &amp;&amp; city.city &amp;&amp; !$scope.checkCityExists(city)) {
        $scope.filter.selectedCities.push(city);
      }    
    }
  
  $scope.addToCityFavs = function (index) {
    var city = $scope.filter.selectedCities[index];
    var exists = false;
  
    for (var i = 0; i &lt; $scope.filter.favs.CityList.length; i++) {
      if ($scope.filter.favs.CityList[i].city.value == city.value) {
        exists = true;
      }
    }
  
   if (!exists) {
     $scope.savingCityFav = true;
     var fav = { id: 0, active: true, ruser_id: 0, city: city }; 
  </code></pre>
  
  <p>Do I need to add something to the HTML or JavaScript functions to get the ng-repeat list to update the $index value after a city has been added to the list?</p>
  
  <p>I'll appreciate any help anyone can give.</p>