Directive callback

Define a callback with named arguments in your scope

HTML

<script src="http://code.angularjs.org/1.1.3/angular.js"></script>
<script src="http://fonts.googleapis.com/css?family=Droid+Sans:400,700"></script>
<h3>Directive callback demo</h3>
<div ng-controller="MainCtrl">
  <div on-call> </div>
</div>

CSS

* {
  font-family: 'Droid Sans', sans-serif;
}

#log {
  margin-top: 10px;
  font-size: 10px
}

JavaScript

var app = angular.module('CallbackDemo', []);

app.controller('MainCtrl', function($scope) {
      $scope.names = ['Anjali', 'Tiwari', 'Shukla'];
      $scope.callHere = function() {
        alert("hello");
      }

      app.directive("onCall", function() {
        return {
          restrict: 'A',
          scope: {
            onCall: '&',
          },
          bindToController: true,
          controller: 'MainCtrl',
          template: '<div style="background:red">Hey</div>' +
            '<select> <option ng-repeat="user in names" on-call="callHere">				{{user}} </option>' + '</select>'
        }
      });