<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script>
</head>
<body ng-app="app">
<div ng-controller="controllerName">
<p>Mouse leave on letter</p>
<div style="width:100px">
<p ng-mouseleave="count=count==25?count=0:count=count+1" style="margin-top: -30px; font-size: 180px; color:{{Colors[count]}}">{{arr[count-0]}}</p>
</div>
</div>
<script>
var app = angular.module("app", []);
app.controller('controllerName', ['$scope', function ($scope) {
$scope.arr = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'];
$scope.Colors = ["aqua", "tomato", "beige", "tan", "blue", "brown", "cyan","darkblue", " darkcyan", " darkgrey", "darkgreen",
" darkkhaki", " darkmagenta", "darkolivegreen", "darkorange", "darkorchid", "darkred", " darksalmon", " darkviolet", " gold", " green", "indigo", " khaki", " lightblue", "lightcyan", "lightgreen", " lightgrey"];
}]);
</script>
</body>
</html>
