ng-click not working on li

Question

I find this very bizzare, ng-click is not working on this element,

<div class="row">
    <div class="col-md-12">
        <div class="form-group label-floating is-empty">
             <label class="control-label">category</label>
                 <input type="text" class="form-control" onkeydown="return false;" ng-focus="autocomplete != autocomplete" ng-blur="autocomplete != autocomplete">
                 <div class="autocomplete-c" ng-show="autocomplete">
                     <ul>
                         <li ng-repeat="d in categories" ng-click="selectCategory(d)">
                             <p>{{d.name}}</p>
                             <small>{{d.types}}</small>
                         </li>
                     </ul>
                </div>
                <span class="material-input"></span>
            </div>
        </div>
    </div>

And this as the function,

$scope.selectCategory = function(d){
    console.log(d);
}

This there is no event triggered, I need help with this.

Answer 1

I suspect that by using ng-blur and ng-focus your click function is not getting registered because the div is getting hidden before you click on the list. My suggestion is to not use ng-blur and ng-focus but rather ng-click on the input.

Working fiddle: http://jsfiddle.net/ADukg/13591/