Angular: Empty Fiddle

http://angularjs.org/

by larsolesimonsen

HTML

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
<div parent>
    {{parentText}}
    <div child>
        <input type="text" ng-model="text" />
        <button>Set text in parent</button>
    </div>
</div>

JavaScript

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

myApp.directive('parent', function() {
    return {
        controller: function foobar($scope) {
            $scope.parentText = '';
            this.setText = function(text) {
                $scope.parentText = text;
            }
        }
    };
});
myApp.directive('child', function() {
    return {
        restrict: 'EAC',
        require: '^parent',
        link: function($scope, element, attrs, ctrl) {
            element.find('button').bind('click', function() {
                $scope.$apply(function() {
                    ctrl.setText($scope.text);
                });
            });
        }
    };
});
//myApp.factory('myService', function() {});

function MyCtrl($scope) {
    $scope.name = 'Superhero';
}