AngularJS Example:

HTML

<div ng-app="law">
    <lawsearch ng-init="init('vehicle')"></lawsearch>
    <lawsearch ng-init="init('house')"></lawsearch>
    <lawsearch ng-init="init('pet')"></lawsearch>
</div>

CSS

</style> <!-- Ugly Hack due to jsFiddle issue: http://goo.gl/BUfGZ --> <link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css"> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script> <style> .done-true {
    text-decoration: line-through;
    color: grey;
}

JavaScript

angular.module('law', []).
directive('lawsearch', function () {
    return {
        restrict: 'E',
        scope: {},
        controller: function ($scope, $element) {
         
            $scope.init = function (q) {
                $scope.q = q;
                $.ajax({
                    url: "http://ec2-75-101-214-153.compute-1.amazonaws.com:8983/solr/statedecoded/search",
                    data: {
                        "q": $scope.q,
                        "wt": "json",
                        "rows":3
                    },
                    async: true,
                    dataType: 'jsonp',
                    success: function (data) {
                        $scope.$apply(function () {
                            $scope.results = data.response.docs;
                        });
                    },
                    jsonp: 'json.wrf'
                });
            }
        },
        template:
            '<div>'+
            '    <h1>{{q}}</h1>'+
            '    <ul class="unstyled">'+
        //asdf
            '        <li ng-repeat="result in results">'+
            '            <h4>{{result.catch_line}}</h4>'+
            '            <p>{{result.text}}</p>'+
            '        </li>'+
            '    </ul>'+
            '</div>',
        replace: true
    };
})