How to change class of parent element from focus/blur?

I'm trying to add a class to the parent of an input when it gets focus. I can get the parent, but I can't seem to set the classname. Here's what I tried in this plunkr:

http://plnkr.co/edit/eEfSeDb7i3uujjBZt21z?p=preview

<!DOCTYPE HTML>
<html id="ng-app" ng-app="app"> <!-- id="ng-app" IE<8 -->

<head>
    <link rel="stylesheet" href="http://nervgh.github.io/css/animate.min.css" />    
    <style>
        .highlight {
          border: 2px solid red;
        }
        .blue-border
        {
          border:2px solid blue;
        }
    </style>

     <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.7/angular.min.js"></script>    
    <script>
        angular.module( 'app', [])
            .run( function( $rootScope, $timeout ) {                   

                 $rootScope.focusInput= function($event )
                {
                    angular.element($event.target).parent().className += " " + 'highlight';
                    console.log( angular.element($event.target).parent() );
                };

                $rootScope.blurInput= function($event )
                {
                    angular.element($event.target).parent().className.replace(' highlight', '');                                       
                };
            });
    </script>

</head>
<body>

    <div class="blue-border">

      <input ng-focus="focusInput($event)" ng-blur="blurInput($event)" value="Lactobacillus acidophilus"/>  

</div>

</body>
</html>

Notice how it logs the parent successfully. However, the border does not turn red! Is there some other more "Angulary" way of doing this?

Solution

Angular's JQLite provides the 'addClass' and 'removeClass' functions for this:

angular.element($event.target).parent().addClass('highlight');

See the documentation here: https://docs.angularjs.org/api/ng/function/angular.element