JSFiddle - React, Tailwind, and code Playground

HTML

<div ng-app="jobs">
	<div data-ng-controller="SearchCtrl">
		<div class="search">
			<h2>Search</h2>
			<div class="box"><input type="text" id="search" maxlength="75" data-ng-model="search_term" data-ng-change="doSearch()" placeholder="Type to start your search..." /></div>
		</div>
		<div class="search-summary">
			<p><span class="field">You searched for:</span> {{ search_term }}</p>
		</div>
		<div class="results">
			<ul>
				<li data-ng-repeat="item in searchService.results">
					<h3>{{ item.title }}</h3>
				</li>
			</ul>
		</div>
	</div>
</div>

JavaScript

var app = angular.module('jobs', []);

app.factory('searchService', function($http) {
	var results = [{'title':'title 1'}, {'title':'title 2'}];

	function find(term) {
    /*
    The Ajax bit...
    
    $http.get('/json/search').success(function(data) {
			results = data.results;
            return results;
    });
    
    */
        results = [{'title':'title 3'}, {'title':'title 4'}]
	}

	//public API
	return {
			results: results,
	        find: find
	};
});

app.controller("SearchCtrl", ['$scope', '$http', 'searchService', function($scope, $http, searchService) {
	$scope.search_term = '';
	$scope.searchService = searchService;
    console.log($scope.searchService);
	$scope.doSearch = function(){
        console.log('doing search.....');
        //we need to refresh the results
		$scope.searchService.results = searchService.find($scope.search_term);
	};
    
    $scope.searchService.find();
}]);