AngularJS Isolate Scope Binding Expression Tutorial

Filed Under: AngularJS

We have seen how to use local scope properties to pass values into a directive as strings ( “@” ) and how to bind to external objects using a two-way data binding ( “=”). In this post, we are going to look at the “&” which is used to call an expression on the parent scope from the isolated scope.

AngularJS Isolate Scope “&” Example

The “&” local scope property allows the consumer of a directive to pass in a function and directive can invoke whenever it wants to.
In this section, we are going to explain isolate scope “&” with an example. We will create a myEmployee directive to display an input text field and a button. When the user clicks on the button, it will notify the controller and alert a message using the input value.

The following example demonstrates this usage.


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

	app.controller("MainCtrl", function($scope){
		$scope.clickMe = function(message){


	app.directive("myEmployee", function() {

  	return {
		template: 'Type Something: <input type="text" ng-model="inputMsg">'+
			  '<button  ng-show="inputMsg" ng-click="send( {message : inputMsg} )">Click Me!</button>'

  • Create a controller MainCtrl  and define a function clickMe() in its scope.
  • Then we create a myEmployee directive.
  • The directive creates a custom local scope property within its isolate scope named send. This is done using scope { send: "&" }. In this example,send is just an alias for clickMe function.  When send is invoked, the clickMe function that was passed in will be called.
  • The template within the directive contains a text field and  a button.
  • The button displays only when something is typed in the input field ( ng-show="inputMsg").
  • When the button is clicked the scope property send, which is really a reference to the clickMe function that was passed in) can then be invoked.
  • We have used this special syntax to pass the input value send( {message : inputMsg}
  • The following code shows how to use our directive and pass the clickMe function which is defined in the controller to the scope property, send

<div my-employee send="clickMe(message)"></div>
  •  The clickMe function in the controller will alert our passed in message.


<!DOCTYPE html>
    <head lang="en">
      <meta charset="utf-8">
      <title>AngularJS Isolate Scope</title>


      <div ng-app="mainApp">
		<div ng-controller="MainCtrl">

           		<div my-employee send="clickMe(message)"></div>


      <script type="text/javascript" src=""></script>
      <script type="text/javascript" src="app.js"></script>

You will see the following output on your browser.

That’s all for now and we will see more AngularJS features in the upcoming posts.


  1. says:

    This is useful !

  2. “Isolated”, as in the scope of the directive is not the same as the scope of the controller.

Comments are closed.

Generic selectors
Exact matches only
Search in title
Search in content