javascript - Angular JS - Sharing controller between directives -

javascript - Angular JS - Sharing controller between directives -

can't seem figure out why not working...

what i'm trying do:

i need able share controller maincontent directive directive focus , maintain getting error: cannot set property 'element' of undefined.

i'm practically copying/pasting illustration : https://www.codeschool.com/screencasts/egghead-io-flexible-angular-directives : i'm not sure why isn't working?

relevant code:

//html <maincontent id="maincontent"> <focus>whatever</focus> </maincontent> //js angular.module('home', []) .directive('maincontent', maincontent) .directive('focus', focus); maincontent.$inject = []; function maincontent() { homecoming { restrict: 'e', scope: {}, controller: function($scope) { $scope.element = ''; } } } focus.$inject = []; function focus() { homecoming { restrict: 'e', transclude: true, template: '<div id="focus"><div ng-transclude></div></div>', require: '^?maincontent', // tried 'maincontent' && '^maincontent' link: function(scope, elem, attrs, ctrl) { ctrl.element = 'such wow'; } }; }

(yes, know syntax isn't mutual follows style guides project) in advance, help much appreciated!

javascript angularjs controller angularjs-directive