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)


<!DOCTYPE html>
<title>Experiment with AngularJS -1 ( Contact Search Application )</title>
tr:nth-child(even) {
    background-color: #EBF5FF;
tr:nth-child(odd) {
    background-color: #E6E6E6;
<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">
					<a href="#detail/{{ }}">{{ }}</a>
		<div style="margin-left:150px" ">
			<div ng-view style="background:#F5F0E6;width:300px">
<script src=""></script>
<script src=""></script>
<script src="app.js"></script>