Angular directives collaboration - angularjs

Question

So here I am trying to implement an autocomplete suggestion with angular and I need your expertise.
Here is the html:
<div my-autosuggest>
<input type="text" my-autosuggest-input>
<ol>
<li ng-repeat"item in items" my-autosuggest-list>...</li>
</ol>
</div>
I don't want to use templates to generate <li> elements. (I want it to be flexible to use any kind of element in any order and maybe some other extra elements in between for the list and dropdown)
The hard part is to respond to arrow keys on the input to highlight the next/prev element in the list. How do I let the other directive my-autosuggest-list know that it should select the next element from my-autosuggest-input directive.
Note that I might have multiple autosuggests in one controller like this:
<div ng-controller="MyController">
<div my-autosuggest>
<input type="text" my-autosuggest-input>
<ol>
<li ng-repeat"item in items" my-autosuggest-list>...</li>
</ol>
</div>
<div my-autosuggest>
<ol>
<li ng-repeat"item in items" my-autosuggest-list>...</li>
</ol>
<input type="text" my-autosuggest-input>
</div>
</div>
So far I have tried to $watch for an index change but sometime the watch wont be called for some elements in the list (maybe it's a bug).
$broadcast won't work because the input might be wrapped in another controller or inside another element so the broadcast won't be heard by the list.
I also tried to put a variable for each autosuggest in the root scope but the order in which the directives are called in not always from parent to child so I cannot initialize that variable and create a new one each time my-autosuggest is called because my-autosuggest-input or others might be called before that.
Any suggestion on how to design this with angular is appreciated.

Answer 1

Assuming that my-autosuggest-input and my-autosuggest-list are always inside a my-autosuggest. You could use a series of $emitted and $broadcast events to accomplish this.
Inside the my-autosuggest-input's link function add a $emit when the arrow key is pressed:
element.on('keyup', function () {
// Figure out if this is an arrow key, if so:
$scope.$emit('listSelect', { message: 'prevItem' }); // Or 'nextItem'
});
Inside the my-autosuggest link function or controller add:
// Add a controllerId, so that the listener doesn't handle its own events.
$scope.controllerId = Math.random().toString();
$scope.$on('listSelect', function (e, data) {
if ($scope.controllerId !== data.controllerId) {
$scope.$broadcast('listSelect', {
controllerId: $scope.controllerId,
message: data.message
});
}
});
Finally, inside my-autosuggest-list's link function or controller add:
$scope.$on('listSelect', function (e, data) {
if (data.message === 'nextItem') {
// Highlight next item.
} else {
// Highlight previous item.
}
});
In this scenario my-autosuggest routes any listSelect events from any of its children to all of its children.