javascript - Drilling $scope to get a specific element in a complex auto complete DOM

Question

After trying to figure this out for a while It seem that i'm in a dead end situation, and thinking how easy it is in jQuery make me think about angular again, But maybe I am think about this is a wrong way.

Having this DOM:

<div ng-controller="ChildCategoriesController">
        <div style="float:right; width:362px; height:57px; background-color:white; border:1px solid black; position:relative; right:272px;">
            <input type="text" style="width:362px; height:57px; line-height:57px; font-family:Arial; font-size:24px;" ui-keyup="{'40':'keypressCallback11($event)'}" ng-model="jobChildCategoryModel.JobCategoryName" ng-change="change()" placeholder="Place Holder Example" />
            <div id="JobscCategories" style="width:362px; background-color:white; border:1px solid black; position:relative; right:1px; display:none; font-family:Arial; font-size:24px;">
                <div click enter leave ng-class="{'MouseOver':$first}" ng-repeat="cCategory in cCategories | filter:jobChildCategoryModel | orderBy:'JobCategoryName' | limitTo:7 | unique:'JobCategoryName'" ui-keyup="{'enter':'keypressCallback1($event)'}" id="cCategoryID_{{cCategory.JobCategoryID}}">{{cCategory.JobCategoryName}}</div>
            </div>
        </div>
        <div style="float:right; position:relative; right:352px; top:22px; font-size:20px; font-weight:bold; font-family:Arial;"><a href="#">Show Jobs</a></div>
    </div>

I I can find where i am in the DOM when using the mouse with directives and every thing is working over there, But can't figure out how to do this with the key arrows. I can not bind the ui-keyup to the div elements (does not fire the event) and can not figure out how to move from the input to the auto complete divs with the arrows. weirder then that is that i can not find one full and good example to do this.

To be clear, the DOM is:

div --> input div ---> many div elements of categories div

and i need to enable someone, after entering few letters in the input, to be able to use the arrows to move to the categories div and select one of them with the enter key or go back to the top. And also, if someone used the mouse to move and is on a specific element to be able to use the key from that point.... i even cant seem to find how to get the a specific element from the categories div block, as i don't know what is the index of the elements when i am in the controller.

Can any one answer this or send me to a good tutorial, every example is for a very basic DOM and couldn't find even one for this auto complete type of thing...weird, as there re hundreds of tutorial for jQuery for doing stuff like that.

Thank you