We display alphabets from A to Z using ng-repeat directive.When mouse up event will fire then the style that is bind to ng-mouseup event will apply on alphabet means alphabets reamins in original position.

<!DOCTYPE html> <html xmlns=""> <head> <title></title> <script src=""></script> </head> <body ng-app="app"> <div ng-controller="controllerName" ng-init="genetareLetter()"> <span ng-repeat="p in ltrs"><i ng-mouseup="style={}" ng-mousedown="style={color:'blue','background-color':'gray','font-size':'20px', 'cursor':'pointer'}" ng-style="style">{{p}},</i></span> </div> <script> var app = angular.module("app", []); app.controller('controllerName', ['$scope', function ($scope) { $scope.ltrs = []; $scope.genetareLetter = function () { var letters = "ABCDEFGHIJKLMNOPQRSTUVWXYZ"; for (i = 0; i < letters.length; i++) { $scope.ltrs.push(letters[i]); } }; }]); </script> </body> </html>