クリックしたアイテムごとに「ng-class」

Question

デモに表示されているように、選択した<li>にクラスを追加する必要がありますが、別の<li>をクリックすると削除されたくありません。

<div ng-app="myApp"> 
    <ul ng-controller="myCtrl"> 
     <li ng-repeat="item in model.items" class="commonClass" ng-class="{'on': model.selected==item}" ng-click="model.selected=item">{{ item.name }}</li> 
    </ul> 
</div> 

JS

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

app.controller('myCtrl', function ($scope) { 

    $scope.model = { 
     selected: null, 
     items : [ 
      {name: "Apple"}, 
      {name: "Banana"}, 
      {name: "California"} 
     ] 
    }; 
}) 

demo

Answer 1

はちょうどこの

<div ng-app="myApp"> 
    <ul ng-controller="myCtrl"> 
     <li ng-repeat="item in model.items" class="commonClass" ng-class="{'on': selected==$index}" ng-click="selected=$index">{{ item.name }}</li> 
    </ul> 
</div> 

のように追加します助けてください