Drop-down list with custom arrow.

<!DOCTYPE html>
<html>

  <head>
    <link
      rel="stylesheet"
      href="style.css" />
  </head>
  
  <body
    ng-app="DDLApp"
    ng-controller="DDLCtrl">
    
    <select-switch main-model='value'></select-switch>
    
    <script
      src="https://code.angularjs.org/1.5.6/angular.js">
    </script>
    <script
      src="script.js">
    </script>
    
  </body>

</html>

'use strict';

var app = angular.module('DDLApp', []);

app.controller('DDLCtrl', ['$scope', function($scope) {
  $scope.value = '';
}]);

app.directive('selectSwitch', function() {
  return {
    restrict: 'E',
    template: '<select ng-model="DDLModel" ng-options="value for value in selectValues"></select></div>',
    link: function(scope) {

      // NOTE
      // Values that display logic should be performed on are being set here.
      scope.selectValues = [
        'one',
        'two',
        'three',
        'four',
        'five',
        'six',
        'seven',
        'eight',
        'nine',
        'ten'
      ];
    }
  };
});

select {
    width: 390px;
    height: 38px;
    border: 0;
    background: url(http://cdn1.iconfinder.com/data/icons/cc_mono_icon_set/blacks/16x16/br_down.png) no-repeat right;
    background-position-x: 372px;
    -webkit-appearance: none;
    -mz-appearance: none;
}
select:focus {
    outline: none;
}

Drop-down list with custom arrow.