We display numbers from 1 to 50 using ng-repeat directive.When we over the mouse the style that is bind to ng-mouseover event will apply on number otherwise ng-mouseleave style will apply.
<!DOCTYPE html> <html xmlns=""> <head> <title></title> <script src=""></script> </head> <body ng-app="app"> <div ng-controller="controllerName" ng-init="genetareNumbers()"> <span ng-repeat="number in numbers" ><i ng-mouseover="style={color:'blue','background-color':'gray','font-size':'20px', 'cursor':'pointer'}" ng-mouseleave="style={'background-color':'white'}" ng-style="style">{{number}},</i></span> </div> <script> var app = angular.module("app", []); app.controller('controllerName', ['$scope', function ($scope) { $scope.numbers = []; $scope.genetareNumbers = function () { for (var i = 1; i < 51; i++) { $scope.numbers.push(i); } }; }]); </script> </body> </html>