AngularJS: Using an attribute set in one directive, within another directive - angularjs

Question

Scenario
Lets say I have two directives first and second where the directives are used on the same DOM element as such:
HTML
<div first second></div>
Javascript
//first directive
.directive('first', function(){
return {
restrict: 'A',
priority: 1,
link: function(scope, element, attrs){
element.attr('someAttr', 1234);
element.html('I have the attribute value: ' + element.attr('someAttr'));
}
};
})
// second directive
.directive('second', function(){
return {
restrict: 'A',
priority: 0,
controller: function($scope, $element, $attrs){
// the elements attribute `someAttr` is undefined here
}
};
})
The first directive adds an attribute (someAttr) to the element where it is being used.
Problem
What I want to achieve is that access/use the set value to someAttr (set in first directive) in the second directive's link/controller function. But for the moment, I haven't been successful in doing so. (Check this fiddle out)
Note: I've also set the priority of the first directive to a value higher than that of second, but still when you log the attributes of the element where the directive is used, there is no someAttr attribute in the set.
Also note that if how I want to achieve the communication between directives is not appropriate, then what is the right way to do so? Any help would be appreciated.

Answer 1

You cannot cannot detect changes in attributes set to the DOM element directly (at least not in angularjs way).
Try using a property in the first directive controller and then 'require' 'first' in 'second' to access 'second' properties.
Check the information about the 'requires' property when defining a directive to see how it works.
UPDATE: Check this plunkr:
http://plnkr.co/edit/bEbO8LvCIUd0NZPFqMnv?p=preview
app.directive('first', function(){
return {
restrict: 'A',
link: function(scope, element, attrs){
element.html('I (first) have the scope value: ' + scope.data.attribute);
},
controller: function($scope) {
this.data = $scope.data = {
attribute: 1234
};
}
};
});
// second directive
app.directive('second', function(){
return {
restrict: 'A',
require: 'first',
priority: 1,
link: function($scope, element, attrs, firstController){
element.html(element.html() + ' and I (second) have access to that value too: ' + firstController.data.attribute);
//you can $scope.$watch firstController.data changes here too
}
};
});