proper way to assign and use controller in directives in AngularJS

how to correctly assign a controller to a directive so 2 directives can communicate to each other. When I set the require argument of the second directive to the name of the first directive i get an error in the console:

Error: No controller: dir at Error () at getControllers (http://ajax.googleapis.com/ajax/libs/angularjs/1.0.4/angular.js:4132:19) at nodeLinkFn (http://ajax.googleapis.com/ajax/libs/angularjs/1.0.4/angular.js:4259:35) at compositeLinkFn (http://ajax.googleapis.com/ajax/libs/angularjs/1.0.4/angular.js:3869:15) at compositeLinkFn (http://ajax.googleapis.com/ajax/libs/angularjs/1.0.4/angular.js:3872:13) at nodeLinkFn (http://ajax.googleapis.com/ajax/libs/angularjs/1.0.4/angular.js:4252:24) at compositeLinkFn (http://ajax.googleapis.com/ajax/libs/angularjs/1.0.4/angular.js:3869:15) at compositeLinkFn (http://ajax.googleapis.com/ajax/libs/angularjs/1.0.4/angular.js:3872:13) at publicLinkFn (http://ajax.googleapis.com/ajax/libs/angularjs/1.0.4/angular.js:3775:30) at http://ajax.googleapis.com/ajax/libs/angularjs/1.0.4/angular.js:934:25 <div class="btn btn-danger" dir2=""> angular.js:5601

(anonymous function)angular.js:5601

(anonymous function)angular.js:4698

nodeLinkFnangular.js:4261

compositeLinkFnangular.js:3869

compositeLinkFnangular.js:3872

nodeLinkFnangular.js:4252

compositeLinkFnangular.js:3869

compositeLinkFnangular.js:3872

publicLinkFnangular.js:3775

(anonymous function)angular.js:934

Scope.$evalangular.js:7905

Scope.$applyangular.js:7985

(anonymous function)angular.js:932

invokeangular.js:2813

bootstrapangular.js:930

angularInitangular.js:906

(anonymous function)angular.js:14600

cjquery-latest.min.js:3

p.fireWithjquery-latest.min.js:3

b.extend.readyjquery-latest.min.js:3

H

Here's an example in plnkr.

Edit :

I'm trying to do something that is present in a lot of websites, change the view template by clicking on a button or link from list view to thumbnails view etc... I thought about making 2 directives one called "switcher" for the button switcher and the other called "switchable-view" for the view. here's a plnkr with an example code. The idea is when i click on the "switcher" directive it switch the template in the switchable directive which will result on switching the view, I hope this is clear enough. what i'm trying to do is something like this plnkr

Thanks in advance.

Actually when you would like to share controller between directives you need to have then or on one element or somewhere upper on hierarchy (and add '^' before name on require).

So the answer for your question would be: this error accrues because required directive/controller is not on same or upper level of hierarchy of DOM elements.

I suppose, you would like to have some container to store list of attributes and then manipulate this list from directives. My suggestion would be to have another directive for storing them (like ngForm do). So both directiveis (dir, dir2) that are on different leaves of DOM hierarchy require some directive that would contain shared data and would have common hierarchy. Kind of:

──── attributesDirective (in controller: this.doSomething())
                     ├ dir1 (requre: '^AttributesDirective')
                     └ dir2 (requre: '^AttributesDirective')

BUT, actually, you can achieve what you've described at 'EDIT' without adding any directive and any JS code: add property template that will store name of template file and change this property when user clicks on items. ngInclude will pick up new value and reload template.

Here is your changed plunker with this solution: http://plnkr.co/edit/z7wg1TCIdmQjfT8A2rZe?p=preview