Below is a variation to my first application using AngularJS.

In that sample http calls to server was handled inside controller. That was moved to a custom service provider, viz ‘dataService’, which take care of communication to server.
That custom service was defined using factory method.

Both ‘ContactSearch’ & ‘DetailsController’ controllers depends on ‘dataService’.
A dependency to ‘dataService’ was injected to both controllers and so it can use methods provided by that service.

Full Screen Demo (new tab/window)

index.html

<!DOCTYPE html>
<html>
<head>
<title>Experiment with AngularJS -1 ( Contact Search Application )</title>
</head>
<style>
tr:nth-child(even) {
    background-color: #EBF5FF;
}
tr:nth-child(odd) {
    background-color: #E6E6E6;
}
</style>
<body>
<div ng-app="contacts" ng-controller="ContactSearch">
	<label>Search for contacts:</label>
	<input type="text" name="searchFor" ng-keyup="search()" ng-model="searchFor"/><span style="font-size:9px">('john','james' etc)</span>
	<div style="width:75%;padding:15px 0 0 10px">
		<div style="float:left;min-height:250px">
			<table cellspacing="0" cellpadding="0" border="0" width="100%">
			<tr ng-repeat="contact in contacts | orderBy:'name':false">
				<td>
					<a href="#detail/{{ contact.id }}">{{ contact.name }}</a>
				</td>
			</tr>
			</table>
		</div>
		<div style="margin-left:150px" ">
			<div ng-view style="background:#F5F0E6;width:300px">
			</div>
		</div>
	</div>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular-route.js"></script>
<script src="app.js"></script>
</body>
</html>

app.js

templates/detail.html