I'm creating a navigation bar and I'm looking for an icon that, in addition to changing the page, changes the icon of gray scales to color. And deactivating the previous menu doing the opposite.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>TabCollection</title>
<script src="Libs/angular.min.js"></script>
<script src="Libs/angular-route.min.js"></script>
<script>
var app = angular.module('myApp',[]);
app.controller("controller",["$scope",function($scope){
$scope.tabCollection = [
{"title":"CONFIGURACION DE PERFIL","isactive":"active","link":"#/","image":"img/color/iconoSubMenuPerfilColor.png"},
{"title":"SOLICITUD ACCESO INFORMACION","isactive":"","link":"#/solicitudes","image":"img/gris/iconoSubMenuAccesoInfoGris.png"},
{"title":"SOLICITUD DATOS PERSONALES","isactive":"","link":"#/datospersonales","image":"img/gris/iconoSubMenuDatosPersonalesGris.png"},
{"title":"MI HISTORIAL","isactive":"","link":"#/historial","image":"img/gris/iconoSubMenuHistorialGris.png"},
{"title":"AYUDA","isactive":"","link":"#/ayuda","image":"img/gris/iconoSubMenuAyudaGris.png"}
];
$scope.solAcceso = function solTitulo(titulo){
}
}]);
</script>
</head>
<body data-ng-app="myApp">
<div data-ng-controller="controller">
<ul>
<li data-ng-repeat="item in tabCollection"><a href="{{item.link}}"><img src="{{item.image}}" alt="" width="30px" height="18px">{{item.title}} </a></li>
</ul>
<button data-ng-click="solAcceso()">Solicitud Acceso</button>
</div>
</body>
</html>This is what I have been doing so far, what I'm looking for is to make the function that the menu item takes me and with a "replace", modify the path of the image shown