Instant search with solr and angularjs

HTML

<script src="http://code.angularjs.org/1.0.7/angular.js"></script>
<div ng-app="solrapp">Search Results:
    <search-results solr-url="192.168.99.100    :8983/solr/statedecoded/search" query="car tax" display-field="catch_line"></search-results>
</div>

JavaScript

var app = angular.module('solrapp', []);
    angular.module('solrapp')
      .directive('searchResults', function () {
        return {
            scope: {
                solrUrl: '@',
                displayField: '@',
                query: '@',
                results: '&'
            },
            restrict: 'E',
            controller: function ($scope, $http) {
                $scope.$watch('query', function () {
                    $http({
                        method: 'JSONP',
                        url: $scope.solrUrl,
                        params: {
                            'json.wrf': 'JSON_CALLBACK',
                                'q': $scope.query,
                                'fl': $scope.displayField
                        }
                    })
                        .success(function (data) {
                        var docs = data.response.docs;
                        $scope.results.docs = docs;

                    }).error(function () {});
                });
            },
            template: '<input ng-model="query" name="Search"></input>' +
                '<h2>Search Results for {{query}}</h2>' +
                '<span ng-repeat="doc in results.docs">' +
                '  <p>{{doc[displayField]}}</p>' +
                '</span>'
        };
    });