Minimal directive example

from https://groups.google.com/forum/?fromgroups#!topic/angular/Ovn-5jVK3So

HTML

<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.7/angular.min.js"></script>
    <div ng-controller="MyController as ctrl1">
      <p>MyController1: {{ctrl1.myMessage}} <button ng-click="ctrl1.change()">change</button></p>
      <div ng-controller="MyController2 as ctrl2">
          <p>MyController2: {{ctrl1.myMessage}} <button ng-click="ctrl2.change(ctrl1)">change</button></p>
          <p>MyDirective: <my-directive message="ctrl1.myMessage"/></p>
      </div>
  </div>

JavaScript

angular.module('myApp', [])
function MyController() {
    var count = 0;
    this.myMessage = "from controller";
    this.change = function(){
        this.myMessage = "from controller one " + (++count);
    }
}

angular.module('myApp').controller('MyController', MyController)

function MyController2() {
    var count = 0;
    this.change = function(ctrl){
        ctrl.myMessage = "from controller two " + (++count);
    }
}

angular.module('myApp').controller('MyController2', MyController2)

function myDirective () {
    return {
        restrict: 'E',
        replace: true,
        template: '<span>Hello {{message}} <button ng-click="change()">change</button></span>',
        scope: {
            message: "="
        },
        link: function(scope, elm, attrs) {
            var count = 0;
            scope.change = function(){
                scope.message = "from directive " + (++count);
            }
        }
    };
}

angular.module('myApp').directive('myDirective', myDirective)