Angular JS, Image Menu - angularjs

Question

I want to develop an app using images as my menu button, however, i want to blur the other images that was not clicked or change the color of the image that was on clicked. please help me out on this, I'm new in using angularjs
System Status
<div class="col-sm-2 col-xs-6">
<a class="thumbnail setting_subcatalog_icon" href="#">
<img class="img-responsive" src="image/subcatalog_system_1_h.png" alt="">
<p class="subcatalog_name_h">System<br>Settings</p>
</a>
</div>
<div class="col-sm-2 col-xs-6">
<a class="thumbnail setting_subcatalog_icon" href="#">
<img class="img-responsive" src="image/subcatalog_system_1_h.png" alt="">
<p class="subcatalog_name_h">Time and Date<br></p>
</a>
</div>
<div class="col-sm-2 col-xs-6">
<a class="thumbnail setting_subcatalog_icon" href="#">
<img class="img-responsive" src="image/subcatalog_system_1_h.png" alt="">
<p class="subcatalog_name_h">Firmware<br>Update</p>
</a>
</div>
<div class="col-sm-2 col-xs-6">
<a class="thumbnail setting_subcatalog_icon" href="#">
<img class="img-responsive" src="image/subcatalog_system_1_h.png" alt="">
<p class="subcatalog_name_h">USB<br>Devices</p>
</a>
</div>
</div>

Answer 1

I hope I understand your problem correctly. Please have a look at this Codepen
Explanation: In ng-class I am giving a condition if toggleObject.item value is equal to index value of the list, then set a class to image-active. In controller i have initialised toggleObject.item to -1 so if you not click the item condition will not fulfil and image-active class will not apply.
CSS:
.image-active{
filter: blur(0px) !important;
-webkit-filter: blur(0px) !important;
}
.image-deactive{
filter: blur(20px);
-webkit-filter: blur(20px);
}
HTML:
<img class="image-deactive" ng-class="{'image-active' : toggleObject.item == $index}" ng-src={{client.image}} alt="">
CONTROLLER:
$scope.toggleObject = {item: -1};