Radio Buttons not saving correct value in Angular JS - angularjs

Question

After a couple of tries on fixing my code, and searching for any solutions on the net, I finally gave up and would like to ask help on you guys.
I'm working on multiple sets of radio buttons and turn them to star ratings:
imgur link on my ratings section (cause I am not able to post images)
Each star is represented with 1 radio button, and each row has 5 radio buttons. In this image, im creating 3 sets of 5 radio buttons. Using the ng-repeat feature,
<tr ng-repeat="number in called_numbers">
<td>
<div ng-if="number.name != null">
<span class="star-rating" ng-init="temp_called_numbers[$index].rating.value ">
<input type="radio" name="rating" ng-model="temp_called_numbers[$index].rating.value" value="1"><i></i>
<input type="radio" name="rating" ng-model="temp_called_numbers[$index].rating.value" value="2"><i></i>
<input type="radio" name="rating" ng-model="temp_called_numbers[$index].rating.value" value="3"><i></i>
<input type="radio" name="rating" ng-model="temp_called_numbers[$index].rating.value" value="4"><i></i>
</span>
</div>
</td>
Now this specific page keeps on refreshing so when you click/highlight on a specific star, it refreshes and returns 5 blank stars again. What I did was that, I created an array to temporary store the value of each row.
$scope.temp_called_numbers = [];
$scope.rating_stars = {
value:0
};
and setting $scope.temp_called_numbers by:
rate_stars = function(){
for(i=0; i < $scope.called_numbers.length; i++){
$scope.temp_called_numbers.push( {rating: $scope.rating_stars});
}
}
The issue here now is that, when I select a star/radio button in one row, the other rows get the same value. For example, I select 1 star for row 1 which is temp_called_numbers[0].rating.value indexed 0, all the other rows get 1 star as well.
Any code change, reference or any help is much appreciated. Thanks!

Answer 1

$scope.temp_called_numbers = [];
$scope.rating_stars = {
value:0
};
rate_stars = function(){
rating = $scope.rating_stars;
for(i=0; i < $scope.called_numbers.length; i++){
angular.extend(temp_called_numbers, rating);
}
}

Answer 2

<tr ng-repeat="number in called_numbers">
<td>
<div ng-if="number.name != null">
<span class="star-rating" ng-init="temp_called_numbers[$index].rating.value ">
<input type="radio" name="rating" ng-model="number.checked"><i></i>
<input type="radio" name="rating" ng-model="number.checked"><i></i>
<input type="radio" name="rating" ng-model="number.checked"><i></i>
<input type="radio" name="rating" ng-model="number.checked"><i></i>
</span>
</div>
</td>
</tr>
// Access selected items
angular.forEach($scope.called_numbers, function(value, index) {
if (value.checked) {
$scope.called_numbers[index].checked = isSelectAll;
}
});

Answer 3

For those checking on this thread. I've figure out that the issue here is not on the saving-to-array part, however, the issue is on the HTML side of the code.
Also, this was a visual bug on the stars and the array is fine and it stores the data when clicked. The reason that I was not getting the right data when clicking the radio button from 1 set of radio button group is because I was using <span></span> for the wrapper on the radio button.
what happened was that, even though I was getting 2 or more sets of Radio Button through ng-repeat, the page only accepts 1 radio button input.
By changing the wrapper to <form></form>:
<form class="star-rating" ng-init="temp_called_numbers[$index].rating.value ">
<input type="radio" name="rating" ng-model="number.checked"><i></i>
<input type="radio" name="rating" ng-model="number.checked"><i></i>
<input type="radio" name="rating" ng-model="number.checked"><i></i>
<input type="radio" name="rating" ng-model="number.checked"><i></i>
</form>
I can now get 2 or more different inputs from each set of radio button group.