JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.1/angular-route.js"></script>
<div ng-app="app" ng-controller="dummy">
     <ng-lms-search-box search-type="Author" maxResult=5 data-ng-model="searchText"> </ng-lms-search-box>
</div>

CSS

.has-error {
    background-color: red;
}

JavaScript

var app = angular.module("app", []);
app.controller('dummy', ['$scope', function ($scope) {


}])
.directive('ngLmsSearchBox', [ '$http', function($http) {
    return {
        restrict : 'E',
        replace : 'true',
        scope : {
            searchType : '@searchType',
            searchText : '@ngModel',
        },
        template: '<div>{{searchType}}</div>',
        link : function($scope, element, attrs) {
            console.log($scope.searchType);
            console.log($scope.searchType);
            if ($scope.searchType == "Author") {
                element.bind('keyup', function() {
                    $http.post("listAuthor/" + $scope.searchText + "/1", {
                        'Content-Type' : 'application/json'
                    }).success(function(data) {
                        $scope.$emit("passData", data);
                    });
                });
            } else if ($scope.searchtype == "Publishers") {
            } else {
            }
        },
    };
} ]);