<!DOCTYPE html>
<html ng-app="test">

  <head>
    <script data-require="angular.js@1.2.27" data-semver="1.2.27" src="https://code.angularjs.org/1.2.27/angular.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body ng-controller="testCtrl">
    <h1>Hello Plunker!</h1>
    <h2>{{test}}</h2>
    <input ignore-composition-event="" type="text" ng-model="filterValue" />
  </body>

</html>
// Code goes here
var app = angular.module('test',[]);

app.controller('testCtrl',function($scope){
    $scope.test = 'test';
    $scope.$watch('filterValue',function(data){
      console.log(data);
    })
}).directive('ignoreCompositionEvent', function () {
    return {
        restrict: 'A',
        link: function postLink(scope, element) {
            //element.val('this is the ignoreCompositionEvent directive');
            element.off('compositionstart').off('compositionend');
        }
    };
}); 
/* Styles go here */