<!DOCTYPE html>
<html ng-app="employee-directory">
<head>
<script data-require="jquery@*" data-semver="2.0.3" src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
<link data-require="foundation@*" data-semver="5.0.0" rel="stylesheet" href="//cdn.jsdelivr.net/foundation/5.0.0/css/normalize.css" />
<link data-require="foundation@*" data-semver="5.0.0" rel="stylesheet" href="//cdn.jsdelivr.net/foundation/5.0.0/css/foundation.min.css" />
<script data-require="angular.js@*" data-semver="1.2.9" src="http://code.angularjs.org/1.2.9/angular.js"></script>
<script src="script.js"></script>
</head>
<body>
<div class="directory" ng-controller="DirectoryCtrl">
<header>
<h4>Employees ({{employees.length}})</h4>
</header>
<ul>
<li ng-repeat="employee in employees">
<label>Name: {{employee.name}}</label>
<label>Address: {{employee.address}}</label>
<button ng-click="addToDirectory(currentUser.id, employee)">Add to my directory</button>
</li>
</ul>
</div>
</body>
</html>
angular.module('employee-directory', []).
controller('DirectoryCtrl', function($scope, directory){
$scope.employees = [
{ name: "Kent Beck", address: "Southern Oregon" },
{ name: "Uncle Bob", address: "Chicago" },
{ name: "Rich Hickey", address: "New York" }
];
$scope.addToDirectory = directory.addForUser;
}).
factory('directory', function(){
return {
addForUser: function(userId, employee){
alert('added ' + employee.name + ' to user ' + userId + ' directory');
}
}
}).
run(function($rootScope){
$rootScope.currentUser = {
id: 1,
name: 'The User'
}
});