Focus custom md-checkbox in md-select control - angularjs

Question

I have implemented select control with select all option, When I open the control, it focuses on the first option. I would like to focus on the select option or at least disable the focus.
HTML
<div ng-app="selectDemoOptGroups" ng-controller="SelectOptGroupController" >
<md-select md-selected-text="selectedText" ng-model="selectedToppings" multiple>
<div class="select-all-div" >
<md-checkbox class="select-selectAll"
>Select all</md-checkbox > </div>
<md-option ng-value="topping.name" ng-repeat="topping in toppings">{{topping.name}}</md-option>
</md-select>
JS
angular
.module('selectDemoOptGroups', ['ngMaterial'])
.controller('SelectOptGroupController', function($scope) {
$scope.toppings = [
{ category: 'meat', name: 'Pepperoni' },
{ category: 'meat', name: 'Sausage' },
{ category: 'meat', name: 'Ground Beef' },
{ category: 'meat', name: 'Bacon' },
{ category: 'veg', name: 'Mushrooms' },
{ category: 'veg', name: 'Onion' },
{ category: 'veg', name: 'Green Pepper' },
{ category: 'veg', name: 'Green Olives' }
];
$scope.selectedToppings = [];
});
https://jsfiddle.net/AlexLavriv/ya6eu8kz/5/

Answer 1

You can't use a div for single opotion and options for the rest. You can use the same option to display the option select all.
<md-select>
<md-option>Select all</md-option>
<md-option ng-value="topping.name" ng-repeat="topping in toppings">{{topping.name}}</md-option>
</md-select>
Working Demo: JSFiDDLE

Answer 2

Working Demo
Try this below way
angular
.module('selectDemoOptGroups', ['ngMaterial'])
.controller('SelectOptGroupController', function($scope) {
$scope.toppings = [
{ category: 'meat', name: 'Pepperoni' },
{ category: 'meat', name: 'Sausage' },
{ category: 'meat', name: 'Ground Beef' },
{ category: 'meat', name: 'Bacon' },
{ category: 'veg', name: 'Mushrooms' },
{ category: 'veg', name: 'Onion' },
{ category: 'veg', name: 'Green Pepper' },
{ category: 'veg', name: 'Green Olives' }
];
$scope.toppings.unshift( { category: 'select', name: 'Select all' })
$scope.selectedText = $scope.toppings[0].name;
});
.select-selectAll{
text-align: left;
padding-left: 10px;
/* padding-right: 16px; */
display: flex;
cursor: pointer;
position: relative !important;
display: -webkit-box;
display: -webkit-flex;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
align-items: center;
width: 95%;
-webkit-transition: background .15s linear;
transition: background .15s linear;
/* padding: 0 16px; */
height: 48px;
}
.select-selectAll div.md-icon{
left:10px;
}
.select-all-div:hover{
background: rgb(238,238,238);
}
<div ng-app="selectDemoOptGroups" ng-controller="SelectOptGroupController" >
<md-select md-selected-text="selectedText" ng-model="selectedToppings" multiple>
<md-option ng-value="topping.name" ng-repeat="topping in toppings">{{topping.name}}</md-option>
</md-select>
</div>