Angular JS - Exposing Controller Function outside the module via onClick function call

Exposing Controller Function outside the module via onClick function call For re-using already defined onClick functions

HTML

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">

<div class="container">
	<div class="elem"></div>
	<div class="elem"></div>
	<div class="elem"></div>
	<div class="elem"></div>
	<div class="elem"></div>
	<div class="elem"></div>
	<div class="elem"></div>
	<div class="elem"></div>
	<div class="elem"></div>
	<div class="elem"></div>
	<div class="elem"></div>
	<div class="elem"></div>
	<div class="elem"></div>
	<div class="elem"><span></span></div>
	<div class="elem"></div>
	<div class="elem"></div>
	<div class="elem"></div>
	<div class="elem" data-foo="bar1"></div>
	<div class="elem" data-foo="bar2"></div>
	<div class="elem"></div>
	<div class="elem"></div>
	<div class="elem"></div>
</div>

CSS

.container{
	width: 420px;
	margin:50px auto 0;
	overflow: hidden;
	padding:5px;
}

.elem{
	width:30px;
	height:30px;
	margin:4px;
	background-color:#A0DFAC;
	float:left;
}

.elem span{
	position:absolute;
	top:5px;
	left:5px;
	right:5px;
	bottom:5px;
	border:2px solid #fff;
}
.elem:first-child,
.elem:last-child{
	background-color:#948bd8;
}
.elem:nth-child(odd){
	border-radius:50%;
}

.elem:nth-child(6){
	background-color:#cb6364;
}

.elem:not(:empty){
	background-color:#444;
	position:relative;

	-webkit-transform:rotate(25deg);
	transform:rotate(25deg);

}

.elem[data-foo=bar1]{
	background-color:#aaa;
}

.elem[data-foo=bar2]{
	background-color:#d7cb89;
}

.elem[data-foo^=bar]{
	width: 16px;
	height: 16px;
	margin: 11px;
}

.elem[data-foo=bar2] + .elem{
	background-color:#78ccd2;
}