Edit in JSFiddle

angular.module('demo', []).controller("ctrl", function ($scope) {
    $scope.list = [];
    var max = 10;
    for(var i = 0; i < max; i++){
        $scope.list.push({id: i, text: "Element " + i});
    }
    $scope.selected = $scope.list[0];
    
    
    
}).directive('customSelect', function(){
    var template= "<div class='selectContainer' tabindex='0' ng-class='{\"expanded\": isExpanded}' ng-click='toggleExpand();' ng-blur='close();' > <div class='selectDisplay' >{{getDisplay(model);}}</div><div class='arrow'></div><ul class='selectOptions'><li class='selectOption' ng-class='{\"selectedOpt\": model == opt}' ng-click='selectValue(opt);' ng-repeat='opt in options'>{{getDisplay(opt);}}</li></ul></div>";
   
    function link(scope){
        
        scope.getDisplay = function getDisplay(opt){
            return opt[scope.displayAttribute];
        };
        
        scope.isExpanded = false;
        scope.selectValue = function selectValue(opt){
            scope.model = opt;
            //scope.close();
            
        };
        
        scope.toggleExpand = function toggleExpand(){
            scope.isExpanded = !scope.isExpanded;
            if (scope.isExpanded){
                
            }
        }
        
        scope.close = function close(){
            scope.isExpanded = false;
        };
        
    }
    return {
        restrict: "E",
        link: link,
        template: template,
        scope:{
            model: '=',
            options: '=',
            displayAttribute: '='
        }
    };
});

<div id='container' ng-controller="ctrl">
    <custom-select model='selected' options='list' display-attribute="'text'" >
        
    </custom-select>
    <input type='text' ng-model='selected.text'></input>
</div>

.selectContainer{
    height:20px;
    border: 1px solid #343239;
    color:#89c2da;
    border-radius:6px;
    cursor:default;
    position relative;
}
html{ 
    background-color:#18151e;
}

.selectContainer.expanded .selectOptions{
    display:block;
    
}

.selectDisplay{
}

.selectOptions{
    display:none;
    list-style:none;
    padding:0;
    border: 1px solid #343239;
    color:#89c2da;
    margin: 0;
    position: relative;
    background-color: #18151e;
}

.selectOption:hover{
    color: #18151e;
    background-color:#89c2da;
}

.selectOption.selectedOpt{
    color: #18151e;
    background-color:#89c2da;
}

.selectContainer .arrow{
    position: absolute;
    height:0;
    width: 0;
    border-top: 10px solid #89c2da;
    border-left: 5px solid transparent;
	border-right: 5px solid transparent;
	 right: 15px;
    top: 15px;
}