if you set require: "^directive1", , your directive 2 should be in directive 1:
<div directive1> <div directive2></div> </div>
You can also use "? Directive1", which makes it optional.
Simple put: there are two types of controllers: directory controllers and regular ones.
Using controllers, you can set values in the area that will be updated in the view. This is plunkr with one controller and two directives: http://plnkr.co/edit/IicvQfuv8LMOb4iVQen5
var app = angular.module('plunker', []); app.directive('directive1', function() { return { restrict: 'A', replace: true, template: '<span>{{bar}}</span>' } }); app.directive('directive2', function() { return { restrict: 'A', replace: true, template: '<b>{{bar}}</b>' } }); app.controller('MainCtrl', function($scope) { $scope.name = 'World'; $scope.foo ="layla"; $scope.bar ="hello"; });
and html:
<body ng-controller="MainCtrl"> this is directive1: <div directive1>{{foo}}</div>. <br /> this is directive2: <div directive2>{{foo}}</div>. Hello {{name}}! </body>
Note that directives are new elements that your browser can parse. They are an HTML extension whose behavior you defined in the app.directive () part.
When AngularJS finds {{foo}} , it will bind it to an area that can be modified using a closer controller that has access to that area. In this case, MainCtrl. You can also put MainCtrl in <div ng-controller="MainCtrl">...</div>
With your code, you will not get a controller because it goes up the tree to find a controller named directive1Ctrl that never happens.