app.js
                    
var app = angular.module('angularjs-starter', []);
app.controller('MainCtrl', function($scope) {
$scope.doit = function(){
console.log('doing it for item with title --> ', this.item.title);
}
$scope.renderthis = function(){
console.log('rendering this for item with title -->', this.item.title);
return '|';
}
$scope.items = [{title: 'hello', number: 1}, {title: 'shalom', number: 42}];
});
                    index.html
                    
<!DOCTYPE html>
<html ng-app="angularjs-starter">
<head lang="en">
<meta charset="utf-8">
<title>Custom Plunker</title>
<script src="//code.angularjs.org/1.1.1/angular.js"></script>
<link rel="stylesheet" href="style.css">
<script>
document.write('<base href="' + document.location + '" />');
</script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<ul>
<li ng-repeat="item in items">
<div>
<span>{{item.title}}</span>
<span>{{renderthis()}}</span>
<span>{{item.number}}</span>
<button ng-click="doit()">CLIQUE!</button>
</div>
</li>
</ul>
</body>
</html>
                    style.css
                    
/* CSS goes here */