<!DOCTYPE html>
<html>
<head>
<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/css/materialize.min.css">
<!-- Compiled and minified JavaScript -->
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/js/materialize.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0/angular.js"></script>
<script src="script.js"></script>
</head>
<body ng-controller="MainController as vm">
<div class="container">
<h1>Business Cards</h1>
<business-card ng-repeat="person in vm.people" person="person"></business-card>
</div>
</body>
</html>
// Code goes here
angular.module('myApp', [])
.controller('MainController', function() {
var vm = this;
vm.people = [{
firstName: 'John',
lastName: 'Smith',
business: 'Car Salesman',
email: 'jsmith@aol.com',
website: 'http://jsmithauto.com'
}, {
firstName: 'Bob',
lastName: 'Jones',
business: 'Hospital Administrator',
email: 'bjones@yahoo.com',
website: 'http://cleanlinessinc.com'
}, {
firstName: 'Donna',
lastName: 'Wesley',
business: 'Software Developer',
email: 'dwesley@gmail.com',
website: 'http://codinggeek.com'
}];
})
.component('businessCard', {
bindings: {
person: '='
},
templateUrl: 'businessCard.html'
});
angular.element(document).ready(function() {
angular.bootstrap(document, ['myApp']);
});
<div class="row">
<div class="col s12 m6">
<div class="card blue-grey darken-1">
<div class="card-content white-text">
<span class="card-title">{{$ctrl.person.lastName}}, {{$ctrl.person.firstName}}</span>
<div>
<label for="business">Business</label>
<span name="business">{{$ctrl.person.business}}</span>
</div>
<div>
<label for="email">Email</label>
<span name="email">{{$ctrl.person.email}}</span>
</div>
<div>
<label for="last-name">Website</label>
<span name="last-name">{{$ctrl.person.website}}</span>
</div>
</div>
</div>
</div>
</div>