scope

why variable works different

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
<div ng-controller="DemoCtrl">
  <ul>
    <li ng-repeat="item in items">
      <!-- <input type="radio" name="group" ng-model="item.checked" ng-click="checkIndex = $index">{{ item.name }} -->
      
      <input type="radio" name="group" ng-model="item.checked" ng-click="changeCheckIndex($index)">{{ item.name }}
    </li>
  </ul>
  
  checkIndex: {{ checkIndex }}
</div>

JavaScript

var demo = angular.module('myApp', []);

demo.controller('DemoCtrl', function($scope, $timeout){
    $scope.checkIndex = 0;
    
    $scope.changeCheckIndex = function(index){
        $scope.checkIndex = index;
    };
    
    $scope.items = [{
        name: 'Beijing',
        checked: false
    },{
        name: 'Shanghai',
        checked: false
    },{
        name: 'Taiyuan',
        checked: false
    }];
    $scope.$watch('checkIndex',function(newVal,oldVal) {
    	alert(oldVal + "->" + newVal);
    })
});