ng click update model not resetting ng src - angularjs

Question

I have a ng repeat which will display four images.
On click on any one of these, I have to change the image of the particular one and reset other to its previous image. My angularJs code goes like this
<div class='col-lg-3 col-md-3 col-xs-6 col-sm-6 noPaddingLeftRight' ng-repeat="category in categoryList">
<img ng-click="selectedCategory = category.Category_Id; selectedNo = category.RunningNumber;" ng-src="{{$index == selectedNo?category.HoverImageName:category.CategoryImage}}" alt='home' style='align-content: center; margin-top: 10px;' />
</div>
after I click it will change the particular one but it won't reset the previous image.
What I am doing wrong?

Answer 1

You're making way harder than necessary. Why do you need two variables to remember which category is selected? Why do you set the selectedNo to category.RunningNumber, but then comparing it with $index. If it's supposed to be an index, then set it to the index. If it's supposed to be the running number of the category, then compare it with the runing number.
Also, you're modifying a variable of the scope, but ng-repeat has its own scope. So each iteration has its own selectedCategory and selectedNo.
So, create an object in your controller:
$scope.model = {
selectedCategory: null
};
And then all you need is
<div ng-repeat="category in categoryList">
<img ng-click="model.selectedCategory = category"
ng-src="{{ model.selectedCategory == category ? category.HoverImageName : category.CategoryImage }}" />
</div>
Or delegate to a function:
$scope.selectedCategory = null;
$scope.selectCategory = function(category) {
$scope.selectedCategory = category;
};
<div ng-repeat="category in categoryList">
<img ng-click="selectCategory(category)"
ng-src="{{ selectedCategory == category ? category.HoverImageName : category.CategoryImage }}" />
</div>