var myApp = angular.module('myApp', []); myApp.controller('fooCtrl', ['$scope', function ($scope) { $scope.items = [ {name: 'mamor', age: 16}, {name: 'MAMOR', age: 20} ]; $scope.active = function (index, active) { $scope.items[index].active = active; $scope.items[index].style = active ? {color: 'red'} : {}; }; }]);
<div ng-app="myApp" ng-controller="fooCtrl"> <div ng-repeat="(index, item) in items" ng-style="item.style" ng-mouseover="active(index, true)" ng-mouseleave="active(index, false)"> name: {{ item.name }} age: <span ng-show="item.active">{{ item.age }}</span> </div> </div>