change color to the same element angular - angularjs

Question

Hi I have the following problem, when I click on an item changes color to all elements but I need to change only the color that I clicked:
<div ng-app="myApp" ng-controller="myCtrl as model">
<button ng-click="model.addComparative()"> add
</button>
<div ng-repeat="item in model.items track by $index">
<button ng-model="model.myModel" ng-click="model.changeColor()" ng-class="{'red':model.myModel==true}">click me</button>
</div>
angular
.module("myApp",[])
.controller('myCtrl', function($scope){
var model=this;
model.myModel=false;
model.items=[];
model.newItems = '';
model.addComparative = function(){
model.items.push(model.newItems)
}
model.changeColor = function(){
model.myModel = true;
}
})
and the codepen: http://codepen.io/fernandooj/pen/rrdZWE

Answer 1

Try using the current index of each item:
html file
<button ng-model="model.myModel" ng-click="model.changeColor(item)" ng-class="{'red':item.selected==true}">click me</button>
js file
model.addComparative = function(){
model.items.push({}); // What you append needs to be an object.
}
model.changeColor = function(item){
item.selected = true;
};

Answer 2

just use
<button ng-model="model.myModel"
ng-click="this.item.red=true"
ng-class="{'red':this.item.red}">click me</button>
ng-repeat's $index may vary between digest cycles (if items are not ordered), thus it is not reliable
adding set of 3 buttons on each "ADD" click and using JS onclick:
<div ng-app="myApp" ng-controller="myCtrl as model" ng-init="range=[0, 1, 2]">
<button ng-click="model.addComparative()"> add </button>
<div ng-repeat="item in model.items track by $index+3">
<button ng-repeat="i in range"
ng-model="model.myModel1"
onclick="this.style.background = 'red'">click me</button>
</div>
</div>
also note that all your buttons have the same ngModel, probably it is not desired