title: ng-model is not getting updated on selection change in select
body: <p>Hi I am new to angular so still struggling with basic things, here is a problem that I am facing. I have a few html elements that repeat with ng-repeat. One of the controls in it is a  dropdown.
  I have attached ng-model with this .However on selection change the model is not getting updated.Not sure what the problem is. Pasting below the code.</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>    &lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head lang="en"&gt;
      &lt;meta charset="UTF-8"&gt;
      &lt;title&gt;&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;h1&gt;Compare Tickers&lt;/h1&gt;
      &lt;hr/&gt;
      &lt;div ng-controller="MainCtrl"&gt;
  &lt;!--        &lt;p&gt;The ID is {{greeting.id}}&lt;/p&gt;
          &lt;p&gt;The content is {{greeting.content}}&lt;/p&gt;--&gt;
              &lt;ul&gt;
                  &lt;li id="control{{$index}}" ng-repeat="oneTickerInfo in tickerInfo"&gt;
                      Ticker Info : &lt;input type="text"&gt;
                      &lt;select  ng-model="selectedCache" ng-options="cache for cache in caches" ng-change="handleCacheSelectionChange()"&gt;&lt;/select&gt;
                      &lt;select ng-click="handleHostSelectEvent()" ng-init="selectedBox = boxes[0]" ng-model="selectedBox"  ng-options="box.box for box in boxes"&gt;&lt;/select&gt;
                      [&lt;a href ng-click="tickerInfo.splice($index, 1)"&gt;X&lt;/a&gt;]
                  &lt;/li&gt;
                  &lt;li&gt;
                      [&lt;a href ng-click="tickerInfo.push({})"&gt;add&lt;/a&gt;]
                  &lt;/li&gt;
              &lt;/ul&gt;
              &lt;hr/&gt;
      &lt;div ui-view&gt;&lt;/div&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><strong>JAVASCRIPT</strong></p>
  
  <pre><code> 'use strict';
  
  var app = angular.module('qaweb3App');
  
    app.controller('MainCtrl', function Hello($scope, $http) {
  
  
        $scope.tickerInfo = [
            {id:'1', cache:'adx',host:'tpa27'},
            {id:'1', cache:'asx',host:'tpa27'}
        ];
  
        $scope.caches = [];
  
        function process_response( data ) {
            var jsonArrayLen = data.length;
            for( var index=0; index &lt; jsonArrayLen; index ++ ) {
                $scope.caches.push( data[index].cache.id);
            }
            /*$scope.selectedCache = $scope.caches[0];*/
            console.log( $scope.caches.toString() );
        }
  
        $http({method: 'JSONP', url: 'http://unixdeva10.factset.com:9643/jsonprouter?callback=JSON_CALLBACK&amp;key=caches.json'}).
            success(function(data, status, headers, config) {
                process_response(data);
            }).
            error(function(data, status, headers, config) {
                alert("Failed");
            });
  
         $scope.getHosts = function() {
            console.log("You clicked box");
        };
  
        $scope.handleCacheSelectionChange=function() {
            console.log("Selection has changed");
            console.log( " You have chosen selection " + $scope.selectedCache );
        }
  
    });
  </code></pre>
  
  <p>The selection always stays the first element inspite of the selection change.</p>
  
  <p><strong>HTML Source</strong></p>
  
  <pre><code>&lt;select ng-model="selectedCache" ng-options="cache for cache in caches" ng-
  change="handleCacheSelectionChange()" class="ng-valid ng-dirty"&gt;
  &lt;option value="0" selected="selected"&gt;adx&lt;/option&gt;
  </code></pre>
  
  <p>Inside the handleCacheSelectionChange function the value of $scope.selectedCache is undefined.</p>
  
  <p><strong>EDIT 1</strong></p>
  
  <p>As per your suggestions I have tried the following:</p>
  
  <p><em>Javascript:</em></p>
  
  <p>$scope.tickerInfo = [
        "selectedCache1",
        "selectedCache2"
       ];</p>
  
  <p>$scope.handleCacheSelectionChange=function(index) {
        console.log( " You have chosen selection " + index );</p>
  
  <p>}</p>
  
  <p><em>HTML</em></p>
  
  <pre><code> &lt;select  ng-model="$parent.tickerInfo[$index]" ng-options="cache.cacheName for cache in caches" ng-change="handleCacheSelectionChange($index)"&gt;&lt;/select&gt; 
  </code></pre>
  
  <p>Until now everything works fine.
   Now I have a href which is outside the ng-repeat, so to dynamically update tickerInfo with another entry we need the last index of the inner scope. I am not able to bind the local scope $index to the global scope $scope.currentIndex</p>
  
  <pre><code>[&lt;a href ng-click="handleAddEvent($index)"&gt;add&lt;/a&gt;]
  </code></pre>
  
  <p>Can some one give me some hints. Thanks in advance!</p>