want a logic for typing tutor in Angularjs

can anybody help me. i am bit confuse about for the logic Angularjs app Typing Tutor. I want a logic for how can i test the user input from text box and show error with color red. like this......

i want when user enter text in textbox then these text should match with the data of array name typingData.

if both the element doesnot matches then show red background color of text........ like there is an example which i want......

http://crazy2be.github.io/dvorak-typing-tutor/

enter code here

  <!DOCTYPE html>
  <html ng-app="myApp">
  <head>

  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
  <style>
  p{
  margin-left: 200px;
  width: 500px;
  height: 200px;
  border : 2px dashed red;
  background-color: lightblue;
  border-collapse: collapse;
  }
  #inputText{
  width: 500px;
    height: 50px auto;
  }
  </style>
  </head>

  <body  ng-controller="myController"> 

  <div> 
  <div> 
    <p> 
    <span ng-repeat="x in typingData"> &nbsp{{x}}
    </span> 
    </p> 
    <div style="margin-left: 200px;">
        <input type="text" ng-model="inputText" ng-keydown="test()" id="inputText" >
    </div> 
   </div> 
   </div> 





   <script>
   var app= angular.module('myApp',[]);
   app.controller('myController',function($scope) {     
  $scope.typingData=['tl','sg','re','wf',' kr','up'                 //'few','above','water','answer','cut','look','out','begin','paper'
   ];
   $scope.getData = [];
    $scope.checkText = function(){
    for(i=0;i<$scope.typingData.length;i++){
        //console.log($scope.typingData[i].split(""));
    }
     }
     $scope.test = function(){
     $scope.getData.push($scope.inputText);
     console.log($scope.getData);


     }
    /*$scope.$watch('inputText',function(newValue,oldValue){
    if(newValue !== oldValue){
    console.log(newValue);
    //console.log($scope.inputText);

    }
    });*/

    });