Edit in JSFiddle

var NameComponent = {
	bindings: {
  	name: '=',
    age: '='
  },
  template: [
  	'<div>',
    	'<p>Name: {{$ctrl.name}}</p>',
      '<p>Age: {{$ctrl.age}}</p>',
    '</div>'
  ].join('')
};

function MainController() {
	this.people = [{
  	name: 'Todd',
    age: 25
  },{
  	name: 'Ryan',
    age: 20
  },{
  	name: 'Jilles',
    age: 21
  }];
}

angular
	.module('app', [])
  .controller('MainController', MainController)
  .controller('NoopController', angular.noop)
  .component('nameComponent', NameComponent);
<ul ng-app="app" ng-controller="MainController as main">
  <li ng-repeat="person in main.people">
    <name-component name="person.name" age="person.age"></name-component>
  </li>
</ul>